<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="textZns.length > 0" :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>
                <text-translate-pane class="common-padding-h" :texts-raw="textEns" :texts-translate="textZns"
                    :text-entities="textEntities" :is-open-translation="isOpenTranslation"
                    :is-highlight-entity="isHightLightEntity">
                </text-translate-pane>
                <div>
                    <img v-if="newsDetail.coverUrl" class="common-padding" :src="newsDetail.coverUrl" :width="320"
                        :height="240" />
                </div>
            </el-space>
            <el-space direction="vertical" class="background-as-card relation-news-box" fill>
                <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 v-if="relationNews?.length > 0" direction="vertical" fill class="common-padding">
                    <news-item-mini 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-empty v-else style=""></el-empty>
            </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, ElButton, ElScrollbar, ElSwitch, ElEmpty, ElImage } 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 NewsItemMini from "@/components/base/newsList/NewsItemMini.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 TextTranslatePane from "@/components/base/texts/TextTranslatePane.vue";

const newsDetail = ref({});
const relationNews = ref([]);
const isOpenTranslation = ref(true);
const isHightLightEntity = ref(true);
const textEntities = ref([]);
const textZns = ref([]);
const textEns = ref([]);
const route = useRoute();
const gotoNewsDetail = useGotoNewsDetail();

onMounted(async () => {
    const params = {
        newsId: route.params.id
    }
    const { data: newsDetailData } = await getNewsDetail(params);
    newsDetail.value = newsDetailData ?? {};
    textZns.value = newsDetail.value?.contentZh?.split('\n') ?? [];
    textEns.value = newsDetail.value?.content?.split('\n') ?? [];
    const { data: relationNewsData } = await getRelationNews(params);
    relationNews.value = relationNewsData ?? [];
    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 ?? []]
    }
    console.log(isHightLightEntity.value)
}
function handleTranslation() {
    isOpenTranslation.value = !isOpenTranslation.value;
}

</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>