<template>
    <Head>
        <Title>{{ infoArticleInfo.info_article_title }}{{ tdk.tdk_title }}</Title>
        <Meta :content=tdk.tdk_keyword name="keywords" />
        <Meta :content=tdk.tdk_description name="description" />
    </Head>

    <Header></Header>

    <!-- 艺考资讯详情大盒子 -->
    <div class="joint-details-pos-box">

        <div class="--box--">

            <!-- 返回 -->
            <div @click="router.back()">
                <img class="return" src="/img/business/signUp/返回.png" alt="">
            </div>
            <!-- 标题 -->
            <div class="joint-details-title-box" data-animation="animate__animated animate__zoomIn">
                <div class="joint-details-title">{{ infoArticleInfo.info_article_title }}</div>
                <div class="joint-details-time">{{ infoArticleInfo.info_article_create_time }}</div>
            </div>

            <hr>

            <div class="joint-details-content-box op0" data-animation="animate__animated animate__fadeIn"
                v-html=infoArticleInfo.info_article_content></div>

            <!-- 翻篇 -->
            <div class="Turn-the-page op0" data-animation="animate__animated animate__fadeIn">
                <hr>
                <div class="Turn-the-page-box">
                    <nuxt-link class="f1" v-if="infoArticleInfo.prve"
                        :to="'/news/details/' + infoArticleInfo.prve.info_article_id">上一篇: {{
                            infoArticleInfo.prve.info_article_title }}</nuxt-link>
                    <nuxt-link class="f1" v-if="infoArticleInfo.next"
                        :to="'/news/details/' + infoArticleInfo.next.info_article_id">下一篇: {{
                            infoArticleInfo.next.info_article_title }}</nuxt-link>
                </div>
            </div>
        </div>


    </div>
    <Final></Final>
</template>

<script setup>
// --- 接口对接 ---
// 参数
const route = useRoute()
const router = useRouter()
// 预对接
let infoArticleInfo = ref({})




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

    setTimeout(() => {
        [...document.querySelectorAll('.joint-details-content-box img')].map(item => {
            item.style.maxWidth = 100 + '%'
            item.style.height = 0 + '%'
        })

        htmlAddAnimations()
    });

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

</script>


<style scoped src="~/assets/css/business/news/news_details/index.scss"></style>
<style scoped src="~/assets/css/business/news/news_details/media.scss"></style>
