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

    const detail = ref<any>()

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

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

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

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

<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 :direction="0"></video>
            </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 flex-center" v-show="detail?.viewCount">
                        <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>
</template>
