<template>
    <app-view class="share-news">
        <template #header>
            <app-navbar title="铁合金掌上行" :show-back-button="false" />
        </template>
        <section class="share-news__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>
        <div class="share-news__footer">
            <Button type="primary" round block @click="router.replace({ name: 'Home' })">进入首页</Button>
        </div>
    </app-view>
</template>

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

const { router, getQueryString } = useNavigation()
const htmlRef = shallowRef<HTMLElement>()

const { data } = useRequest(queryNewContents, {
    params: {
        ids: getQueryString('id')
    },
    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);
        }
    }
})

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

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