<template>
	<div  >
		<div
			style="padding: 10px;text-align: center;font-size: 20px;font-weight: bold;border-bottom: 2px solid #60A900;position: relative;">
			{{sjConfig.PaperName}}
			<div style="position: absolute;right: 0;bottom: 10px;font-weight: normal;font-size: 14px;">
				{{allNum}}
			</div>
		</div>
		<el-row :gutter="40">
			<el-col :span="6">
				<div style="background-color: #fff;border: 2px solid #ccc;padding:5px 10px;border-radius: 10px;" class="m-t-10">
					<div style="color: #F56C6C;font-size: 20px;font-weight: bold;" class="p-b-10">
						考试剩余时间：{{this.min+" ："+this.miao}}
					</div>
					<div v-for="(v,i) in content" :key="i">
						<div v-for="(item,key) in v" :key="key" >
							<div v-if="key == '27'" class="m-b-10">
								<span v-if="i==0">
									一、
								</span>
								<span v-else-if="i==1">
									二、
								</span>
								<span v-else>
									三、
								</span>
								单选题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
							</div>
							<div v-else-if="key == '28'" class="m-b-10">
								<span v-if="i==0">
									一、
								</span>
								<span v-else-if="i==1">
									二、
								</span>
								<span v-else>
									三、
								</span>
								多选题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
							</div>
							<div v-else class="m-b-10" >
								<span v-if="i==0">
									一、
								</span>
								<span v-else-if="i==1">
									二、
								</span>
								<span v-else>
									三、
								</span>
								判断题 （{{'共'+item.count+'题,共'+item.score+'分'}}）
							</div>
							<div style="width: 100%;display: flex;flex-wrap: wrap;box-sizing: border-box;border-collapse: collapse;" class="m-b-10"> 
								<div v-for="(value,index) in item.rubricInfos" :key="value.RubricID" style="width: 60px;border:1px solid #ccc;margin-bottom:-1px;margin-right: -1px;" class="pd-10 flex-ac-jc tihao" :style="{backgroundColor:value.userAnswer !=='' && value.userAnswer != null?'#9dddff':'#fff'}" @click="scrollToQuestion(value.tihao)"  >
									{{value.tihao}}
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="18">
				<div class="pd-20" style="font-size: 18px;">
					<div v-if="answerList[tmIndex].tmType == '27'">
						<span v-if="answerList[tmIndex].fIndex == 0">
							一、
						</span>
						<span v-else-if="answerList[tmIndex].fIndex == 1">
							二、
						</span>
						<span v-else>
							三、
						</span>
						单选题 （{{'共'+answerList[tmIndex].num+'题,共'+answerList[tmIndex].score+'分'}}）
					</div>
					<div v-else-if="answerList[tmIndex].tmType == '28'">
						<span v-if="answerList[tmIndex].fIndex == 0">
							一、
						</span>
						<span v-else-if="answerList[tmIndex].fIndex == 1">
							二、
						</span>
						<span v-else>
							三、
						</span>
						多选题 （{{'共'+answerList[tmIndex].num+'题,共'+answerList[tmIndex].score+'分'}}）
					</div>
					<div v-else-if="answerList[tmIndex].tmType == '29'">
						<span v-if="answerList[tmIndex].fIndex == 0">
							一、
						</span>
						<span v-else-if="answerList[tmIndex].fIndex == 1">
							二、
						</span>
						<span v-else>
							三、
						</span>
						判断题 （{{'共'+answerList[tmIndex].num+'题,共'+answerList[tmIndex].score+'分'}}）
					</div>
				</div>
				<div style="height: 50vh;">
					<div v-if="answerList[tmIndex].tmType == '27'" >
						<danxuan  :content="answerList[tmIndex]" :index="tmIndex" :fIndex="i" :show="show" @chooseXx="chooseDanx">
						</danxuan>
					</div>
					<div v-else-if="answerList[tmIndex].tmType == '28'" >
						<duoxuan  :content="answerList[tmIndex]" :index="tmIndex" :fIndex="i" :show="show" @chooseXx="chooseDuox">
						</duoxuan>
					</div>
					<div v-else-if="answerList[tmIndex].tmType == '29'" >
						<panduan :content="answerList[tmIndex]" :index="tmIndex" :fIndex="i" :show="show" @chooseXx="choosePand">
						</panduan>
					</div>
				</div>
				<div class="flex-ac-jc">
					  <el-button type="primary" class="m-r-20" @click="back">上一题</el-button>
					  <el-button type="primary" class="m-r-20" @click="next">下一题</el-button>
					  <el-button type="danger" @click="submitSj">提交试卷</el-button>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import danxuan from "./danxuan.vue"
	import duoxuan from "./duoxuan.vue"
	import panduan from "./panduan.vue"
	import {
		submitDaan,
		autoSave
	} from "@/api/jianliyuan/index"
	export default {
		name: "Zhuti",
		props: {
			content: { // 传入的地址
				type: Object,
				default: null,
			},
			sjConfig: {
				type: Object,
				default: null
			},
			personId:{
				type:Number,
				default:null
			},
			userScore:{
				type:Object,
				default:null
			}
		},
		components: {
			danxuan,
			duoxuan,
			panduan
		},
		data() {
			return {
				show: false,
				answerList: [],
				allNum: null,
				min:null,
				second:59,
				miao:59,
				ti:null,
				startTime:null,
				tmList:[],//题目列表
				tmIndex:0,//题目索引
				tmNum:0,//题目数量
				saveTi:null,
				saveTime:null,
				
			};
		},
		computed: {
			
		},
		mounted() {   
			// this.startTime = this.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')
			if(this.userScore == null){
				this.startTime = this.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')
				this.min = this.sjConfig.ExamTime-1
			}else{
				this.startTime = this.userScore.StartTime
				let start = new Date(this.userScore.StartTime).getTime()
				let now = new Date().getTime()
				let cha = Math.floor((now-start)/1000) 
				this.min = this.sjConfig.ExamTime-1-Math.floor(cha/ 60)
				this.second =60 - cha % 60; 
			}
			if(this.sjConfig.startTime == null){
				this.startTime = this.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}')
				this.min = this.sjConfig.ExamTime-1
			}else{
				this.startTime = this.sjConfig.startTime
				let start = new Date(this.sjConfig.startTime).getTime()
				let now = new Date().getTime()
				let cha = Math.floor((end-start)/1000)
				this.min =  Math.floor(cha/ 60)
				this.second = cha % 60; 
			}
			if(this.sjConfig.AutoSave != 0 && this.sjConfig.AutoSave != "" && this.sjConfig.AutoSave != null ){
				this.saveTime = this.sjConfig.AutoSave*60 
				this.zdSave()
			} 
			this.getAllNum()
			this.min = this.sjConfig.ExamTime-1
			this.ti = setInterval(()=>{
				this.second --
				if(this.second == 59){
					this.min --
					if(this.min == 0){
						clearInterval(this.ti) 
						this.$msgbox({
						    title: '提示',
						    message:"答题时间已到，请交卷。",
						    showCancelButton: true,
						    confirmButtonText: '交 卷',
							showCancelButton:false,
							showClose:false,
						    beforeClose: (action, instance, done) => {
						        if (action === 'confirm') {
						            instance.confirmButtonLoading = true;
						            instance.confirmButtonText = '交卷中...';
						            submitDaan({
										startTime:this.startTime,
										endTime:this.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}'),
										paperInfo:this.sjConfig,
						            	list:arry,
						            	personId:this.personId,
						            	userId:this.$store.state.user.userInfo.ID
						            }).then(res=>{
						            	done();
										instance.confirmButtonLoading = false;
										setTimeout(()=>{
											this.tc(res.data)
										},50)
						            })
						        } else {
									done();
						        }
						    }
						})
					}
				}
				if(this.second>=10){
					this.miao = this.second
				}else if(this.second<10 ){
					this.miao = '0'+this.second
				}
				if(this.second == 0){
					this.second = 60
				}
				
			},1000)
		},
		beforeDestroy(){
			clearInterval(this.saveTi)
			clearInterval(this.ti)
		},
		methods: {
			getAllNum() {
				let num = 0
				let score = 0
				for (let i=0;i<this.content.length;i++) {
					this.answerList.push([])
					for (let q in this.content[i]) { 
						this.answerList[i] = this.content[i][q].rubricInfos.map(item => {
							item.fIndex = i
							item.tmType = q
							item.num = this.content[i][q].count
							item.score = this.content[i][q].score
							return item
						})
						num += this.content[i][q].count
						score += this.content[i][q].score
					}
				}
				this.answerList = [].concat(...this.answerList) 
				this.tmNum = num
				this.allNum = "总共" + num + "题 共" + score + "分"  
			},
			//选择单选
			chooseDanx(e) { 
				this.answerList[e.tihao-1].userAnswer = e.xx
			},
			//多选
			chooseDuox(e) {
				this.answerList[e.tihao-1].userAnswer = e.xx
			},
			//判断
			choosePand(e) {
				this.answerList[e.tihao-1].userAnswer = e.xx
			},
			//下一题
			next(){
				if(this.tmIndex != this.answerList.length){
					this.tmIndex ++
				}
			},
			//上一题
			back(){
				if(this.tmIndex != 0){
					this.tmIndex --
				}
			},
			//提交试卷
			submitSj() {
				let arry = [].concat(...this.answerList) 
				for (let i in arry) {
					if (arry[i].userAnswer === "" || arry[i].userAnswer == null) {
						this.$msgbox({
						    title: '提示',
						    message:"题目未全部答完，是否交卷?",
						    showCancelButton: true,
						    confirmButtonText: '交 卷',
						    cancelButtonText: '取 消',
							showClose:false,
						    beforeClose: (action, instance, done) => {
						        if (action === 'confirm') {
						            instance.confirmButtonLoading = true;
						            instance.confirmButtonText = '交卷中...';
									clearInterval(this.saveTi)
						            submitDaan({
										startTime:this.startTime,
										endTime:this.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}'),
										paperInfo:this.sjConfig,
						            	list:arry,
						            	personId:this.personId,
						            	userId:this.$store.state.user.userInfo.ID
						            }).then(res=>{
						            	done();
										instance.confirmButtonLoading = false;
										setTimeout(()=>{
											this.tc(res.data)
										},50)
						            })
						        } else {
									done();
						        }
						    }
						})
						return
					}
				}
				this.$msgbox({
				    title: '提示',
				    message:"是否进行交卷?",
				    showCancelButton: true,
				    confirmButtonText: '交 卷',
				    cancelButtonText: '取 消',
					showClose:false,
				    beforeClose: (action, instance, done) => {
				        if (action === 'confirm') {
				            instance.confirmButtonLoading = true;
				            instance.confirmButtonText = '交卷中...';
							clearInterval(this.saveTi)
				            submitDaan({
								startTime:this.startTime,
								endTime:this.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}'),
								paperInfo:this.sjConfig,
				            	list:arry,
				            	personId:this.personId,
				            	userId:this.$store.state.user.userInfo.ID
				            }).then(res=>{
				            	done();
								instance.confirmButtonLoading = false;
								setTimeout(()=>{
									this.tc(res.data)
								},50)
				            })
				        } else {
							done();
				        }
				    }
				})
			},
			scrollToQuestion(index) {  
				this.tmIndex = index-1
			},  
			//成绩弹窗
			tc(data){
				const h = this.$createElement;
				if(data.PassState == 1){ 
					this.$msgbox({
					  title: '消息',
					  message: h('p', null, [
						h('span', null, `您的成绩是${data.TotalMark}分，`),
						h('i', { style: 'color: #67C23A' },'成绩合格' ),
						h('span',null,'，试卷详情请到“考试成绩”菜单进行查看。' ),
					  ]),
					  showCancelButton: false,
					  showClose:false,
					  closeOnClickModal:false,
					  closeOnPressEscape:false,
					  confirmButtonText: '确定',
					  cancelButtonText: '取消', 
					}).then(action => {
						this.$emit("subSuccess",data)
					});
				}else{ 
					this.$msgbox({
					  title: '消息',
					  message: h('p', null, [
						h('span', null, `您的成绩是${data.TotalMark}分，`),
						h('i', { style: 'color: #F56C6C' },'成绩不合格' ),
						h('span',null,'，试卷详情请到“考试成绩”菜单进行查看。' ),
					  ]),
					  showCancelButton: false,
					  showClose:false,
					  closeOnClickModal:false,
					  closeOnPressEscape:false,
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  
					}).then(action => {
						this.$emit("subSuccess",data)
					});
				}
			},
			//自动保存
			zdSave(){
				this.saveTi = setInterval(()=>{
					if(this.saveTime == 0){
						this.baocun()
						return
					}
					this.saveTime--
					
					console.log(this.saveTime)
				},1000)
			},
			baocun(){
				clearInterval(this.saveTi)
				let arry = [].concat(...this.answerList)
				autoSave({
					startTime:this.startTime,
					endTime:this.parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}'),
					paperInfo:this.sjConfig,
					list:arry,
					personId:this.personId,
					userId:this.$store.state.user.userInfo.ID
				}).then(res=>{ 
					this.saveTime = this.sjConfig.AutoSave*60
					this.zdSave()
				}).catch(error => { 
					this.saveTime = this.sjConfig.AutoSave*60
					this.zdSave()
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.b-t-2{
		border-top: 2px solid #ccc;
	}
	.b-t-1{
		border-top: 1px solid #ccc;
	}
	.b-l-2{
		border-left: 2px solid #ccc;
	}
	.b-l-1{
		border-left: 1px solid #ccc;
	}
	.b-r-2{
		border-right: 2px solid #ccc;
	}
	.b-r-1{
		border-right: 1px solid #ccc;
	}
	.b-b-2{
		border-bottom: 2px solid #ccc;
	}
	.b-b-1{
		border-bottom: 1px solid #ccc;
	}
	.tihao:hover{
		cursor: pointer;
	}
</style>