<template>
	<view>
		<van-nav-bar fixed>
			<template #left>
				<van-icon name="cross" style="font-size: 32rpx; color: #111" @click="backToIndex" />
			</template>
			<template #title>
				<view style="
            font-size: 32rpx;
            color: #111;
            font-family: PingFang SC;
            font-weight: 800;
          ">考试须知</view>
			</template>
		</van-nav-bar>
		<view class="answer-Notice" v-if="dataList">
			<view style="width:100%;text-align:center;">
				<img style="width:169px;height:134px;"
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/examNotice.png"
					alt="" />
			</view>
			<view class="examContent">
				<!-- 考试已开始 -->
				<template v-if="ExamStatus==2">
					<template v-if="!isShowLate">
						<view>1.本场考试满分{{dataList.Publish.ExamScore}}分</view>
						<view style="margin:18rpx 0">
							2.考试时长{{dataList.Publish.ExamTimes}}分钟，开考后{{dataList.Publish.SubmitTimes}}分钟内禁止交卷</view>
						<view v-if="dataList.Publish.ExamNotice" style="display:flex;">
							3.<view v-html="dataList.Publish.ExamNotice"></view>
						</view>
					</template>
					<template v-else>
						<view style="text-align: center;">对不起，您本次考试已经迟到，{{dataList.Publish.EnterTimes}}分钟后不能参加考试</view>
					</template>
				</template>
				<template v-if="ExamStatus==1">
					<view style="text-align:center;">对不起，本次考试还未开始</view>
				</template>
				<template v-if="ExamStatus==4">
					<view style="text-align:center;">对不起，本次考试您已缺考</view>
				</template>
			</view>
		</view>
		<view class="submitBox">
			<template v-if="ExamStatus==2">
				<view class="submit" :class="{disabled: !canClick}" v-if="!isShowLate" @click="EnterExam">
					我已知晓<text v-if="totalTime>0">（{{totalTime}}s）</text>
				</view>
				<view class="submit" v-else @click="backToIndex">
					我已知晓
				</view>
			</template>
			<!-- 未开始 -->
			<template v-if="ExamStatus==1||ExamStatus==4">
				<view class="submit" @click="backToIndex">
					我已知晓
				</view>
			</template>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";	
	import { 
		getPaperDetail,
		SetStuExamStartTime
	} from "../../api/exam";
	export default {
		props: {
			ExamStatus: Number,
			msg:Object
		},
		setup(props, ctx) {
			let Gid = uni.getStorageSync("userInfo").Id;
			let data = reactive({
				ExamStatus: props.ExamStatus,
				dataList:{},
				msg: props.msg,
				totalTime: 5,
			    canClick: true ,//添加canClick
				isShowLate:false
			});
			let methods = {
				//隐藏答题卡
				EnterExam() {
					if (!data.canClick) return
					ctx.emit("hideNotice");
					methods.SetStartTime();
				},
				async SetStartTime(){
					let msg = {
						PublishId:props.msg.PublishId,
						GuestId:props.msg.GuestId,
						PaperId:props.msg.PaperId
					};
					let res = await SetStuExamStartTime(msg);
					if (res.Code == 1) {
						
					}
				},
				getNowTime() {
				  let dateTime;
				  let yy = new Date().getFullYear();
				  let mm = new Date().getMonth() + 1;
				  let dd = new Date().getDate();
				  let hh = new Date().getHours();
				  let mf =
				    new Date().getMinutes() < 10
				      ? "0" + new Date().getMinutes()
				      : new Date().getMinutes();
				  let ss =
				    new Date().getSeconds() < 10
				      ? "0" + new Date().getSeconds()
				      : new Date().getSeconds();
				  dateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
				  return dateTime;
				},
				async getPaperDetail() {
				  let res = await getPaperDetail(data.msg);
				  if (res) {
				    if (res.Code == 1) {
				      data.dataList = res.Data;
				      if(data.dataList.Publish.EnterTimes&&data.dataList.Publish.EnterTimes>0){
				      	let time1 = data.dataList.Publish.ExamStartTime;
				      	let time2 = methods.getNowTime();
				      	var d1 = new Date(time1);
				      	var d2 = new Date(time2);
				      	let TimeDis = parseInt(d2 - d1) / 1000 / 60;
				      	if (TimeDis > data.dataList.Publish.EnterTimes) {
				      	  data.isShowLate=true
				      	}
				      }
				      if(!data.isShowLate){
				      	data.canClick = false
				      	let clock = setInterval(() => {
				      		data.totalTime--
				      		if (data.totalTime == 0) {
				      			clearInterval(clock)
				      			// this.totalTime = 5
				      			data.canClick = true //这里重新开启
				      		}
				      	}, 1000);
				      }
				    }
				  }
				},
				//返回首页
				backToIndex(){
					uni.navigateBack();
				}
			};
			onMounted(() => {		
				methods.getPaperDetail();
			});
			return {
				...toRefs(data),
				...methods,
			};
		},
	};
</script>

<style scoped>
	.answer-Notice {
		box-sizing: border-box;
		padding: 30rpx;
		height: calc(100vh - 300rpx);
		overflow-y: auto;
	}
	.disabled{
		background-color: rgba(0,172,249,0.5)!important;
	}
	.examContent {
		margin-top: 20px;
		font-family: PingFang SC;
		font-size: 30rpx;
	}

	.submitBox {
		width: 750rpx;
		height: 150rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.submit {
		width: 600rpx;
		height: 70rpx;
		border-radius: 35rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00acf9;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
		margin: 0 auto;
	}
</style>
