<template>
    <app-view class="news-details">
        <template #header>
            <app-navbar title="资讯详情">
                <template #right>
                    <div class="news-details__share" :data-clipboard-text="getNewsShareUrl(newsId)" round v-copy="onCopy">
                        <Icon name="share" size=".32rem" />
                    </div>
                </template>
            </app-navbar>
        </template>
        <section class="news-details__container" v-if="data">
            <h1>{{ data.title }}</h1>
            <h4>
                <img :src="getFileUrl(data.srclogo)" v-if="data.srclogo" />
                <span @click="openUrl(data?.srcurl)" style="color:dodgerblue" v-if="data.srcname">{{ data.srcname }}</span>
                <span>{{ formatDate(data.creaedate, 'YYYY-MM-DD') }}</span>
                <span style="margin-left: auto;">阅览数：{{ data.hits }}</span>
            </h4>
            <p ref="htmlRef" v-html="formatHtmlString(data.context)"></p>
            <p style="color: #999;margin-top: .24rem;font-size: .24rem;" v-if="data.author">作者：{{ data.author }}</p>
        </section>
        <Divider>热门资讯</Divider>
        <CellGroup class="news-details__list">
            <template v-for="(item, index) in dataList" :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: { id: item.id, t: new Date().getTime() } }" replace />
            </template>
        </CellGroup>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { CellGroup, Cell, Divider, showImagePreview, showFailToast, showToast, Icon } from 'vant'
import { formatDate, formatHtmlString, getImageSrc, getFileUrl, getNewsShareUrl } from '@/filters'
import { useNavigation } from '@/hooks/navigation'
import { useRequest } from '@/hooks/request'
import { queryNewTitles, queryNewContents } from '@/services/api/news'
import plus from '@/utils/h5plus'

const { getQueryString } = useNavigation()
const htmlRef = shallowRef<HTMLElement>()
const newsId = getQueryString('id')

const { dataList, run } = useRequest(queryNewTitles, {
    manual: true,
    params: {
        pagesize: 10,
    },
    onSuccess: (res) => {
        dataList.value = res.data.filter((e) => e.id.toString() !== newsId)
    }
})

const { data } = useRequest(queryNewContents, {
    params: {
        ids: newsId
    },
    onSuccess: (res) => {
        if (res.data.length) {
            const details = res.data[0]
            data.value = details

            setTimeout(() => {
                const el = htmlRef.value
                el?.querySelectorAll('img').forEach((e, i) => {
                    e.onclick = () => {
                        showImagePreview({
                            images: getImageSrc(details.context),
                            startPosition: i,
                        })
                    }
                })
            }, 500);

            run({ columnid: details.columnid })
        } else {
            run()
        }
    }
})

// 跳转链接
const openUrl = (url?: string) => {
    if (url) {
        plus.openURL(url)
    }
}

const onCopy = (status: boolean) => {
    if (status) {
        showToast({
            message: '已复制，快去粘贴吧~',
            position: 'bottom',
        })
    } else {
        showFailToast('复制失败')
    }
}
</script>

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