<template>
    <view class="p-3" style="font-family: '思源黑体'; font-weight: 400">
        <view class="w-full text-28">
            <view class="mb-1">
                <video class="w-full" :src="!isNull(detail) ? detail?.url : ''" controls loop />
            </view>
        </view>
        <view class="flex flex-col justify-between mt-1 mb-6">
            <view class="text-35 color-#333333 mb-3">{{ detail?.title }}</view>
            <view class="flex flex-col text-25 color-#686868">
                <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>
</template>

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

    const detail = ref<any>()

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

            const videoContext = uni.createVideoContext(`video${id}`)
            videoContext.requestFullScreen()
            videoContext.play()
        })
    }

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

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