<template>
	<van-sticky>
		<van-nav-bar title="考试结果" />
	</van-sticky>
	<van-overlay :show="overlayloading">
		<div class="wrapper">
			<van-loading color="#0094ff"> 加载中... </van-loading>
		</div>
	</van-overlay>

	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多" @load="onLoad" class="listDiv">
			<van-cell v-for="(result, index) in list" :key="index">
				<template #title>
					分数: {{ result.totalScore }}
				</template>
				<template #label>
					<!-- <div class="labeldiv">
            {{ result.result == 1 ? "通过" : "未通过" }}
          </div> -->
					<div class="labeldiv">{{ result.questionName }}</div>
					<!-- <div class="labeldiv">合格分数: {{ result.qualifiedScore }}</div> -->
					<div class="labeldiv">考试时间: {{ result.addTime }} </div>
				</template>
			</van-cell>
		</van-list>
	</van-pull-refresh>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		getCurrentInstance,
		ref
	} from "vue";
	import {
		showConfirmDialog,
		showSuccessToast,
		showFailToast,
		showDialog
	} from 'vant';
	import {
		useRoute
	} from "vue-router";
	import "@/assets/custom.less";
	const {
		proxy
	} = getCurrentInstance()
	const route = useRoute();

	const overlayloading = ref(false);

	let userId = route.query.userId;
	if (userId == '' || userId == 'undefined') userId = localStorage.getItem('userId')
	const pageSize = ref(10);
	const pageNo = ref(1);

	const list = ref([]);
	const loading = ref(false);
	const finished = ref(false);
	const refreshing = ref(false);

	const total = ref(0)
	const resultData = ref([])
	const queryFetch = async () => {
		const url = '/sgsafe/ExamHead/queryMYfinNotListH5'
		const fetchData = ref({
			userId: userId,
      status1:'1'
		})
		const param = {
			page: pageNo.value,
			rows: pageSize.value,
			params: JSON.stringify(fetchData.value)
		};
		try {
			const res = await proxy.$axios.post(url, param);
			if (res.data.code === 0) {
				total.value = res.data.data.total
				resultData.value = res.data.data.records
        console.log(resultData.value);
			} else {
				finished.value = true;
				showFailToast("获取考试结果失败");
			}
		} catch (error) {
			showFailToast("请求出错：" + error);
		}
	};
	const onLoad = async () => {
		overlayloading.value = true;
		if (refreshing.value) {
			list.length = 0;
			pageNo.value = 1;
			refreshing.value = false;
		}
		try {
			await queryFetch();
			if (pageSize.value * pageNo.value < total.value) {
				list.value = [...list.value, ...resultData.value]
				pageNo.value++;
			} else {
				list.value = [...list.value, ...resultData.value]
				finished.value = true;
			}
			loading.value = false;
			overlayloading.value = false;
		} catch (error) {
			console.log(error);
			finished.value = true;
			showFailToast("获取失败");
		} finally {
			loading.value = false;
		}
	};
	const onRefresh = () => {
		finished.value = false;

		// 重新加载数据
		// 将 loading 设置为 true，表示处于加载状态
		loading.value = true;
		onLoad();
	};
</script>

<style scoped>
	.labeldiv {
		font-size: 14px;
	}

	/* 遮罩 */
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.van-overlay {
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>