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

    const model = reactive({
        params: {
            pageNo: 1,
            pageSize: 10,
            classify: null,
        }, // 分页参数
        hasMore: true, // 是否还有更多数据
        loading: false, // 是否正在加载
        time: '',
    })
    const videoList = ref([])

    function getVideoList(params) {
        if (model.loading) 
return
        model.loading = true
        videoApi.getList(params).then((res) => {
            if (res.records.length > 0) {
                const { records } = res

                let scale: any = 0
                for (let i = 0; i < records.length; i++) {
                    if (records[i].width) {
                        scale = (340 / records[i].width).toFixed(1)
                        records[i].videoWidth = 340
                        records[i].videoHeight = Math.floor(records[i].height * scale)
                    } else {
                        records[i].videoWidth = 0
                        records[i].videoHeight = 0
                    }
                }

                if (model.params.pageNo === 1) {
                    videoList.value = records
                } else {
                    videoList.value = [...videoList.value, ...records]
                }
                model.hasMore = records.length === model.params.pageSize
                model.params.pageNo++
            } else {
                model.hasMore = false
            }
        })
        model.loading = false
    }

    function resetData() {
        model.params.pageNo = 1
        model.hasMore = true
        model.loading = false
        videoList.value = []
    }

    // 视频暂停事件处理
    function handleVideoPause(id) {
        console.log(`视频${id}暂停`)
    }

    function handleFullscreenChange(e: any, id) {
        console.log(`视频${id}全屏状态改变`)
        if (!e.detail.fullScreen) {
            const videoContext = uni.createVideoContext(`video${id}`)
            videoContext.pause()
        }
    }

    // 获取视频时长
    function handleMetadataLoaded(e: any) {
        model.time = e.target.duration
    }
    // 解决轮播视频切换时，上一个视频不停止播放的问题
    function handleVideoPlay(id) {
        videoList.value.forEach((_, index) => {
            if (index !== id) {
                const videoContext = uni.createVideoContext(`video${index}`)
                videoContext.pause()
            }
        })
    }

    function toPlay(id) {
        // uni.navigateTo({
        //     url: `/pages/knowledgeVideo/detail?id=${id}`,
        // })

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

        // 增加播放次数
        addViewCount(id)
    }

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

    onReachBottom(() => {
        if (model.hasMore) {
            getVideoList(model.params)
        }
    })

    onLoad((options) => {
        model.params.classify = options.classify
        resetData()
        getVideoList(model.params)
    })
</script>

<template>
    <view class="bg-#E6F5E8 pt-3" style="font-family: '思源黑体'; font-weight: 400">
        <fui-waterfall leftGap="20" rightGap="20" topGap="20">
            <fui-waterfall-item
                v-for="(item, index) in videoList"
                :key="index"
                :src="item.thumbnailPath"
                :imgWidth="item.videoWidth"
                :imgHeight="item.videoHeight"
                :videoDuration="item.totalTime"
                @click="toPlay(item.id)"
            >
                <view class="flex flex-col justify-between pl-2 pr-2 pb-2">
                    <view class="text-25 mt-1 mb-2">{{ item.title }}</view>
                    <view class="flex justify-between text-25 color-#686868">
                        <view class="mr-1 flex-center">
                            <image class="mt-0.2 mr-1 w-30 h-26" src="/static/images/news/views.png" />
                            <view class="flex-center text-24 lh-24rpx">{{ item.viewCount }}</view>
                        </view>
                        <text>{{ dayjs(item.publishDate).format('MM-DD') }}</text>
                    </view>
                </view>
                <video
                    :id="`video${item.id}`"
                    :src="item.url"
                    :poster="item.thumbnailPath"
                    :title="item.title"
                    :controls="true"
                    style="width: 654rpx; height: 358rpx"
                    :autoplay="false"
                    :muted="false"
                    :loop="true"
                    :show-play-btn="true"
                    :show-center-play-btn="true"
                    :enable-progress-gesture="true"
                    :show-progress="true"
                    :direction="0"
                    object-fit="contain"
                    @loadedmetadata="handleMetadataLoaded"
                    @play="handleVideoPlay(item.id)"
                    @pause="handleVideoPause(item.id)"
                    @fullscreenchange="handleFullscreenChange($event, item.id)"
                    class="!hidden"
                ></video>
            </fui-waterfall-item>
        </fui-waterfall>
    </view>
</template>
