<template>
    <el-scrollbar>
        <div class="flex-display common-page top-box-news-deatail" style="align-items: center;">
            <!-- <color-svg :svg-url="NewsLogo" :size="72" style="margin-right:10px"></color-svg> -->
            <img :src="NewsLogo" style="margin-right:24px">
            <el-space direction="vertical" class="flex-fill" alignment="flex-start">
                <common-text class="text-title-1-bold" color="var(--text-primary-80-color)">
                    {{ newsDetail.titleZh }}
                </common-text>
                <common-text class="text-tip-1-bold" color="var(--text-primary-80-color)">
                    {{ newsDetail.title }}
                </common-text>
                <common-text class="text-tip-1-bold" color="var(--text-primary-65-color)">
                    {{ `${newsDetail.publishedTime} · ${newsDetail.source} ` }}
                    <el-space>
                        <area-tag v-for="item in newsDetail.domainList" :key="item" :tag-name="item.industryName" />
                    </el-space>
                </common-text>
            </el-space>
            <!-- <el-button type="primary" @click="() => gotoNewsDetail(newsDetail.newsId)">
                <el-icon class="icon">
                    <el-icon>
                        <top-right />
                    </el-icon>
                </el-icon>
                查看原网页
            </el-button> -->
        </div>
        <div class="flex-display common-page content-box-news-detail">
            <el-space direction="vertical" class="background-as-card flex-fill" fill alignment="flex-start">
                <div style="margin-top: 10px; margin-right: 24px;gap:10px" class="flex-display">
                    <color-prefix-title height="20px">
                        <div class="text-title-2-bold">新闻内容</div>
                    </color-prefix-title>
                    <div class="flex-fill"></div>
                    <el-switch v-model="isHightLightEntity" active-text="高亮实体" @change="handleHighlightEntity" />
                    <el-button v-if="hasTranslation" :type="isOpenTranslation ? 'primary' : ''" plain
                        @click="handleTranslation">
                        <color-svg :svg-url="TranslationSvg" color="var(--color-primary-100)" :size="18"
                            style="margin-right:10px"></color-svg>
                        译文
                    </el-button>
                </div>
                <div class="common-padding">
                    <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="zhEnTexts.length > 6" @click="() => showMore = !showMore">
                            {{ showMore ? '收起' : '展开' }}
                            <el-icon>
                                <arrow-down v-if="showMore" />
                                <arrow-up v-else />
                            </el-icon>
                        </el-button>
                    </div>
                    <el-row :gutter="32">
                        <el-col :span="znEnColSpan"
                            v-for="(item, index) in showMore ? zhEnTexts : zhEnTexts.slice(0, 6)" :key="index">
                            <!-- <p class="p-news-content"> {{ item }}</p> -->
                            <intelligent-entity-text :text="item"
                                :entities="isHightLightEntity ? textEntities : []"></intelligent-entity-text>
                        </el-col>
                    </el-row>
                </div>
            </el-space>
            <el-space direction="vertical" class="background-as-card relation-news-box" alignment="flex-start">
                <el-space style="margin-top: 10px;">
                    <color-prefix-title height="20px">
                        <div class="text-title-2-bold">相关新闻</div>
                    </color-prefix-title>
                </el-space>
                <el-space direction="vertical" fill class="common-padding">
                    <news-item v-for="item in relationNews" :key="item.newsId" :news="item" :img="item.newsImage"
                        :title="item.newsTitle" :from="`${item.newsDate} · ${item.newsOrg}`"
                        @click="gotoNewsDetail(item.newsId)" />
                </el-space>
            </el-space>
        </div>
    </el-scrollbar>
</template>
<script setup>
import { getNewsDetail } from "@/api/news/newsBrief";
import '@/styles/container.scss';
import '@/styles/common.scss';
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElSpace, ElImage, ElButton, ElIcon, ElScrollbar, ElRow, ElCol, ElDivider, ElSwitch } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue";
import AreaTag from "@/components/base/AreaTag/index.vue";
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import { getRelationNews } from "@/api/news/newsDetail";
import NewsItem from "@/components/base/newsList/NewsItem.vue";
import ColorSvg from "@/components/base/images/ColorSvg.vue";
import TranslationSvg from './assets/images/翻译 1.svg';
import NewsLogo from './assets/images/组合 293.svg';
import { extractTextEntity } from "@/api/intelligent";
import { useGotoNewsDetail } from "@/router/modules/news";
import IntelligentEntityText from "@/components/base/texts/IntelligentEntityText.vue";

const newsDetail = ref({});
const relationNews = ref([]);
const zhEnTexts = ref([]);
const znEnColSpan = ref(12);
const hasTranslation = ref(false);
const isOpenTranslation = ref(true);
const isHightLightEntity = ref(true);
const textEntities = ref([]);
const showMore = ref(false);
const route = useRoute();
const gotoNewsDetail = useGotoNewsDetail();

onMounted(async () => {
    const params = {
        newsId: route.params.id
    }
    const { data: newsDetailData } = await getNewsDetail(params);
    newsDetail.value = newsDetailData ?? {};

    const { data: relationNewsData } = await getRelationNews(params);
    relationNews.value = relationNewsData ?? [];
    console.log(relationNews.value)

    updateText();

    await handleHighlightEntity();

});

async function handleHighlightEntity() {
    if (textEntities.value.length > 0) return
    const { result: entityDataZh } = await extractTextEntity(newsDetail.value.contentZh);
    textEntities.value = [...entityDataZh ?? []]
    if (newsDetail.value.contentZh !== newsDetail.value.content) {
        const { result: entityData } = await extractTextEntity(newsDetail.value.content);
        textEntities.value = [...textEntities.value, ...entityData ?? []]
    }
}
function handleTranslation() {
    isOpenTranslation.value = !isOpenTranslation.value;
    updateText();
}

function updateText() {
    const enTexts = newsDetail.value.content?.split('\n')
    const zhTexts = newsDetail.value.contentZh?.split('\n')
    console.log(enTexts.length, zhTexts.length)
    const tempZhEnTexts = []
    hasTranslation.value = enTexts.length === zhTexts.length
    if (hasTranslation.value && isOpenTranslation.value) {
        for (let i = 0; i < enTexts.length; i++) {
            tempZhEnTexts.push(zhTexts[i]);
            tempZhEnTexts.push(enTexts[i]);
        }
        znEnColSpan.value = 12;
    } else {
        for (let i = 0; i < enTexts.length; i++) {
            tempZhEnTexts.push(enTexts[i]);
        }
        znEnColSpan.value = 24;
    }
    zhEnTexts.value = tempZhEnTexts;
}

</script>
<style lang="scss" scoped>
@import url("./style.css");

.top-box-news-deatail {
    background-color: var(--bg-white-100);
    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
}

.content-box-news-detail {
    align-items: flex-start;
    gap: 16px;
}

.relation-news-box {
    width: 520px;
}

.p-news-content {
    //首行缩进
    text-indent: 2em;
}
</style>