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

    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)

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

    async function addViewCount(id: string) {
        newsApi.addViewCount({ id })
    }

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

<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 flex-center">
                        <image class="mr-1 w-30 h-26" src="/static/images/news/views.png" />
                        <view class="flex-center text-24 lh-24rpx">{{ detail?.viewCount }}</view>
                    </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></video>
                </view>
                <view v-show="content.type === 'PARAGRAPH'" style="text-indent: 2rem">
                    <text>{{ content.content }}</text>
                </view>
                <view v-show="content.type === 'IMAGE'">
                    <image 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>
