<template>
	<!--查看答卷-->
	<view class="">
		<u-toast ref="messager"></u-toast>
		<page-title :showBack="true">答卷信息</page-title>
		<view style="display: flex;justify-content: space-between;padding: 20upx;">
			<view style="padding-top: 10upx;color: #757575; ">第{{curIndex+1}}题 / 共{{total}}题</view>
			<view style="color: #000000;">
				<text style="font-size: 40upx;">{{toScoreTow(score)}}分</text>
			</view>
		</view>
		<view class="qitem">
			<view class="qitem-info">[{{getQuestionType(curItem.type)}}]{{curItem.title}}</view>
			<view v-if="curItem.type == 3">
				<view class="qitem-opts">
					<view class="qitem-opt" :class="{check:curItem.answer && curItem.userAnswer}">
						{{toLetter(1)}}.正确
						<u-icon v-if="curItem.answer && curItem.userAnswer" name="checkbox-mark" color="#00aa00"></u-icon>
					</view>
					<view class="qitem-opt" :class="{check:!curItem.answer && !curItem.userAnswer}">
						{{toLetter(2)}}.错误
						<u-icon v-if="!curItem.answer && !curItem.userAnswer" name="checkbox-mark" color="#00aa00"></u-icon>
					</view>
				</view>
			</view>
			<view v-else v-for="(opt,optIdx) in curItem.optionList" :key="optIdx">
				<view class="qitem-opts">
					<view class="qitem-opt" :class="{check:userOptIdxs.indexOf(optIdx)>-1}">
						{{toLetter(optIdx+1)}}.{{opt.content}}
						<u-icon v-if="userOptIdxs.indexOf(optIdx)>-1" name="checkbox-mark" color="#00aa00"></u-icon>
					</view>
				</view>
			</view>
			<view class="info-row">
				回答结果：
				<text v-if="curResult" style="color: #00aa00; ">正确</text>
				<text v-if="!curResult" style="color: #ff0000; ">错误</text>
			</view>
			<view class="info-row" v-if="curItem.type == 3 && showAnswer">
				正确答案：{{curItem && curItem.answer?'正确':'错误'}}
			</view>
			<view class="info-row" v-if="curItem.type !== 3 && showAnswer">
				正确答案：<text v-for="(item,a) in curItem.optionList" :key="a">{{item.isAnswer?toLetter(a+1):''}}</text>
			</view>
			<view class="info-row" v-if="curItem.analysis">
				解析：{{curItem.analysis}}
			</view>
		</view>
		<view style="height: 50px;"></view>
		<view class="bottom-fixed">
			<view class="bottom-btns">
				<u-button type="info" text="上一题" @click="prevSub" class="next" v-if="curIndex>0"></u-button>
				<u-button type="primary" text="下一题" @click="nextSub" class="next" v-if="curIndex<(total-1)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>

	import apiTestPaper from '@/api/modules/testPaper.js'
	import { correctJudgment, numberToLetter, examType,toScoreTow } from '@/utils/tools.js';
	import { formatDate, formatSeconds } from '@/utils/index.js';
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				toScoreTow,
				answerId:'',
				viewShowData: [],
				showAnswer:false,
				showAnalysis:false,
				paperDetailData:[],
				getQuestionType: examType,
				toLetter: numberToLetter,
				total:0,
				score:0,
				curItem: {},
				curIndex: 0,
				curResult:false,//答案正确
				correctOptIdxs:[],//正确的答案
				userOptIdxs:[],//用户的答案
			}
		},
		computed: {

		},
		onLoad(options) {
			//console.log(options, 'options')
			this.answerId = options.id;
			if(options.showAnswer){
				this.showAnswer=options.showAnswer=='true'? true:false;
			}
			if(options.showAnalysis){
				this.showAnalysis=options.showAnalysis=='true'? true:false;
			}
			if (this.answerId) {
				this.loadData();
			}
		},
		methods: {
			loadData() { //加载答卷试信息
				apiTestPaper.getAnswerDetail(this.answerId).then(res => {
						if (res.status === 200) {
							this.score=res.result.score;
							let answerJson = JSON.parse(res.result.answerJson);
							let paperJson = JSON.parse(res.result.paperJson);
							//console.log(answerJson,'answerJson');
							//console.log(paperJson,'paperJson');
							let paperQuestions=[];//不包含分页符的试题数组
							//设置答案
							paperJson.forEach((qitem , index) => {
								if(qitem .type<900){
									let avalue=answerJson[qitem.id];
									//console.log(avalue,'avalue')
									if(qitem.type==3){
										qitem.answer=qitem.answer=='true'? true:false;
									}
									if(avalue){
									  if(qitem.type==1){ //单选
										qitem.userAnswer=avalue;
										//console.log(qitem,avalue,'单选qitem')
									  }else if(qitem.type==2){ //多选
										qitem.userAnswer=avalue.split(',');
									  }else if(qitem.type==3){ //判断
										qitem.userAnswer=avalue=='true'? true:false;
									  }
									}
									paperQuestions.push(qitem);
								}
							});
							//设置选中状态及对于错
							// paperQuestions.forEach((item, index) => {
								
							// });
							this.total=paperQuestions.length;
							this.paperDetailData = paperQuestions;
							this.curItem = this.paperDetailData[this.curIndex];
							this.judgeAnswer();
					} else {
						this.$refs.messager.show({message:res.message,type:'error'});
						
					}
				})
			},
			judgeAnswer(){
				//正确答案和错误答案
				this.correctOptIdxs=[];//正确答案
				this.userOptIdxs=[];//用户的答案
				
				let $this=this;
				let item=this.curItem;
				//console.log(this.curItem,'curItem');
				if(item.type!=3){
					item.optionList.forEach((opt,idx)=>{
						//填充正确答案,判断题不用处理
						if(opt.isAnswer){
							$this.correctOptIdxs.push(idx);
						}
						if(item.type==1){ //单选
							if(opt.id==item.userAnswer){
								$this.userOptIdxs.push(idx);
							}
						}else if(item.type==2){ //多选
							if(item.userAnswer.indexOf(opt.id)>-1){
								$this.userOptIdxs.push(idx);
							}
						}
					});
					//console.log(this.userOptIdxs,'userOptIdxs');
					//判断答案是否正确
					if(this.correctOptIdxs.toString()==this.userOptIdxs.toString()){
						this.curResult=true;
					}else{
						this.curResult=false;
					}
				}else{
					//判断题
					if(item.answer==item.userAnswer){
						this.curResult=true;
					}else{
						this.curResult=false;
					}
				}
				
			},
			prevSub() {
				if (this.curIndex == 0) {
					return;
				}
				this.curIndex--;
				if (this.curIndex > -1) {
					this.curItem = this.paperDetailData[this.curIndex];
					this.judgeAnswer();
				}
			},
			nextSub() {
				if (this.curIndex >= (this.total - 1)) {
					return;
				}
				this.curIndex++;
				this.curItem = this.paperDetailData[this.curIndex];
				//console.log(this.curItem,'this.curItem')
				this.judgeAnswer();
			},
		}

	}
</script>

<style lang="scss" scoped>
	.epage {
		background-color: #FFFFFF;
	}

	.sta-can {
		text-align: center;
		color: red;
		margin-top: 20px;
	}
	.info-row{
		padding: 10px 0px;
	}
	.pager-title {
		height: 40px;
		display: flex;
		justify-content: space-between;
		line-height: 40px;
		padding: 0 20upx;

		.title-name {
			margin-left: 20upx;
			font-weight: bold;
		}

		.titlt-btn {
			display: flex;

			.sub {
				height: 20px;
				border-radius: 40px;
				margin-top: 10px;
				margin-left: 20upx;
			}

		}
	}

	.score-box {
		height: 40px;
		text-align: center;
		margin: 20px;
	}

	.sta-btn {
		margin: 20upx 50upx;
	}

	.redText {
		color: #ff0000;
	}

	.footer {
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		border-top: 1px solid #d9d9d9;
		background-color: #FFFFFF;
	}

	.column {
		color: #838383;
		font-size: 40upx;
		padding: 10px 20px;
	}

	.qitem {
		padding: 10px 20px;

		.qitem-info {
			font-size: 1.2em;
			padding: 10px 0px;
		}

		.qitem-opts {
			padding: 5px 0px;

			.qitem-opt {
				display: flex;
				margin-bottom: 10px;
				padding: 20px 15px;
				background-color: #FFFFFF;
				border-radius: 6px;
			}

			.check {
				color: #00aa00;
			}
		}
	}
	.bottom-fixed{
		position: fixed;
		width: 100%;
		padding: 10px 0px;
		bottom: 00px;
		.bottom-btns {
			display: flex;
			justify-content: center;
			.next {
				width: 45%;
				border-radius: 40px;
			}
		}
	}
	
</style>
