<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"
                    :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: () => []
    }
})

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>