<template>
	<scroll-view
		ref="scrollRef"
		scroll-y="true"
		class="scroll-Y"
		:refresher-enabled="false"
		:show-scrollbar="false"
		@scrolltolower="scrolltolower"
	>
		<!-- 主体 -->
		<view class="content">
			<itemVue :item="item" v-for="item 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>
		</view>
	</scroll-view>
</template>

<script setup>
	import { ref, reactive} from 'vue';
	import { queryTraExamPapersPage } from '@/api/testingHall.js';
	import itemVue from './content-item.vue';
	const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
	const limit = 20;
	const total = ref(-1);
	const page = ref(0);
	const data_list = reactive([]);
	const scrollRef = ref(null);
	const props = defineProps({
		index: {
			type: Number,
			default: 0
		}
	});

	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(() => {
			let params = {
				papersName: searchText,
				page: page.value,
				limit: limit
			};
			if (props.index === 1) {
				params.examStat = 'Y';
			} else if (props.index === 2) {
				params.examStat = 'N';
			}
			queryTraExamPapersPage(params)
				.then((res) => {
					total.value = res.total;
					data_list.push(...res.body);
				})
				.catch((res) => {})
				.finally(() => {
					if (data_list.length >= total.value) {
						status.value = 'nomore';
					} else {
						status.value = 'loadmore';
					}
					console.log(status.value);
				});
		}, 200);
	};
	const scrolltolower = () => {
		getData();
	};
	const search = (value) => {
		console.log('searchvalue', value);
		total.value = -1;
		getData('first', value);
	};
	defineExpose({
		getData,
		search
	});
</script>

<style scoped lang="scss">
	.scroll-Y {
		height: calc(100vh - var(--status-bar-height) - 70rpx - 78rpx - 40rpx - 88rpx);
		position: relative;
		overflow: hidden;
		background-color: #f1f5fa;

		.content {
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;
			padding-top: 22rpx;
			padding: 0 22rpx;
			box-sizing: border-box;
		}
	}
</style>
