<template>
	<view class="scroll_div">
		<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
			<itemVue :item="item"  v-for="(item, index) in data_list"></itemVue>
			<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
			<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
		</scroll-view>
	</view>
</template>
<script setup>
	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
	const limit = 20;
	const total = ref(-1);
	const page = ref(0);
	const data_list = reactive([]);
	import common from '@/common/common';
	import { ref, reactive, onMounted, nextTick } from 'vue';
	import itemVue from './content-item.vue';
	import { queryAllTraTaskInfoByUserId } from '@/api/learningTasks.js';
	const props = defineProps({
		state: {
			type: String,
			required: true
		}
	});

	const getData = (from = '', searchText = '') => {
		if (from == 'first') {
			if (total.value !== -1) {
				return;
			}
			status.value = 'loading';
			total.value = -1;
			page.value = 1;
			data_list.length = 0;
		} else {
			if (status.value !== 'loadmore' && status.value !== '') return;
			status.value = 'loading';
			page.value++;
		}
		setTimeout(() => {
			queryAllTraTaskInfoByUserId({
				state: props.state,
				page: page.value,
				limit: limit,
				taskName: searchText
			})
				.then((res) => {
					total.value = res.total;
					data_list.push(...res.body);
				})
				.finally(() => {
					if (data_list.length >= total.value) {
						status.value = 'nomore';
					} else {
						status.value = 'loadmore';
					}
				});
		}, 200);
	};
	
	const scrolltolower = (item) => {
		getData();
	};
	const search = (value) => {
		total.value = -1;
		console.log('value', value);
		getData('first', value);
	};
	defineExpose({
		getData,
		search
	});
</script>

<style scoped lang="scss">
	.scroll_div {
		background-color: #f1f5fa;
		padding: 22rpx;
	}
	
	.scroll-Y {
		height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx - 88rpx - 20rpx - 30rpx);
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 12rpx 0 22rpx;
		box-sizing: border-box;
	}
</style>
