<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 :title="$t('common.poster.news')"></Poster>

    <div class="background_box">

        <main class="container ">
            <!-- 模块渲染列表 -->
            <div v-if="newsList.length != 0" class="news-big-box animate__animated animate__fadeIn">
                <div class="news-box" v-for="(item, index) in newsList">

                    <nuxt-link :to="getHerf(getLink(item))" class="jump">
                        <div class="news-card">
                            <div class="row">
                                <div class="news-card__preview col-sm-12 col-md-4 col-lg-4">
                                    <div class="news-card__preview-image">
                                        <img :src="item.news_cover" alt="">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-8 col-lg-8">
                                    <div class="news-card__content">
                                        <div class="news-card__title">
                                            {{ item.news_title }}
                                        </div>
                                        <div class="news-card__desc">
                                            {{ item.news_intro }}
                                        </div>
                                        <div class="news-card__footer">
                                            <div class="news-card__time">{{ item.news_issue_date }}</div>
                                            <div class="news-card__read-more">{{ $t('news.more') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nuxt-link>
                </div>
            </div>
            <div class="list_none" v-else>
            </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>
    <PopupSidebar></PopupSidebar>
    <PopupMessageUs></PopupMessageUs>
    <Final></Final>
</template>

<script setup>

const { t, locale } = useI18n()

// 预对接
let newsList = ref([])

let newsTypeList = ref([])

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

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

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,
    locale: locale.value,
    limit: 10
})

// --- 方法 ---
const routerJump = function () {
    let { page } = queryParams
    router.push("1-" + String(page))
}

const getLink = function (item) {
    if (item.news_link) {
        return item.news_link;
    } else {
        return "/news/details/" + item.news_id;
    }
}

// 获取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/news/getNewsList', { params: queryParams, locale: locale.value }).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 } })

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

})
</script>

<style scoped src="~/assets/css/business/news/index.scss"></style>
<style scoped src="~/assets/css/business/news/media.scss"></style>
<style scoped lang="scss">
.news-big-box {
    margin-top: 50px;
}

.news-card {
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.35s ease-in-out;

    .row {
        &:hover {
            background-color: var(--rootColor);
            transition: all 0.35s ease-in-out;

            .news-card {

                &__title,
                &__desc,
                &__time,
                &__read-more {
                    color: #fff;
                }

                &__preview img {
                    transform: scale(1.1);
                }
            }
        }
    }

    &__preview {
        img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
            transition: all 0.35s ease-in-out;
        }

        &-image {
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 10px 0 0 10px;
        }
    }

    &__content {
        padding: 40px 30px 30px 0;

        @media (max-width: 767px) {
            padding: 15px;
        }

        transition: all 0.35s ease-in-out;
    }

    &__title {
        font-size: 20px;
        color: #000;
        font-weight: bold;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 25px;
        transition: all 0.35s ease-in-out;
    }

    &__desc {
        font-size: 16px;
        color: #666;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: all 0.35s ease-in-out;
    }

    &__footer {
        padding-top: 20px;
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e5e5e5;
        transition: all 0.35s ease-in-out;
    }

    &__time {
        font-size: 16px;
        color: #666;
        transition: all 0.35s ease-in-out;
    }

    &__read-more {
        font-size: 16px;
        color: var(--rootColor);
        font-weight: bold;
        transition: all 0.35s ease-in-out;

        &:hover {
            margin-right: 30px;
        }

    }
}
</style>