<template>
    <app-view class="new-details">
        <template #header>
            <app-navbar title="资讯详情" />
        </template>
        <section class="new-details__container" v-if="details">
            <h1>{{ details.title }}</h1>
            <h4>
                <span>{{ details.author }}</span>
                <span>{{ details.creaedate }}</span>
            </h4>
            <p v-html="formatHtmlString(details.context)"></p>
        </section>
        <Divider>热门资讯</Divider>
        <CellGroup class="new-details__list">
            <template v-for="(item, index) in newsList" :key="index">
                <Cell class="article-item" title-class="article-item__title" value-class="article-item__time"
                    :title="item.title" :value="formatDate(item.creaedate, 'MM/DD')"
                    :to="{ name: 'news-details', query: { t: new Date().getTime() }, params: { item: JSON.stringify(item), columnid } }"
                    replace />
            </template>
        </CellGroup>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { CellGroup, Cell, Divider } from 'vant'
import { formatDate } from '@/filters'
import { useNavigation } from '@/hooks/navigation'
import { formatHtmlString } from '@/filters'
import { querySiteColumnDetail } from '@/services/api/news'

const { route } = useNavigation()
const { item, columnid } = route.params
const details = shallowRef<Model.SiteColumnDetailRsp>()
const newsList = shallowRef<Model.SiteColumnDetailRsp[]>([])

if (item) {
    details.value = JSON.parse(item.toString())
}

querySiteColumnDetail({
    data: {
        columnid: columnid ? Number(columnid) : undefined,
        page: 1,
        pagesize: 10,
    },
    success: (res) => {
        newsList.value = res.data.filter((e) => e.id !== details.value?.id)
    }
})
</script>

<style lang="less">
@import './index.less';
</style>