<template>
	<div class="full-width">
		<div class="flex-display" style="align-items: center">
			<common-text class="text-title-3-bold" color="var(--text-primary-80-color)">{{
				isOpenTranslation ? "中文" : "原文"
			}}</common-text>
			<div class="flex-fill" style="margin: 0 10px">
				<el-divider></el-divider>
			</div>
			<el-button
				v-if="showMoreVisible"
				@click="
					() => {
						showMore = !showMore;
						updateText();
					}
				"
			>
				{{ showMore ? "收起" : "展开" }}
				<el-icon>
					<arrow-up v-if="showMore" />
					<arrow-down v-else />
				</el-icon>
			</el-button>
		</div>
		<el-row :gutter="32">
			<el-col :span="textColSpan" v-for="(item, index) in allTexts" :key="index">
				<!-- <p class="p-news-content"> {{ item }}</p> -->
				<intelligent-entity-text
					:text="item"
					@on-entity-click="e => $emit('onEntityClick', e)"
					:entities="isHighlightEntity ? textEntities : []"
				></intelligent-entity-text>
			</el-col>
		</el-row>
	</div>
</template>
<script lang="ts" setup>
import "@/styles/container.scss";
import "@/styles/common.scss";

import { ref, watch, onMounted } from "vue";
import { TextEntity } from "@/api/intelligent";
import IntelligentEntityText from "@/components/base/texts/IntelligentEntityText.vue";
import { ElIcon, ElButton, ElDivider, ElRow, ElCol } from "element-plus";
import CommonText from "./CommonText.vue";

const allTexts = ref([]);
const textColSpan = ref(12);
const hasTranslation = ref(false);
const showMore = ref(false);
const showMoreVisible = ref(false);
const props = defineProps({
	//段落列表： 原始文本
	textsRaw: {
		type: Array<String>,
		default: () => []
	},
	//段落列表： 翻译文本
	textsTranslate: {
		type: Array<String>,
		default: () => []
	},
	//是否显示翻译
	isOpenTranslation: {
		type: Boolean,
		default: true
	},
	//是否高亮实体
	isHighlightEntity: {
		type: Boolean,
		default: true
	},
	//实体列表
	textEntities: {
		type: Array<TextEntity>,
		default: () => []
	}
});
const emit = defineEmits(["onEntityClick"]);
function updateText() {
	const tempTexts = [];
	const tempRaws = props.textsRaw ?? [];
	const tempTranslates = props.textsTranslate ?? [];
	hasTranslation.value = tempTranslates.length > 0;

	if (hasTranslation.value && props.isOpenTranslation) {
		// 遍历原始文本和翻译文本，将它们交替添加到 tempTexts 中,并保持原始文本和翻译文本的的数量一致
		const maxCount = Math.max(tempRaws.length, tempTranslates.length);
		for (let i = 0; i < maxCount; i++) {
			if (i < tempTranslates.length) {
				tempTexts.push(tempTranslates[i]);
			} else {
				tempTexts.push("");
			}
			if (i < tempRaws.length) {
				tempTexts.push(tempRaws[i]);
			} else {
				tempTexts.push("");
			}
		}
		console.log(tempTexts.length);
		textColSpan.value = 12;
		showMoreVisible.value = tempTexts.length > 6;
		allTexts.value = showMore.value ? tempTexts : tempTexts.slice(0, 6);
	} else {
		textColSpan.value = 24;
		showMoreVisible.value = tempRaws.length > 3;
		allTexts.value = showMore.value ? tempRaws : tempRaws.slice(0, 3);
	}
}

watch(
	() => [props.textsRaw, props.textsTranslate, props.isOpenTranslation],
	() => {
		updateText();
	}
);

onMounted(() => {
	updateText();
});
</script>
