<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-grid :column-num="3">
		<van-grid-item >
			<div class="numStyle">{{ questionName }}</div>
			<div class="descStyle">今日考试名称</div>
		</van-grid-item>

		<van-grid-item @click="goJieguo">
			<div class="numStyle">{{ questionName2 }} </div>
			<div class="descStyle">已过期考试</div>
		</van-grid-item>

		<van-grid-item @click="goJieguo2">
			<div class="numStyle">{{ questionName1 }}</div>
			<div class="descStyle">已考试</div>
		</van-grid-item>
	</van-grid>
	<!-- </van-sticky> -->
	<!-- </div> -->
	<van-row justify="center" class="cont">
		<van-col span="4"></van-col>
    <van-col span="16" class="cont-circle">
      <van-circle
        @click="goToQuiz()"
        v-model:current-rate="currentRate"
        :rate="rate"
        :speed="speed"
        :text="text"
        :color="gradientColor"
        layer-color="#ebedf0"
        size="120px"
      />


    </van-col>
		<van-col span="4"></van-col>
	</van-row>
</template>

<script setup>
	import {
		onMounted,
		ref,
		computed,
		getCurrentInstance
	} from "vue";
	import {
		showConfirmDialog,
		showSuccessToast,
		showFailToast,
		showDialog
	} from 'vant';

	import {
		useRouter
	} from "vue-router";
	const {
		proxy
	} = getCurrentInstance()
	const router = useRouter();
	const times = ref(0);
	const totaltimes = ref(0);
	const score = ref(0);
	const total = ref(0);
	const overlayloading = ref(false);
	const currentRate = ref(0);
	const rate = ref(0);
	const answerable = ref(false);
  const currentTime = ref('');
  let timer = null;
  const updateTime = () => {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');

    currentTime.value = `${hours}:${minutes}:${seconds}`;
  };
	var userId = localStorage.getItem('userId')
	console.log('index的userId：' + userId)
	if (userId == '1' || userId == '' || userId == 'undefined') userId = '267633C4380511B2B37DE5E6DC503AC7'
	const today = new Date();
	const year = today.getFullYear();
	const month = String(today.getMonth() + 1).padStart(2, '0');
	const day = String(today.getDate()).padStart(2, '0');
	const todayStr = `${year}-${month}-${day}`;

	const speed = ref(100);
	const text = "开始答题";


	const gradientColor = {
		"0%": "#3fecff",
		"100%": "#6149f6",
	};

	const courseId = ref(0);

	const goToQuiz = async () => {
    if (answerable.value == false){
      showDialog({
        message: '无需考试',
      })
      return
    }
			courseId.value = dataObj.value.headId;
		//再跳转答题页
		router.push({
			path: "/datistart",
			query: {
				courseId: courseId.value,
				userId: userId,
				todayStr: todayStr,
			},
		});
	};

	//////////////////////////////////////////////////////////我的答题分数
	const tableData = ref([]);
  const dataObj = ref({});
  const questionName=ref('');
  const questionName1=ref(0);
  const questionName2=ref(0);

	const getMyDefaultCourse = async () => {
		try {
			overlayloading.value = true;
			var url = '/sgsafe/ExamHead/queryCheckH5'
			var param = {}
			try {
				const res = await proxy.$axios.post(url, param);
				if (res.data.code === 0) {
          dataObj.value = res.data.data
          console.log(dataObj.value);

				} else {
					console.log('操作失败!' + res.data.msg);
				}
			} catch (error) {
				console.log('请求出错:', tableData);
			}
			const data = tableData.value[0] || {
				examCounts: '0',
				totalScore: '0'
			};
      questionName1.value= dataObj.value.finCount
      questionName2.value= dataObj.value.finCountNot
      if (dataObj.value.id=='') {
        dataObj.value.questionName = '无'
        questionName.value=dataObj.value.questionName

        currentRate.value = 0;
        rate.value = 0;
        answerable.value = false;
      }else {
        questionName.value=dataObj.value.questionName
        answerable.value = true;
        currentRate.value = 100;
        rate.value = 100;
      }
			overlayloading.value = false;
		} catch (error) {
			console.error("出错：", error);
			overlayloading.value = false;
			alert("获取失败，请稍后重试");
		}
	};

	const goJieguo = () => {
		router.push({
			path: "/jieguo1",
			query: {
				userId: userId
			},
		});
	};
  const goJieguo2 = () => {
    router.push({
      path: "/jieguo2",
      query: {
        userId: userId
      },
    });
  };
	const goPaiming = () => {
		router.push({
			path: "/paiming",
			query: {
				userId: userId
			},
		});
	};

	// 如果为无权限用户，进入unauth界面
	// 已登录且无toPath，进入首页
	// 已登录，有需要跳转的详情，进入详情页

	onMounted(() => {
		getMyDefaultCourse();
    updateTime(); // 初始化时间
    timer = setInterval(updateTime, 1000);
	});
</script>

<style scoped>
	.descStyle {
		font-size: 12px;
		color: #323232;
	}

	.numStyle {
		font-size: 20px;
		font-weight: bold;
		color: #007aff;
	}

	.cont {
		margin-top: 100px;
	}

	.cont-circle {
		display: flex;
		justify-content: center;
	}

	.limit-message {
		color: #ff0000;
		font-size: 15px;
		text-align: left;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		/* padding: 0 8px; */
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		padding-bottom: 10px;
	}

	.buttons {
		display: flex;
		flex-direction: row;
		width: 95%;
		justify-content: space-between;
		/* 使按钮在水平方向上两端对齐 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.custom-button {
		font-size: 14px;
		/* 设置按钮字体大小为14px */
	}

	.buttons .van-button {
		flex: 1;
		/* 使按钮可以收缩或扩展以填充可用空间 */
		margin: 0 10px;
		/* 按钮之间的间距 */
		width: auto;
		/* 让按钮宽度自适应内容 */
		/* max-width: 140px; 设置按钮的最大宽度 */
		height: 38px;
	}

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

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

  .current-time {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    text-align: center;
  }
</style>