<template style="">
	<view class="" style="background-color: #d4eaf0; min-height: calc(100vh); padding: 20rpx;">
		<public-module></public-module>
		<z-nav-bar title="试卷答案">
			<!-- <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">{{testPaper.score}}分</text>
				</view>
				<view class="otherItems flex_box flex_between">
					<view class="itt">
						<text class="ciyao">总题数</text>
						<text class="mainTxt">{{questionList.length}}</text>
					</view>
					<view class="itt">
						<text class="ciyao">已答</text>
						<text class="mainTxt">{{questionList.length - haveNoAnswerNumber}}</text>
					</view>
					<view class="itt">
						<text class="ciyao">未答</text>
						<text class="mainTxt">{{haveNoAnswerNumber}}</text>
					</view>
					<view class="itt">
						<text class="ciyao">正确率</text>
						<text class="mainTxt">{{rightNumber / questionList.length * 100}} %</text>
					</view>
				</view>
			</view>
		</template>
		<!-- 没有考试结果的时候 -->
		<template>
			<!-- <view style="padding: 20rpx; " class="timeBox border_radius_10 flex_box flex_between align-items_box"
				>			
				
			</view> -->
			<view class="question border_radius_10" v-if="curQuestion.id">
				<view class="">
					<text class="questionType">{{curQuestion.type == 0 ? '单选题' : '多选题'}}</text>

					<text style="position: absolute; right: 20rpx; top: 30rpx; z-index: 2;"><i style="color: #00aaff; font-style: normal; margin-right: 10rpx;" class="">{{curIndex1+1}}
						</i> / {{questionList.length}}</text>

					<view class="questionItem" v-if="curQuestion.id">
						<view class="">
							<text>{{curQuestion.content}}</text>
						</view>
						<view class="optionsBox">							
							<view :class="['item','border_radius_10',
								item.right_wrong == 1 ? 'right' : '',
								checkAnswer(item.id) && item.right_wrong == 0 ? 'wrong' : '',
								checkAnswer(item.id) && item.right_wrong == 1 ? 'right' : ''
								]"
								v-for="(item, index) in curQuestion.options" :key="index">
								<!-- {{checkAnswer(item.id) ? '包含' : '不包含'}} -->
								<view class="flex_box flex_between">
									<text>{{item.content}}</text>
									<text
										v-if="checkAnswer(item.id)">{{item.right_wrong == 1 ? '正确':'错误'}}</text>
								</view>

							</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">
								<button @click="showNextQuestion" type="primary"
									:disabled="curIndex1 == questionList.length-1" size="mini">下一题</button>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="margin-top: 20rpx;">
					<text style="color: #666; font-size: 28rpx;">开始时间：{{testPaper.startTime}} <br/> 结束时间：{{testPaper.endTime}}</text>
				</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>
	</view>
</template>

<script>
	// const paperBack = require('@/data/paperBack.json')
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				showPopup: false,
				code: 0, // 英文code
				exameId: undefined,
				testPaper: [],
				curQuestion: {
					answerIds: []
				},
				questionList: [], // 试题列表
				result: {}, // 考试结果
				curIndex1: 0,
				answerIdsList: [],
				haveNoAnswerNumber: 0, // 未作答数量
				rightNumber: 0 // 答题正确个数
			}
		},
		async onLoad(e) {
			console.log('收到得值', e);
			this.exameId = e.id
			this.getTestPage()
		},
		onHide() {},
		onShow() {},
		computed: {
			...mapState(["userInfo"]),
			// getallLIst() {
			// 	const numbers = Array.from(Array(100).keys(), n => n + 1);
			// 	console.log('numbers', numbers);
			// 	return numbers
			// }
		},
		methods: {
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.curIndex1; i++) {
						if (this.testPaper[i].answerIds.length == 0) {
							console.log('fuhe?');
							list.push(i)
						}
					}
				}
				return list
			},
			gethaveAnswerList() {
				var list = []
				if (this.curIndex1 > 0) {
					for (var i = 0; i < this.curIndex1; i++) {
						if (this.testPaper[i].answerIds.length > 0) {
							console.log('fuhe?');
							list.push(i)
						}
					}
				}
				return list
			},

			// 获取交卷数据
			sumitAnswer() {
				this.sumbitPaper()
			},
			showPrevQuestion() {
				// 上一题
				this.curIndex1--
				// this.curQuestion.answerIds = []
				this.curQuestion = {
					...this.questionList[this.curIndex1]
				}
				// console.log('----------------', this.testPaper );
				// this.haveAnswerList = this.gethaveAnswerList()
			},
			showNextQuestion() {
				// 下一题
				this.curIndex1++
				// this.curQuestion.answerIds = []
				this.curQuestion = {
					...this.questionList[this.curIndex1]
				}

			},
			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/getExamPaperInfo",
						method: "POST",
						data: {
							"id": this.exameId
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						uni.hideLoading()
						if (res.code == 0) {
							// that.isHave = true	
							var subOptions = JSON.parse(res.examPaper.subject)
							subOptions.forEach(item => {
								var code = 0
								item.options.forEach(item1 => {
									const randomAbc = this.setDesc().splice(65)
									item1.content = randomAbc[code] + '、' + item1.content
									code++
								})
							})

							this.questionList = subOptions
							
							console.log('this.questionListthis.questionListthis.questionList', this.questionList)
							this.testPaper = res.examPaper
							console.log('试卷信息', this.testPaper);
							this.answerIdsList = JSON.parse(res.examPaper.answer)
							var newList = JSON.parse(res.examPaper.answer)
							newList = newList.map(item => {
								// console.log('item.substring(0,item.length - 2)',item.substring(0,item.length - 2));
								return item.substr(item.length - 1)
							})
							this.rightNumber = 0
							newList.forEach(item => {
								if (item == '1') {
									this.rightNumber += 1
								}
							})
							console.log('newList', newList);
							this.answerIdsList = this.answerIdsList.map(item => {
								// console.log('item.substring(0,item.length - 2)',item.substring(0,item.length - 2));
								return item.substring(0, item.length - 2)
							})
							this.haveNoAnswerNumber = 0
							this.answerIdsList.forEach(item => {
								if (item == '') {
									this.haveNoAnswerNumber += 1
								}
							})
							// this.examId = res.id
							this.curQuestion = {
								...this.questionList[this.curIndex1]
							}
							console.log('subOptions', subOptions, 'answerIdsList', this.answerIdsList);
							// console.log(questionList, '试卷', this.curQuestion)							
						} 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
						})
					});
			},

			goToClass() {
				uni.navigateTo({
					url: `/pages/miniClass/classInfo?id=${this.classId}`
				})
			},
			hidePopup() {
				this.showPopup = false
			},
			clickIndex(val) {
				this.curIndex1 = val - 1
				console.log('val', val, this.curIndex1, this.testPaper.length);
				this.curQuestion = this.testPaper[this.curIndex1]
				this.noAnswerList = this.getNoAnswerList()
				this.haveAnswerList = this.gethaveAnswerList()
			},
		}
	}
</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 {
			background-color: #fff;
			padding: 6rpx 10rpx;
			display: flex;
			justify-content: center;
			border-radius: 10rpx;
			align-items: center;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			border: 1px solid #eee;
		}

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

	.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 {
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		text-align: center;
	}

	.scoreBox {
		overflow: hidden;
		color: #333;		margin:20rpx 0;
	}

	.score {
		
		color: $themeColor;
		font-size: 50rpx;
	}

	.question {
		padding: 20rpx;
		padding-top: 100rpx;
		background-color: #fff;
		position: relative;
	}

	.otherItems {
		// border: 1px solid #dadada;
		
		text-align: center;
		// background-color: rgba(255, 255, 255, .5);
		border-radius: 20rpx;
		justify-content: space-around;		

		.itt {
			margin: 0 20rpx;
		}

		text {
			display: block;
			font-size: 28rpx;
		}

		.ciyao {
			color: #999;
			margin-bottom: 10rpx;
		}
	}

	.optionsBox {
		margin: 30rpx 0;

		.item {
			border: 1px solid #eee;
			padding: 16rpx 12rpx;
			margin-bottom: 20rpx;
		}

		.right {
			border-color: #c2e7b0;
			color: #67c23a;
			background-color: #fef0f0;
		}

		.wrong {
			border-color: #fbc4c4;
			color: #f56c6c;
			background-color: #f0f9eb;
		}

		.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 {
			background-color: #409eff;
			color: #fff;
		}
	}

	.btnBox {
		.item {
			width: 40%;
			display: flex;
			justify-content: center;
		}
	}
</style>