<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 v-if="exameResult.id">
			<view class="border_radius_10 haveResult">
				<view class="scoreBox">
					本次考试卷面成绩为：<text class="score PM_font">{{exameResult.score}} 分</text>
				</view>
				<view class="flex_box flex_between">
					<button type="primary" size="mini" @click="goToClass">返回班级</button> 
					<button type="warn" size="mini" @click="goToPaper">查看试卷</button>
				</view>
				<view class="result_imgBox">
					<image src="../../static/jiesuan_Icon.jpg" mode="widthFix"></image>
				</view>
			</view>
		</template>
		<!-- 没有考试结果的时候 -->
		<template v-if="!exameResult.id">			
			<view style="padding: 20rpx; " class="timeBox border_radius_10 flex_box flex_between align-items_box"
				v-if="secondTimeDif > 0">
				
				<view class="">
					<text><i style="color: #00aaff; font-style: normal; margin-right: 10rpx;" class="">{{curIndex1+1}}
						</i> / {{questionList.length}}</text>
						<text class="checkQuestBtn small_btn border_radius_10" @click="showQuestIndex = true">全部题目</text>
				</view>
				<view class="flex_box align-items_box" v-if="secondTimeDif > 0">
					<view class="" style="font-size: 26rpx;">
						剩余时间：
					</view>
					<view class="">
						<uni-countdown @timeup="timeup" :font-size="20" :show-day="false" 
						:hour="timeDif.hour" 
						:minute="timeDif.minutes" 
						:second="timeDif.second"
							color="#ffaa7f" />
					</view>
				</view>
				<!-- </view> -->
				<!-- <pre>{{testPaper}}</pre> -->
			</view>
			<!-- <view class="">				
					<text class="small_btn border_radius_10" @click="showQuestIndex = true">全部题目</text>			
			</view> -->
			<view class="question border_radius_10" v-if="curQuestion.id">
				<view class="">
					<text class="questionType">{{curQuestion.type == 0 ? '单选题' : '多选题'}}</text>
					<!-- <text class="checkQuestBtn small_btn border_radius_10" @click="showQuestIndex = true">检查</text> -->
					<view class="questionItem" v-if="curQuestion.id">
						<view class="">
							<text>{{curQuestion.content}}</text>
						</view>						
						<view class="optionsBox">
							<view
								:class="['item','border_radius_10',	(curQuestion.answerIds.includes(item.id) || 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 " style="overflow: hidden;">
						<view class="flex_box flex_between">
							<view class="item">
								<button @click="showPrevQuestion" type="default" plain="true" :disabled="curIndex1 == 0"
									size="mini">上一题</button>
							</view>
							<view class="item" v-show="curIndex1 == questionList.length-1 && !isOvertime || wantSubmit">
								<button @click="sumitAnswer" type="primary" size="mini">交 卷</button>
							</view>
							<view class="item">
								<button @click="showNextQuestion" type="primary"
									:disabled="curIndex1 == questionList.length-1" size="mini">下一题</button>
							</view>
						</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 />
						②、请在倒计时结束前完成答题，倒计时结束后将自动交卷。</text>
				</view>
			</view>
		</u-popup>
		<u-popup key="2" :show="showQuestIndex" :round="10" @close="hidePopup">
			<view class="guanli">
				<h3>题目索引</h3>
				<view class="" style="text-align: center; font-size: 28rpx; line-height: 50rpx; color: #666;">
					<text>红框标识未作答，绿色框标识已选定答案，灰色框标识您未查看的题目</text>
				</view>
				<view class="">
					<view class="questIndx questIndxPup flex_box">											
						<!-- <scroll-view class="scroll-view_H" scroll-x="true">
							<view class="scroll-view-item_H" v-for="index of getallLIst" :key="index"> -->
								<text v-for="index of getallLIst" @click="clickIndex(index)" :key="index"
									:class="[ haveAnswerList.includes(index-1) ? 'green' : '', noAnswerList.includes(index-1) ? 'red' : '',(curIndex1+1) == index ? 'cur' :'']">{{index}}</text>
							<!-- </view>
						</scroll-view> -->
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState,mapMutations
	} 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, // 结束时间戳
				timeDif:{},  // 时间差（结束 - 现在）
				isOvertime: false, // 是否超时			
				step: 8, /// 步长
				// questIndexList: [],
				nowPart: 1,

				maxNumber: 0,
				minNumber: 0,
				noAnswerList: [],
				haveAnswerList:[],
				exameResult:{},
				showQuestIndex:false,
				secondTimeDif:undefined,
				questionList:[],
				answerIdsList:[],
				wantSubmit:false,  // 想要提交
				
			}
		},
		async onLoad(e) {
			console.log('收到得值',e);
			this.classId = e.classId
			this.examId = e.id
			this.wantSubmit = false
			this.getTestPage()
			// this.questIndexList = await this.getNowList('add')
		},
		onHide() {
			if (!this.isOvertime) {}
		},
		async onShow() {			
		},
		beforeDestroy() {			

		},
		computed: {
			...mapState(["userInfo"]),
			getallLIst() {
				const numbers = Array.from(Array(this.questionList.length).keys(), n => n + 1);
				console.log('numbers', numbers);
				return numbers
			}

		},
		methods: {
			...mapMutations(['setPaperEndTime']),
			async getServerTime() {
				var time = 0
				await $http.request({
						url: "common/classExam/getServerTime",
						method: "POST",
						data: {},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(async (res) => {
						if (res.code == 0) {
							time = res.serverTime
						} else {
							time = -1
						}
					}).catch(e => {
						time = -1
					});
				return time
			},
			// 单个题的提交
			saveQuestAnswer(paperId,questIndex,ids){
				console.log('收到的值',paperId,questIndex,ids);
				$http.request({
						url: "common/classExam/submitOption",
						method: "POST",
						data: {
							"id": paperId, //试卷id
							    "no": questIndex,  // 提索引 1....
							    "answer": ids // 答案id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {					
						if (res.code == 0) {							
							console.log('提交成功');
						}else{
							uni.showToast({
								title: e.errMsg,
								icon: 'error'
							})
						}
				
					}).catch(e => {						
						console.log(e, '数据报错')						
						uni.showToast({
							title: e.errMsg,
							icon: 'error'
						})
					});
			},
			checkAnswer(id){
				var _list = [...this.answerIdsList]
				var _list1 = []
				_list = _list.map( item => {
					return item.split(',')
				})
				for (var i = 0; i < _list.length; i++) {
					for (var j = 0; j < _list[i].length; j++) {
						if(id == _list[i][j]){
							return true
						}
					}
				}
					return false	
			},
			 getNoAnswerList() {
				var list = []
				// if (this.curIndex1 > 0) {
					for (var i = 0; i < this.questionList.length; i++) {
						if (this.questionList[i].answerIds.length == 0  && this.questionList[i].hadOpend) {
							
							list.push(i)
							// console.log('fuhe?',list);
						}
					}
				// }
				return list
			},
			gethaveAnswerList() {
				var list = []
				// if (this.curIndex1 > 0) {
					for (var i = 0; i < this.questionList.length; i++) {
						if (this.questionList[i].answerIds.length > 0 && this.questionList[i].hadOpend) {
							// console.log('fuhe?');
							list.push(i)
						}
					}
				// }
				return list
			},			
			// 倒计时结束 （超时）
			timeup() {
				this.isOvertime = true
				this.sumbitPaper()
				let that = this							
				uni.showModal({
					title: '提示',
					content: "考试结束,系统已为您自动交卷,点击按钮返回所在班级",
					confirmText: '知道了',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: `/pages/miniClass/classInfo?id=${that.classId}`
							})
						}
					}
				})
			},
			goToPaper(){				
				uni.navigateTo({
					url: `/pages/miniClass/paperBack?id=${this.examId}`
				})
				
			},
			// 获取交卷数据
			sumitAnswer() {	
				let that = this
				that.wantSubmit = true
				// this.noAnswerList = await this.getNoAnswerList()
				if(that.noAnswerList.length > 0){
					that.showQuestIndex = true
					uni.showModal({
						title:'提示',
						content:'您有未作答的题目，是否继续交卷操作？',
						cancelText:'点错了',
						confirmText:'确定',
						success(res) {
							if (res.confirm) {
								that.sumbitPaper()								
							}
						},
					})
				}else{
					that.sumbitPaper()		
				}
				
			},
			// q请求提交试卷
			sumbitPaper(ids) {
				let that = this
				$http.request({
						url: "common/classExam/submitExamPaper",
						method: "POST",
						data: {
							id: that.examId							
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						// uni.hideLoading()
						if (res.code == 0) {
							console.log('交卷结果',res);
							uni.showToast({
								title: '交卷成功',
								icon: 'success'
							})
							setTimeout( ()=>{
								that.exameResult = res.examPaper
								// this.timeup()
								that.showQuestIndex = false
								that.secondTimeDif = 0
								that.isOvertime = true
								uni.setStorage({
									key:'paperEndTime',
									data:{
										time: 0,
										examId: undefined										
									},
									success: function () {
											console.log('时间存储成功');
										}
								})								
															
							},300)
							
						}else{
							uni.showToast({
								title: e.errMsg,
								icon: 'error'
							})
						}

					}).catch(e => {
						uni.hideLoading()
						console.log(e, '数据报错')
						// this.status = 3
						uni.showToast({
							title: e.errMsg,
							icon: 'error'
						})
					});
			},
			showPrevQuestion() {
				// 上一题
				this.curIndex1--
				// this.curQuestion.answerIds = []
				this.curQuestion = {
					...this.questionList[this.curIndex1]
				}
				this.questionList[this.curIndex1].hadOpend = true
				// console.log('----------------', this.questionList );
				this.noAnswerList = this.getNoAnswerList()
				console.log('上一题', this.noAnswerList);
				this.haveAnswerList = this.gethaveAnswerList()
			},
			showNextQuestion() {
				// 下一题
				this.curIndex1++
				// this.curQuestion.answerIds = []
				this.curQuestion = {
					...this.questionList[this.curIndex1]
				}
				this.questionList[this.curIndex1].hadOpend = true
				// console.log('+++++++++++++++', this.testPaper, );				
				this.noAnswerList = this.getNoAnswerList()
				this.haveAnswerList = this.gethaveAnswerList()
			},
			clickOption(item, index) {
				console.log('item', item, index, this.curIndex1);
				if (this.curQuestion.type == 0) {
					this.questionList[this.curIndex1].answerIds = [item.id]
					this.curQuestion.answerIds = [item.id]
					console.log('666666666', this.questionList[this.curIndex1].answerIds, 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.questionList[this.curIndex1].answerIds.splice(isIN, 1)
						this.curQuestion.answerIds.splice(isIN, 1)
					} else {
						this.questionList[this.curIndex1].answerIds.push(item.id)

						this.curQuestion.answerIds = [...this.questionList[this.curIndex1].answerIds]
					}
				}
				
				this.noAnswerList = this.getNoAnswerList()
				this.haveAnswerList = this.gethaveAnswerList()
				console.log('this.testPaper.',this.noAnswerList,this.haveAnswerList);
				this.saveQuestAnswer(this.examId,this.curIndex1+1,this.curQuestion.answerIds.join(','))
				console.log('noAnswerList', this.noAnswerList)
			},
			setDesc() {
				const letterArr = []
				// 字母A的code值是65
				for (let i = 65; i < 91; i++) {
					letterArr[i] = String.fromCharCode(i)
				}
				return letterArr
			},
			async getTestPage() {
				uni.showLoading({
					title: '正在获取试卷'
				})
				await $http.request({
						url: "common/classExam/getExamPaperInfo",
						method: "POST",
						data: {
							"id": this.examId
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(async res => {
						uni.hideLoading()						
						if (res.code == 0) {
							console.log('试卷信息',res);
							var subOptions = JSON.parse(res.examPaper.subject)
							this.answerIdsList = JSON.parse(res.examPaper.answer)	
							var newAnswerIdsList = [...this.answerIdsList ]
							subOptions.forEach((item, index) => {
								item.hadOpend = false // 是否呗打开过
								item.answerIds = []
								var code = 0
								item.options.forEach(item1 => {
									const randomAbc = this.setDesc().splice(65)
									item1.content = randomAbc[code] + '、' + item1.content
									code++
								})								
								var temList = newAnswerIdsList[index].split(',')
								// console.log('temList474',temList);
								if(temList == ''){
									temList = []
								}else{
									item.hadOpend = true
								}								
								item.answerIds = temList
							})
							this.questionList = subOptions	
							this.noAnswerList = this.getNoAnswerList()
							this.haveAnswerList = this.gethaveAnswerList()
							// console.log('this.answerIdsList', this.answerIdsList);							
							this.testPaper = res.examPaper	
							// var planEndTimeDate = new Date(res.planEndTime)
							// this.endTime = planEndTimeDate.getTime();
							this.endTime = res.planEndTime
							var severNowTime = await this.getServerTime()
							this.severNowTime = severNowTime
							console.log('this.endTime',this.endTime);							
							this.secondTimeDif = this.endTime - severNowTime        // 时间差 毫秒
							let that = this
							if(this.secondTimeDif > 0){
								// this.setPaperEndTime({time:this.endTime})								
								this.timeDif.hour =  parseInt((this.secondTimeDif % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
								this.timeDif.minutes = parseInt((this.secondTimeDif % (1000 * 60 * 60)) / (1000 * 60))
								this.timeDif.second =  (this.secondTimeDif % (1000 * 60)) / 1000
								console.log('this.endTime',this.timeDif.hour, this.timeDif.minutes, this.timeDif.second);								
							}else{
								uni.showModal({
									title:'提示',
									content:'您的时间已经结束，即将返回班级',
									confirmText:'好的',
									showCancel:fals,
									success: (res) => {
										if(res.confirm){
											that.goToClass()
										}
									}	
								})
							}								
							this.curQuestion = {
								...this.questionList[this.curIndex1]
							}
							this.curIndex1 = this.questionList.findIndex(itemdd =>{
								console.log('itemdd',itemdd.answerIds);
								return itemdd.answerIds.length == 0
							})
							console.log('^^^^^^^',this.curIndex1);
							this.curIndex1 == -1 ? this.curIndex1 = this.questionList.length - 1 : ''
							console.log('^^^^^^^',this.curIndex1);
							this.questionList[this.curIndex1].hadOpend = true
							uni.showToast({
								title: '获取成功',
								icon: 'success'
							})
							console.log(res, '试卷', this.curQuestion)
							// setTimeout(() => {
							// 	this.getClassInfo()
							// }, 500)
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 3000
							})
						}
			
					}).catch(e => {
						uni.hideLoading()
						console.log(e, '数据报错')
						// this.status = 3
						uni.showToast({
							title: e.errMsg,
							icon: 'none',
							duration: 3000
						})
					});
			},			
			showElart() {
				// uni.showModal({
				// 	title:'提示',
				// 	content:"您还没有完成考试，确定要离开吗？离开后成绩会记为0分，是否继续？"
				// })
			},
			goToClass() {
				uni.navigateTo({
					url: `/pages/miniClass/classInfo?id=${this.classId}`
				})
			},
			hidePopup() {
				this.showPopup = false
				this.showQuestIndex = false
			},
			clickIndex(val) {
				this.curIndex1 = val - 1
				console.log('val', val, this.curIndex1,this.questionList[this.curIndex1]);
				for (var i = 0; i < this.curIndex1; i++) {
					this.questionList[i].hadOpend = true
				}
				this.curQuestion = this.questionList[this.curIndex1]
				this.questionList[this.curIndex1].hadOpend = true
				this.hidePopup()
				this.noAnswerList = this.getNoAnswerList()
				this.haveAnswerList = this.gethaveAnswerList()
			},
			hourUp(start,e) {
				// 比现在多几个小时
				// var end = Date.now()
				var startTimeDate = new Date(start)
				var startTime = startTimeDate.getTime();
				var step = 1000 * 60 * 60 * e    // 时间间隔
				var interval = startTime + step; //开始 + 时长 = 结束的毫秒数
				// var a = new Date(interval)
				console.log('aaaaaaaaaa结束时间的毫秒数，时间戳',interval);
				return interval
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";

	.questIndx { overflow: hidden;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		span{padding: 20rpx 0; display: inline-block;}
		.red{border-color: #f56c6c; color: #f56c6c;}
		.green{
			border-color: #67c23a; color: #67c23a;
		}
		text {
			font-size: 28rpx;
			background-color: #fff;
			// padding: 6rpx 10rpx;
			display: flex;
			// justify-content: center;
			border-radius: 10rpx;
			// align-items: center;
			width: 70rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border: 1px solid #eee;
		}

		.cur {
			background-color: #409eff;
			color: #fff;
		}
	}
	
	.guanli {
		padding: 40rpx;
		max-height: 60vh;
		overflow-y: scroll;
		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;
	}
	.checkQuestBtn {
		margin-left: 10rpx;
		// position: absolute;
		// right: 20rpx;
		// top: 20rpx;
		font-size: 28rpx;
		// border: 1px solid $themeColor;
		background-color: #409eff;
		color: #fff;
		// padding: 10rpx 20rpx;
		// border-radius: 0 50rpx 50rpx 0;
	}
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		// height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 13%;
		// height: 300rpx; 
		overflow: hidden;
		// line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.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: 16rpx 12rpx;
			margin-bottom: 16rpx;
		}

		.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;
	}

	.questIndx {
		
		.cur {
			border-color:#409eff ;
			background-color: #409eff;
			color: #fff;
		}
	}
	.questIndxPup{
		justify-content: space-around;
		flex-wrap: wrap;
		text{
			display: inline-block; margin: 10rpx;
		}
	}
	.btnBox {
		.item {
			width: 40%;
			display: flex;
			justify-content: center;
		}
	}
</style>