<script setup>
	/**
	 * 收藏夹下的视频
	 */
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js'
	// 视频菜单
	import videoMenu from '@/components/index/videoMenu.vue';

	// 用户id
	const userId = ref('')
	// 已选择的视频ids
	const collectId = reactive([])
	// 收藏标题
	const collectName = ref('')
	// 列表数据
	const list = reactive({
		data: [],
		pageSize: 12,
		pageNum: 1,
		total: 0,
	})

	onLoad((option) => {
		// 被举报的用户id
		if (option.userId) userId.value = option.userId
		// 已选择的视频id
		if (option.collectId) collectId.value = option.collectId
		if (option.collectName) {
			collectName.value = option.collectName
			uni.setNavigationBarTitle({
				title: collectName.value
			})
		}
		// 获取列表
		getList()
	})

	onPullDownRefresh(() => {
		// 刷新列表
		refreshList()
	})

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})

	// 刷新列表
	function refreshList() {
		list.pageNum = 1
		list.total = 0
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (list.data.length >= list.rows) return
		list.pageNum++
		getList()
	}

	// 获取列表
	function getList() {
		// 
		api.video.getFavoriteVideo({
			query: {
				// 收藏夹id
				folderId: collectId.value,
				pageSize: list.pageSize,
				pageNum: list.pageNum,
			},
			
		}).then(rs => {
			if (rs.code == 200) {
				if (list.pageNum == 1) list.data.length = []
				list.data.push(...rs.rows.map(item => {
					item.format_videoUrl = util.format_url(item.videoUrl, 'video')
					item.format_imageUrl = util.format_url(item.imageUrl, 'img')
					return item
				}))
				list.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<view class="product mt30">
			<view class="title plr30 c333 f32">
				<text>作品</text>
				<text class="ml10">{{list.total}}</text>
			</view>

			<view class="main mt20">
				<!-- 视频菜单 -->
				<videoMenu :list="list.data" />
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 产品
	.product {
		.list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-gap: 5rpx;

			.item {
				height: 360rpx;
			}

			.window {
				background-color: rgba(0, 0, 0, .1);
			}

			// 播放量
			.amount {
				.txt {
					opacity: .5;
				}
			}
		}
	}
</style>