<template>
	<view class="fullHeight">
		<headers>
			<view class="headerName">
				WiFi链接答题
			</view>
		</headers>
		<view class="pageContent" v-if="answerStatus!=3">
			<view class="questionTitle">
				{{questionDetail.questionName}}（{{questionDetail.questionType==1?'单选':'多选'}}）
			</view>
			<view class="optionList">
				<view class="item" :class="{'mySelect': answerStatus==1,'correct':answerStatus == 2 && correctOptionArr.indexOf(item.optionId)!=-1, 'error':answerStatus == 2 && correctOptionArr.indexOf(item.optionId)==-1 && selectOptArr.indexOf(item.optionId)!=-1&&correctOptionArr.indexOf(item.optionId)==-1}" v-for="(item,index) in questionDetail.optionList" @click="selectOpt(item)">
					<text class="index">{{indexList[index]}}</text><text class="name">{{item.optionName}}</text>
				</view>
			</view>
			<view class="" v-if="answerStatus==2">
				<view class="answerTxt">
					正确答案：{{correctOption}}
				</view>
				<view class="analysisBox">
					<view class="title">
						试题解析：
					</view>
					<view class="content">
						{{questionDetail.questionAnalysis}}
					</view>
				</view>
			</view>
			
			<view class="fixedBtn" @click="answerFn">
				{{answerStatus==1?'提交':'重新答题'}}
			</view>
		</view>
		<view class="successBox" v-else>
			<image src="/static/wifi.png" class="wifiImg"></image>
			<view class="txt1">
				上网成功
			</view>
			<!-- <view class="txt2">
				恭喜您回答正确,<text class="num">3</text>秒自动返回桌面
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				answerStatus:1,//  1 正在答题   2  答题错误   3 答题成功  
				devSn:'45345235',
				indexList: [
					"A",
					"B",
					"C",
					"D",
					"E",
					"F",
					"G",
					"H",
					"I",
					"J",
					"K",
					"L",
					"N",
					"M",
					"O",
					"P",
					"Q",
					"R",
					"S",
					"T",
					"U",
					"V",
					"W",
					"X",
					"Y",
					"Z",
				],
				questionDetail:{
					libraryId: '',
					optionList: [],
					questionAnalysis: "",
					questionId: '',
					questionName: "",
					questionType: 1
				},
				correctOption:'',
				correctOptionArr:[],
				selectOptArr:[]
			}
		},
		onLoad(options){
			// this.devSn=options.devSn
			this.getQuestion()
		},
		methods: {
			//添加回答记录
			addAnswerRecord(){
				let json = {
					devSn:this.devSn,
					answerType:this.answerStatus==3?1:2,
					questionId:this.questionDetail.questionId,
					answerOption:this.selectOptArr.join(',')
				}
				this.sendRequest({
					url: "xmgl/wirelessEducationQuestionAnswer/add",
					data: json,
					method: "post",
					success:(res)=> {
						
					}
				})
			},
			answerFn(){
				if(this.answerStatus==1){
					if(this.selectOptArr.length==this.correctOptionArr.length){
						if(this.selectOptArr.length==1){
							if(this.selectOptArr[0]==this.correctOptionArr[0]){
								this.answerStatus=3
							}else{
								this.answerStatus=2
							}
						}else{
							this.selectOptArr.sort(function(a,b){
								return a-b
							})
							let onoff = false
							this.selectOptArr.forEach((item,index)=>{
								if(item!=this.correctOptionArr[index]){
									onoff=true
								}
							})
							if(onoff){
								this.answerStatus=2
							}else{
								this.answerStatus=3
							}
						}
					}else{
						this.answerStatus=2
					}
					this.addAnswerRecord()
				}else{
					this.selectOptArr=[]
					this.answerStatus=1
				}
			},
			colorClass(item){
				if(this.answerStatus==1){
					if(this.selectOptArr.indexOf(item.optionId)!=-1){
						return 'mySelect'
					}else{
						return ''
					}
				}else if(this.answerStatus==2){
					if(this.correctOptionArr.indexOf(item.optionId)!=-1){
						return 'correct'
					}else{
						// for (var i = 0; i < this.selectOptArr.length; i++) {
						// 	this.selectOptArr[i]
						// }
						if(this.selectOptArr.indexOf(item.optionId)!=-1&&this.correctOptionArr.indexOf(item.optionId)==-1){
							return 'error'
						}
					}
				}
				
			},
			selectOpt(item){
				if(this.questionDetail.questionType==1){
					this.selectOptArr=[item.optionId]
				}else{
					let i = this.selectOptArr.indexOf(item.optionId)
					if(i==-1){
						this.selectOptArr.push(item.optionId)
					}else{
						this.selectOptArr.splice(i,1)
					}
					
				}
				console.log(this.selectOptArr)
			},
			//通过设备编号随机抽取一道试题
			getQuestion(){
				this.sendRequest({
					url: "xmgl/wirelessEducationQuestionSubject/getDeviceRandomEducationQuestion",
					data: {devSn:this.devSn},
					method: "post",
					success:(res)=> {
						if(res.result){
							this.questionDetail=res.result
							let arr = this.questionDetail.optionList
							for (var i = 0; i < arr.length; i++) {
								if(arr[i].correctType==1){
									this.correctOption+=this.indexList[i]
									this.correctOptionArr.push(arr[i].optionId)
								}
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.pageContent{
		padding-bottom: 80px;
	}
	.questionTitle{
		color: rgba(51, 51, 51, 0.8);
		font-size: 30rpx;
		margin: 40rpx 30rpx;
	}
	.optionList{
		margin: 40rpx 30rpx;
		.item{
			border-radius: 4rpx;
			background-color: rgba(216, 216, 216, 0.12);
			min-height: 60rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			margin-bottom: 30rpx;
			color: rgba(51, 51, 51, 100);
			border: 1px solid rgba(216, 216, 216, 0.12);
			font-size: 30rpx;
			.index{
				margin-right: 40rpx;
			}
			&.mySelect{
				border-color: rgba(18, 127, 236, 1);
				color: rgba(18, 127, 236, 1);
			}
			&.correct{
				background-color: #2CC776;
				border-color: #2CC776;
				color: #FFFFFF;
			}
			&.error{
				background-color: #F07023;
				border-color: #F07023;
				color: #FFFFFF;
			}
		}
	}
	
	.answerTxt{
		color: rgba(44, 199, 118, 100);
		font-size: 30rpx;
		margin: 0 30rpx;
	}
	.analysisBox{
		margin: 0 30rpx;
		color: rgba(42, 46, 63, 100);
		.title{
			font-size: 30rpx;
			margin: 30rpx 0 16rpx;
		}
		.content{
			opacity: 0.8;
			font-size: 30rpx;
		}
	}
	.successBox{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		.txt1{
			color: rgba(99, 217, 140, 0.8);
			font-size: 48rpx;
			margin: 20rpx auto 7px;
		}
		.txt2{
			color: rgba(42, 46, 63, 0.6);
			font-size: 28rpx;
		}
		.num{
			color: rgba(99, 217, 140, 100);
		}
	}
	.wifiImg{
		width: 224rpx;
		height: 204rpx;
	}
.fixedBtn{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 30rpx;
	color: white;
	background-color: rgba(18, 127, 236, 1);
	text-align: center;
}
</style>
