<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 :area-name="newsDetail.areaName" />
                    </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;" class="flex-display">
                    <color-prefix-title height="20px">
                        <div class="text-title-2-bold">新闻内容</div>
                    </color-prefix-title>
                    <div class="flex-fill"></div>
                    <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)">中文</common-text>
                        <div class="flex-fill" style="margin: 0 10px;">
                            <el-divider></el-divider>
                        </div>
                        <el-button @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>
                        </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 style="margin-top: 10px;">
                    <news-item v-for="item in relationNews" :key="item.newsId" :news-item="item" />
                </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 } 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';
const newsDetail = ref({});
const relationNews = ref([]);
const zhEnTexts = ref([]);
const znEnColSpan = ref(12);
const hasTranslation = ref(false);
const isOpenTranslation = ref(true);
const showMore = ref(false);
const route = useRoute();
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 ?? [];

    updateText();
});
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>