<template style="">
	<view class="" style="background-color: #d4eaf0; min-height: calc(100vh); padding: 20rpx;">
		<public-module></public-module>
		<z-nav-bar title="正在考试"  backState="2000">
			<text slot="right" style="padding-right: 20rpx; font-size: 26rpx; color: #666;" @click="showPopup = true">考试说明</text>
		</z-nav-bar>
		<!-- 有考试结果时候 -->
		<template>
			<view class="border_radius_10 haveResult">
				<view class="scoreBox">
					本次考试卷面成绩为：<text class="score PM_font">90分</text>
				</view>
				<view class="">
					<button type="primary" @click="goToClass">返回班级</button>
				</view>
				<view class="result_imgBox">
					<image src="../../static/jiesuan_Icon.jpg" mode="widthFix"></image>
				</view>
			</view>			
		</template>
		<!-- 没有考试结果的时候 -->
		<template>
				<view class="tips border_radius_10">
					<text>①、每位学员共有两次考试的机会，考试成绩以两次成绩的最高分作为最终的卷面成绩，请认真对待每次考试;<br/>
					②、请在倒计时结束前完成答题，倒计时结束后将自动交卷;<br/>
					③、考试结束前中途离开视为放弃此次考试，成绩为0分。</text>
				</view>
				<view class="questIndx flex_between flex_box">
					<text @click="prev"> << </text>
					<text v-for="index of NowList" :key="index" >{{index}}</text>
					<text @click="next"> >> </text>
				</view>
		<view style="padding: 20rpx; " class="timeBox border_radius_10 flex_box flex_between align-items_box" v-if="paperCreateTime > 0">
			<!-- <view class=""> -->
				<view class="">
					<text><i style="color: #00aaff; font-style: normal; margin-right: 10rpx;" class="">{{curIndex1+1}} </i> / {{testPaper.length}}</text>
				</view>
				<view class="flex_box align-items_box">
					<view class="">
						剩余时间：
					</view>
					<view class="">
						<uni-countdown @timeup="timeup" :font-size="20" :show-day="false" :hour="paperCreateTime" color="#ffaa7f" />
					</view>
				</view>
			<!-- </view> -->
			<!-- <pre>{{testPaper}}</pre> -->
		</view>
		<view class="question border_radius_10" v-if="curQuestion.id">
			<view class="">
				<text class="questionType">{{curQuestion.type == 0 ? '单选题' : '多选题'}}</text>
				<view class="questionItem" v-if="curQuestion.id">
					<view class="">
						<text>{{curQuestion.content}}</text>
					</view>
					<!-- <view class="">
						{{curQuestion}}-{{curIndex1}}
					</view> -->
					<view class="optionsBox">
						<view :class="['item','border_radius_10',curQuestion.answerIds.includes(item.id) ? 'choosed' : '']" @click="clickOption(item, index)" v-for="(item, index) in curQuestion.options" :key="index">
							<text>{{item.content}}</text>
						</view>
					</view>			
				</view>
				<view class="btnBox ">	
				<view class="flex_box flex_between">
					<view class="item">
						<button  @click="showPrevQuestion" type="default" plain="true" v-if="curIndex1 > 0" size="mini">上一题</button>
					</view>
					<view class="item" >
						<button @click="showNextQuestion" type="primary" v-show="curIndex1 < testPaper.length-1" :disabled="curQuestion.answerIds.length == 0" size="mini">下一题</button>
					</view>	
				</view>								
					<view class="" style="margin-top: 20rpx;" v-show="curIndex1 == testPaper.length-1 && !isOvertime">
						<button @click="sumitAnswer" type="primary" >交 卷</button>						
					</view>				
				</view>
			</view>
		</view>		
		</template>
		<u-popup key="1" :show="showPopup" :round="10" @close="hidePopup">
			<view class="guanli">
				<h3>考试说明</h3>
				<view class="tips border_radius_10">
					<text>①、每位学员共有两次考试的机会，考试成绩以两次成绩的最高分作为最终的卷面成绩，请认真对待每次考试;<br/>
					②、请在倒计时结束前完成答题，倒计时结束后将自动交卷;<br/>
					③、考试结束前中途离开视为放弃此次考试，成绩为0分。</text>
				</view>				
			</view>
		</u-popup>
	</view>	
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				showPopup:false,
				code:0,  // 英文code
				classId:undefined,
				testPaper:[],
				curQuestion:{
					answerIds:[]
				},
				result:{}, // 考试结果
				curIndex1:0,
				paperCreateTime:0,
				examId:undefined,
				endTime:undefined,  // 结束时间戳
				isOvertime:false,    // 是否超时
				nowPart:1, // 段数
			}
		},
		onLoad(e) {
			console.log('收到得值');
			this.classId = e.classId
			
			if(this.testPaper.length == 0){
			this.getTestPage()
			}
		},
		onHide(){
			if(!this.isOvertime){}
		},
		onShow() {
			this.endTime = this.hourUp(1)
			console.log('this.endTime',this.endTime.getTime());
		},
		beforeDestroy() {
			if(!this.isOvertime){ // 如果中途退出就把成绩记为0
				this.giveZero()
			}
			
		},
		computed: {
			...mapState(["userInfo"]),
			NowList(){
				var _list = []
				console.log('this.nowPart * 8', this.nowPart);
				var maxNumber = 0
				var minNumber = 0
				if(this.nowPart == 1){
					maxNumber = this.nowPart + 8
					minNumber = 1					
				}else{
					minNumber = (this.nowPart - 1) * 8
					maxNumber = this.nowPart * 8
				}
					for (var i = minNumber-1; i < maxNumber-1; i++) {
						_list.push(i)
					}
				
				
				return _list
			}
			},
		methods: {
			prev(){
				if(this.nowPart > 1){
				this.nowPart--
				}
			},
			next(){
				if(this.nowPart < 12){
				this.nowPart++
				}
			},
			// 倒计时结束 （超时）
			timeup(){
				this.isOvertime = true
				let that = this
				uni.showModal({
					title:'提示',
					content:"考试结束，您未在规定时间内交卷，本次成绩为0分",
					confirmText:'知道了',
					showCancel:false,
					success: (res) => {
						if (res.confirm) {
						that.goToClass()		
								}
					}
				})
			},
			// 获取交卷数据
			sumitAnswer(){
				var _newList = this.testPaper.map( item =>{
					return item.answerIds
				})
				
				_newList = _newList.map(item => {
					return item.join(',')					
				})
				console.log('_newList',_newList);
				this.sumbitPaper(_newList)				
			},
			// q请求提交试卷
			sumbitPaper(ids){
				$http.request({
						url: "common/classExam/submitExamPaper",
						method: "POST",
						data: {
							 id: this.examId,
							"answer": ids
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						uni.hideLoading()
						if (res.code == 0) {							
							uni.showToast({
								title:'交卷成功',
								icon:'success'
							})
							this.isOvertime = true
						}
						
					}).catch(e => {
						uni.hideLoading()
						console.log(e, '数据报错')
						// this.status = 3
						uni.showToast({
							title: e.errorMsg,
							icon: 'error'
						})
					});
			},
			showPrevQuestion(){
				// 上一题
				this.curIndex1--
				// this.curQuestion.answerIds = []
				this.curQuestion = 	{...this.testPaper[this.curIndex1]}
				console.log('----------------',this.testPaper,);
			},
			showNextQuestion(){
				// 下一题
				this.curIndex1++
				// this.curQuestion.answerIds = []
				this.curQuestion = 	{...this.testPaper[this.curIndex1]}
				console.log('+++++++++++++++',this.testPaper,);
			},
			clickOption(item, index){
				console.log('item',item,index,this.curIndex1);
				if(this.curQuestion.type == 0){					
					this.testPaper[this.curIndex1].answerIds = [item.id]
					 this.curQuestion.answerIds = [item.id]
					console.log('666666666',this.testPaper, this.curQuestion.answerIds);
					this.$forceUpdate()
				}else if(this.curQuestion.type == 1){
					console.log('多选');
					var isIN = this.curQuestion.answerIds.findIndex( itemss => {
						return itemss == item.id
					})
					if(isIN >= 0){
						console.log('有重复的,删除对应的', isIN);
						this.testPaper[this.curIndex1].answerIds.splice(isIN,1)
						this.curQuestion.answerIds.splice(isIN,1)
					}else{
						this.testPaper[this.curIndex1].answerIds.push(item.id)
						
						this.curQuestion.answerIds = [...this.testPaper[this.curIndex1].answerIds]
					}
				}
			},
			setDesc() {
				const letterArr = []
					      // 字母A的code值是65，但因为已经到字母D了，所以直接从69E开始循环
				for (let i = 65; i < 91; i++) {
					        letterArr[i] = String.fromCharCode(i)
				}
				return letterArr
			},			
			getTestPage(){
				uni.showLoading({
					title:'正在生成试卷'
				})
				$http.request({
						url: "common/classExam/generateExamPaper",
						method: "POST",
						data: {
							"classId": this.classId
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						uni.hideLoading()
						if (res.code == 0) {							
							// that.isHave = true							
							res.examPaper.forEach(item => {
								item.answerIds = []
								var code = 0
								item.options.forEach(item1 => {
									const randomAbc = this.setDesc().splice(65)
									item1.content = randomAbc[code]+'、'+item1.content
									code++
								})
							})
							this.testPaper = res.examPaper
							this.examId = res.id
							this.paperCreateTime = 1	
							this.endTime = this.hourUp(1)
							console.log('this.endTime',this.endTime);
							this.curQuestion = 	{...this.testPaper[this.curIndex1]	}
											uni.showToast({
												title: '获取成功',
												icon: 'success'
											})
							console.log(res, '试卷',this.curQuestion)
							// setTimeout(() => {
							// 	this.getClassInfo()
							// }, 500)
						}
						
					}).catch(e => {
						uni.hideLoading()
						console.log(e, '数据报错')
						// this.status = 3
						uni.showToast({
							title: e.errorMsg,
							icon: 'error'
						})
					});
			},
			giveZero(){
				// 没有完成完成考试，记为0分
			},
			showElart(){
				// uni.showModal({
				// 	title:'提示',
				// 	content:"您还没有完成考试，确定要离开吗？离开后成绩会记为0分，是否继续？"
				// })
			},
			goToClass(){
				uni.navigateTo({
					url:`/pages/miniClass/classInfo?id=${this.classId}`
				})
			},
			hidePopup(){
				this.showPopup = false
			},
			hourUp(e){
				// 比现在多几个小时
				var end = Date.now()
				var start = 1000*60*60*e
				var interval = end + start; //结束 - 开始 = 毫秒值
				var a =new Date(interval)
				return a
			},			
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";
	.questIndx{
		text{padding: 6rpx 10rpx; display: flex; justify-content: center;  border-radius: 10rpx; align-items: center; width: 60rpx; height: 60rpx; text-align: center; }
		.cur{background-color: #409eff; color: #fff;}
	}
	.guanli {
		padding: 40rpx;
	
		h3 {
			text-align: center;
			margin-bottom: 20rpx;
			color: #333;
		}}
	.tips{background: #fbe8e8; color: #f56c6c; line-height: 50rpx; font-size: 28rpx; padding: 10rpx 20rpx; text-align:justify;}
	.questionType{position: absolute; left: 0 ;top:20rpx; background-color: $themeColor; color: #fff; padding: 10rpx 20rpx;
		border-radius: 0 50rpx 50rpx 0;
	}
	.haveResult{background-color: #fff; padding: 20rpx; text-align: center;}
	.scoreBox{margin-top: 100rpx; color: #333; margin-bottom: 50rpx;}
	.score{font-size: 50rpx; }
	.question{padding: 20rpx; padding-top: 100rpx; background-color: #fff; position: relative;}
	.optionsBox{ margin: 30rpx 0;
		.item{border: 1px solid #eee; padding: 24rpx 20rpx;  margin-bottom: 20rpx;}
		.choosed{border-color: #b3d8ff; color: #409eff; background-color: #ecf5ff;}
		.right{border-color:#c2e7b0; color: #67c23a; background-color: #f0f9eb;}
		.wrong{
			border-color: #fbc4c4; color: #f56c6c; background-color: #fef0f0;
		}
	}
	.result_imgBox{width: 100%;
	image{width: 100%; height: 100%;}
	}
	.timeBox{background-color: #fff; margin-bottom: 20rpx;}
	.btnBox{
		.item{width:40%; display: flex; justify-content: center;}
	}
</style>
