<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="title">
						{{ item.title }}
					</view>
					<view class="record">看到{{ item.courseDetailsName }}</view>
					<view class="btm">
						<view class="num">
							<view v-if="item.courseDetailsCount">更新{{ item.courseDetailsCount }}</view>
						</view>
						<view class="btn">继续观看</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

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

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

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

// 获取数据
async function selectByUserIdAjax() {
	try {
		const res = await selectByUserId({
			page: listData.page,
			limit: listData.size,
			classify: type.value
		});
		console.log(res);
		if (res.code === 0) {
			listData.list = res.data.records;
		}
	} catch (error) {
		console.log(error);
	}
}

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: 28upx 0;
		display: flex;
		.cover {
			width: 150upx;
			height: 200upx;
			margin-right: 28upx;
			.img {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 20upx;
			}
		}
		.info {
			display: flex;
			flex-direction: column;
			gap: 4px;
			.title {
				font-size: 32upx;
				font-weight: bold;
			}
			.record {
				color: $uni-zj-color-primary;
			}
			.btm {
				display: flex;
				justify-content: space-between;
				.btn {
					padding: 4upx 12upx;
					color: #fff;
					background: $uni-zj-color-primary;
				}
			}
		}
	}
}
</style>
