<template>

    <Head>
        <Title>{{ newsDetail.news_title }}-{{ tdk?.tdk_title }}</Title>
        <Meta :content=tdk?.tdk_keyword name="keywords" />
        <Meta :content=tdk?.tdk_description name="description" />
    </Head>

    <Header></Header>
    <Poster :type=1 :title="newsDetail.news_title"></Poster>

    <div class="container">
        <div class="news">
            <div class="news__title">
                <h1>{{ newsDetail.news_title }}</h1>
                <h3 class="news__date">{{ newsDetail.news_issue_date }}</h3>
            </div>

            <!-- 渲染新闻富文本 -->
            <section class="news__detail" v-html="newsDetail.news_content"></section>

            <div class="news__paging">
                <div class="news__paging-prev">
                    <template v-if="newsDetail.prev">
                        <nuxt-link :to="getHerf('/news/details/' + newsDetail.prev?.news_id)">
                            {{ newsDetail.prev?.news_title }}
                        </nuxt-link>
                    </template>
                    <template v-else>
                        {{ $t('news.noprev') }}
                    </template>
                </div>

                <div class="news__paging-next">
                    <template v-if="newsDetail.next">
                        <nuxt-link :to="getHerf('/news/details/' + newsDetail.next?.news_id)">
                            {{ newsDetail.next?.news_title }}
                        </nuxt-link>
                    </template>
                    <template v-else>
                        {{ $t('news.nonext') }}
                    </template>
                </div>
            </div>
        </div>
    </div>


    <Final></Final>
    <PopupSidebar></PopupSidebar>
    <PopupMessageUs></PopupMessageUs>
</template>

<script setup>
const { l, locale } = useI18n();
// --- 接口对接 ---
// 参数
const route = useRoute()

// 预对接
let newsDetail = ref({})

onMounted(() => {
    fontSizeReactive({
        880: 1,
        480: 1,
    })
})


// 获取新闻详情
useFetch('/api/news/getinfoArticleInfo', { params: { news_id: route.params.id, locale: locale.value } }).then(res => {
    newsDetail.value = JSON.parse(res.data.value).data
})

// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
    tdk.value = JSON.parse(res.data.value).data
})
// 添加流量访问
useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })

</script>

<style scoped lang="scss">
.news {
    padding: 80px 0px;

    &__title {
        padding-bottom: 20px;
        margin-bottom: 40px;
        border-bottom: 1px solid var(--rootColor);

        h1 {
            font-size: 26px;
            color: #000;
            font-weight: bold;
            text-align: center;
        }
    }

    &__date {
        font-size: 16px;
        text-align: center;
        color: #666;
        margin-top: 20px;
    }

    :deep(p) {
        font-size: 16px;
        line-height: 28px;
        color: #222;
        text-indent: 2em;
        margin-bottom: 15px;
    }

    :deep(img) {
        max-width: 100%;
        display: block;
        margin: 30px auto;
        text-align: center;
    }


    &__paging {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 50px;
        flex-wrap: wrap;

        &-prev,
        &-next {
            width: 45%;
            overflow: hidden;
            border: 1px solid var(--rootColor);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 13px 10px;
            transition: all 0.35s ease-in-out;
            user-select: none;

            &:hover {
                background-color: var(--rootColor);
            }

            a {
                font-size: 16px;
                color: #000;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-decoration: none;

                &:hover {
                    color: #fff
                }
            }
        }
    }
}
</style>