<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="item in listData.list" :key="item.id">
				<view class="cover">
					<image class="img" :src="item.titleImg" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="top">
						<view class="title">
							{{ item.title }}
						</view>
						<view class="record">看到{{ item.courseDetailsName }}</view>
					</view>
					<view class="btm">
						<view class="num">更新{{ item.courseDetailsCount }}集</view>
						<view class="btn">继续观看</view>
					</view>
				</view>
			</view>
		</view>
		<emprty-card v-if="!listData.list.length && listData.status == 'nomore'" />
		<up-loadmore :status="listData.status" />
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';

import { selectByUserId } from '@/api/me/me.js';

const type = ref(1);
const typeList = ref([
	{
		type: 1,
		label: '我的追剧'
	},
	{
		type: 2,
		label: '我的喜欢'
	},
	{
		type: 3,
		label: '最近观看'
	}
]);

const listData = reactive({
	list: [],
	page: 1,
	size: 10,
	status: 'loading'
});

// 获取数据
async function selectByUserIdAjax() {
	try {
		const res = await selectByUserId({
			page: listData.page,
			limit: listData.size,
			classify: type.value
		});
		if (listData.page == 1) {
			listData.list = res.records;
		} else {
			listData.list.push(...res.records);
		}
		if (res.currPage >= res.totalPage) {
			listData.status = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		uni.stopPullDownRefresh();
	}, 500);
}

// 监听下拉结束
onPullDownRefresh(() => {
	listData.page = 1;
	listData.status = 'loading';
	selectByUserIdAjax();
});

onReachBottom(() => {
	listData.page++;
	selectByUserIdAjax();
});

onLoad((e) => {
	if (e.type) {
		type.value = e.type;
		uni.setNavigationBarTitle({
			title: typeList.value.find((item) => item.type == type.value).label
		});
	}
	selectByUserIdAjax();
});
</script>

<style scoped lang="scss">
.container {
	padding: 28upx;
	color: #333;
	font-size: 29upx;
}
.list {
	.item {
		padding-bottom: 28upx;
		display: flex;
		.cover {
			width: 150upx;
			height: 200upx;
			margin-right: 28upx;
			.img {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 20upx;
			}
		}
		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.top {
				.title {
					font-size: 32upx;
					font-weight: bold;
				}
				.record {
					color: $uni-zj-color-primary;
				}
			}
			.btm {
				display: flex;
				justify-content: space-between;
				padding-top: 28upx;
				.num {
					color: #999;
				}
				.btn {
					padding: 8upx 12upx;
					color: #fff;
					background: $uni-zj-color-primary;
					border-radius: 10upx;
				}
			}
		}
	}
}
</style>
