<template>
	<view class="">
		<van-toast id="van-toast" />
		<view class="list-con">
			<van-empty description="暂无数据" v-if="dataList.length === 0" />
			<scroll-view :scroll-top="0" scroll-y="true" class="scroll-box" @scrolltolower="lower"
				v-if="dataList.length > 0">
				<view v-for="(item, index) in dataList" :key="index" class="list-item flex flex_between_center"
					@click="jumpPage(item.Id)">
					<image class="left" :src="item.Img"></image>
					<view class="right">
						<view class="one_line title">{{ item.Title }}</view>
						<view class="one_line digest">{{ item.Digest }}</view>
					</view>
				</view>
				<Loadmore :state="pageState" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		getCurrentInstance,
		onMounted
	} from "vue";
	import {
		getLearningGardenList
	} from "../../api/index";
	import Loadmore from "../../components/loadmore.vue";
	export default {
		components: {
			Loadmore,
		},
		setup(props, context) {
			let data = reactive({
				pageTitle: "日语学习园地",
				msg: {
					PageIndex: 1,
					PageSize: 10,
					rowsPerPage: 10,
					Title: "",
				},
				dataList: [],
				pageState: "more",
				pageCount: 0,
				timer: null, //防抖
			});
			let methods = {
				back() {
					uni.navigateBack();
				},
				jumpPage(id) {
					uni.navigateTo({
						url: "/pages/learningGarden/learningGardenDetails?Id=" + id,
					});
				},
				async getList() {
					let res = await getLearningGardenList(data.msg);
					if (res) {
						if (data.timer) data.timer = null;
						if (data.msg.PageIndex === 1) {
							data.dataList = res.Data.PageData;
						} else {
							data.dataList = [...data.dataList, ...res.Data.PageData];
						}
						data.pageCount = res.Data.PageCount;
						if (data.msg.PageIndex >= res.Data.PageCount) {
							data.pageState = "none";
						} else {
							data.pageState = "more";
						}
					}
				},
				lower(e) {
					if (data.msg.PageIndex < data.pageCount) {
						data.pageState = "loading";
						if (data.timer) clearTimeout(data.timer);
						data.timer = setTimeout(() => {
							data.msg.PageIndex++;
							that.getList();
						}, 1000);
					} else {
						data.pageState = "none";
					}
				},
			};
			onMounted(() => {
				that.getList();
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
	};
</script>

<style scoped>
	.list-con {
		height: calc(100vh - 20rpx);
		box-sizing: border-box;
		padding: 15rpx 30rpx;
		margin-top: 10rpx;
	}

	.scroll-box {
		height: 100%;
		width: 100%;
	}

	.list-item {
		margin: 20rpx 0;
	}

	.left {
		width: 220rpx;
		height: 120rpx;
		border-radius: 20rpx;
		box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
	}

	.right {
		width: 440rpx;
		height: 120rpx;
	}

	.right .title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
		line-height: 70rpx;
	}

	.right .digest {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 30rpx;
	}
</style>
