<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>
	import itemVue from './item.vue';

	import { setPageCache } from '@/common/common';
	import common from '@/common/common';
	import { ref, reactive, onMounted, nextTick } from 'vue';
	import { queryPracticeRecordPaging, queryPracticeHis, queryCrsExamRecordPaging } from '@/api/courseRecord.js';
	import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
	const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
	const limit = 15;
	const total = ref(-1);
	const page = ref(0);
	const data_list = reactive([]);
	const props = defineProps({});
	
	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(() => {
			queryCrsExamRecordPaging({
				page: page.value,
				limit: limit
			})
				.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 getStatusClass = (isFinish) => {
		// 00进行中、01已完成、02已超时
		if (isFinish === '00') return 'in_progress';
		if (isFinish === '01') return 'completed';
		return 'expired';
	};
	
	const scrolltolower = (item) => {
		getData();
	};
	const search = (value) => {
		total.value = -1;
		getData('first', value);
	};
	defineExpose({
		getData,
		search
	});
</script>

<style scoped lang="scss">
	.scroll_div {
		background-color: #f1f5fa;
	}
	
	.scroll-Y {
		height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
	}
</style>
