<template>
    <Head>
        <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></Poster>

    <div class="background_box">

        <!-- 新闻类型 -->
        <div class="news-titile-pos-box">
            <div class="news-title-box" v-for="(item, index) in newsTypeList" :key="index">
                <div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'" @click="handleClickType(index)">{{item.name}}</div>    
                <div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>    
            </div>
        </div>

        <main class="container ">
            <!--招生新闻-->
            <div class="news-container-box container">

                <!-- 模块渲染列表 -->
                <div v-if="newsList.length != 0" class="news-big-box row animate__animated animate__fadeIn">
                    <div class="news-box col-lg-4 col-md-6 col-sm-12" v-for="(item, index) in newsList">
                        <div class="news-s-box">
                            <nuxt-link v-if="item.info_article_link" :to="item.info_article_link" class="jump">
                                <div class="news-img-box">
                                    <img :src=item.info_article_cover alt="">
                                </div>
                                <div class="news-content-box">
                                    <div class="news-content-title">{{ item.info_article_title }}</div>
                                    <div class="news-content-line"></div>
                                    <div class="news-content-sublevel">
                                        <div class="news-content-more">现在阅读</div>
                                        <div class="news-content-time">{{ item.info_article_create_time }}
                                        </div>
                                    </div>

                                </div>
                            </nuxt-link>
                            <nuxt-link v-else :to="'/news/details/' + item.info_article_id" class="jump">
                                <div class="news-img-box">
                                    <img :src=item.info_article_cover alt="">
                                </div>
                                <div class="news-content-box">
                                    <div class="news-content-title">{{ item.info_article_title }}</div>
                                    <div class="news-content-line"></div>
                                    <div class="news-content-sublevel">
                                        <div class="news-content-more">现在阅读</div>
                                        <div class="news-content-time">{{ item.info_article_create_time }}
                                        </div>
                                    </div>

                                </div>
                            </nuxt-link>
                        </div>
                    </div>
                </div>
                <div class="list_none" v-else>
                    <el-empty description="暂无数据" />
                </div>

            </div>


            <!-- 分页 -->
            <div class="page-box">
                <pagination class="page" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
                    @pagination="routerJump()" />
            </div>
        </main>

    </div>

    <Final></Final>
</template>

<script setup>
let newsList = ref(
    [
        // {
        //     info_article_id: '1',
        //     info_article_title: "【2023届联考成绩公示】为理想来为梦想战",
        //     info_article_cover: "/img/business/nuxt/@2x.png",
        //     info_article_create_time: "2023-02-23",
        // },
    ]
)

let newsTypeList = ref([
    {
        name: '公司新闻',
        idx: 0
    },
    {
        name: '行业动态',
        idx: 1
    },
    {
        name: '技术分享',
        idx: 2
    },
])


const route = useRoute()
const router = useRouter()

let active = reactive({ idx: Number(route.params.idx), name: newsTypeList.value[0] })

onMounted(() => {

})

watch(active, (nv) => {
    router.push(String(nv['idx']) + "-1")
})

// --- 参数 ---
let total = ref(0)
const queryParams = reactive({
    page: parseInt(route.params.page) || 1,
    idx: parseInt(route.params.idx) || 0,
    limit: 10
})

// --- 方法 ---
const routerJump = function () {
    let { page } = queryParams
    router.push(String(newsTypeList.value[active['idx']]) + "-" + String(page))
}

const handleClickType = function (index) {
    let { page } = queryParams
    router.push(String(index) + "-" + String(page))
}


/**
 * 接口对接
 */

// 获取Tdk
let tdk = ref({})
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
    tdk.value = JSON.parse(res.data.value).data
})

// // 获取新闻列表
// useFetch('/api/news/getinfoArticleList', { params: queryParams }).then(res => {
//     total.value = JSON.parse(res.data.value).count || 0
//     newsList.value = JSON.parse(res.data.value).data || []
// })

// // 添加流量访问
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })


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

})
</script>

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