<template>
	<view class="scroll_div">
		<scroll-view :scroll-y="true" class="scroll-Y " :show-scrollbar="false" @scrolltolower="scrolltolower">
			<view class="content" v-for="(item, index) in data_list">
				<subject :item="item" mode="mistake" :isPreview="true" :clearResult="false"></subject>
			</view>
			<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 = 15;
	const total = ref(-1);
	const page = ref(0);
	const data_list = reactive([]);
	import { ref, reactive, onMounted, nextTick } from 'vue';
	import { queryTraCrsBbsInfoByCrsId } from '@/api/courseDetail.js';
	import { queryTraMistakesCollectionPaging } from '@/api/wrongQuestionRecord.js';
	import Subject from '@/components/examination/subject.vue';
	const getData = (from = '') => {
		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(() => {
			queryTraMistakesCollectionPaging({
				isCorrect: 'N',
				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 = (index) => {
		const remainder = index % 3;
		if (remainder === 0) return 'in_progress';
		if (remainder === 1) return 'completed';
		return 'expired';
	};
	const scrolltolower = (item) => {
		getData();
	};
	defineExpose({
		getData
	});
</script>

<style scoped lang="scss">
	$bg-margin-left: 30rpx;
	.content {
		position: relative;
		margin: 32rpx $bg-margin-left;
		border-radius: 16rpx;
		padding: 34rpx 30rpx 34rpx 36rpx;
		background-color: #fff;
		// min-height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx - 156rpx);
	}
	.scroll-Y {
		background-color: #f1f5fa;
		min-height: calc(100vh - var(--status-bar-height) - 78rpx - 88rpx - 156rpx);
	}
</style>
