<template>
    <view class="p-3" style="font-family: '思源黑体'; font-weight: 400;">
        <view class="flex flex-col justify-between mt-1 mb-6">
            <view class="text-35 color-#333333 text-center mb-3">{{ detail?.title }}</view>
            <view class="flex flex-col text-25 color-#686868">
                <view class="flex flex-row justify-between">
                    <text>{{ detail?.editor }}</text>
                    <text class="ml-5">{{ detail?.source }}</text>
                </view>
                <view class="flex flex-row justify-between">
                    <text>{{
                        !isNull(detail) ? '时间: ' + dayjs(detail?.publishDate).format('YYYY年MM月DD日') : ''
                    }}</text>
                    <view class="mr-1">
                        <img v-show="detail?.viewCount" class="mr-1" src="/src/static/images/news/views.png" />
                        <text>{{ detail?.viewCount }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="w-full text-28">
            <view v-for="(content, index) in detail?.contentBlocks" :key="index" class="mb-1">
                <view v-show="content.type === 'VIDEO'">
                    <video class="w-full" :src="content.url ? content.url : ''" controls />
                </view>
                <view v-show="content.type === 'PARAGRAPH'" style="text-indent: 2rem;">
                    <text>{{ content.content }}</text>
                </view>
                <view v-show="content.type === 'IMAGE'">
                    <img class="w-full" :src="content.url ? content.url : ''" />
                    <text v-show="content.caption" class="w-full text-25 color-#686868 text-center" style="display: inline-block;">{{ content.caption }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import * as newsApi from '@/api/model/news'
    import { isNull } from '@/utils/is'
    import dayjs from 'dayjs'

    interface Detail {
        id: number
        title: string
        editor: string
        source: string
        publishDate: string
        contentBlocks: ContentBlock[]
        viewCount: number
    }

    interface ContentBlock {
        type: 'VIDEO' | 'PARAGRAPH' | 'IMAGE'
        url?: string
        content?: string
        caption: string
    }

    const detail = ref<Detail | null>(null)

    const getInfo = async (id: string) => {
        await newsApi.getDetail({ id }).then((res) => {
            detail.value = res
            addViewCount(id)
        })
    }

    const addViewCount = async (id: string) => {
        newsApi.addViewCount({ id })
    }

     onLoad(async (options) => {
       await getInfo(options.id)
    })
</script>
