<template>
	<view class="web_box">
		<u-navbar height="44" leftIcon="arrow-left" leftIconColor="#000" @leftClick="leftClick" :autoBack="true" bgColor="#fff">
		</u-navbar>
		<view class="top">
			<view class="hflex acenter jbetween">
				<view class="name">{{course.name}}</view>
				<view class="text_style1"><span style="font-size: 40rpx;">{{index}}</span>/{{examPaper.length}}</view>
			</view>
			<view class="hflex acenter jbetween" style="padding-top: 20rpx;">
				<view class="hflex acenter">
					<image src="/static/images/index/clock.png" mode="widthFix" style="width: 44rpx;padding-right: 16rpx;"></image>
					<u-count-down :time="course.answer_time * 60 * 1000" format="HH:mm:ss" autoStart @finish="finish"></u-count-down>
				</view>
				<view class="hflex acenter">
					<view class="answer">
						<u-icon name="order" color="#333333" size="22" @click="open"></u-icon>
					</view>
					<!-- <u-icon v-if="examPaper[index - 1].is_collect == 0" name="star-fill" color="#FA6400" size="22" @click="collect"></u-icon>
					<u-icon v-else name="star" color="#333333" size="22" @click="collect"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="center">
			<!-- <view class="type" v-if="examPaper[index - 1].type == 1">单选题</view> -->
			<view class="type" v-if="examPaper[index - 1].type == 1">单选题</view>
			<view class="type" v-else-if="examPaper[index - 1].type == 2">多选题</view>
			<view class="type" v-else-if="examPaper[index - 1].type == 3">判断题</view>
			<view class="content">
				<u-parse :content="examPaper[index - 1].title"></u-parse>
			</view>
			<view class="">
				<block v-for="(item,inx) in examPaper[index - 1].items" :key="inx">
					<view class="hflex acenter cell" @click="select(inx)">
						<view class="options" :class="choice.indexOf(examPaper[index - 1].items[inx].ladder_title) != -1 ? 'active' : ''">{{item.ladder_title}}</view>
						<view class="options_value">{{item.ladder_num}}</view>
					</view>
				</block>
			</view>
			<view class="changebtn">
				<view v-if="index === examPaper.length" class="btn1" @click="submit">交卷</view>
				<view v-else class="btn1" @click="nextExam">下一题</view>
			</view>
		</view>
		<!-- 离开考试 -->
		<u-popup :show="showLeave" @close="close1" mode="center">
			<view class="popup vflex acenter jcenter">
				<view class="popup_title">正在考试中</view>
				<view class="popup_content">是否确定离开</view>
				<view class="hflex acenter jcenter">
					<view class="leftBtn" @click="leave">确定离开</view>
					<view class="rightBtn" @click="close1">继续答题</view>
				</view>
			</view>
		</u-popup>
		<!-- 答题卡 -->
		<u-popup :show="showSheet" @close="close2" mode="bottom" :round="10">
			<view class="popup_sheet vflex acenter jcenter">
				<view class="hflex acenter jbetween" style="width: 100%;">
					<view></view>
					<view class="popup_title">答题卡</view>
					<u-icon name="close" color="#333333" size="18" @click="close2"></u-icon>
				</view>
				<view class="hflex acenter fwrap">
					<block v-for="(item,inx) in examPaper" :key="inx">
						<view class="options options_item" :class="item.state ? 'active' : ''" @click="toTest(inx)">{{inx + 1}}</view>
					</block>
				</view>
				<view class="sheet_bottom">
					<view class="sheet_submit" @click="submitExam">交卷</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				id: 1,
				log_id: 3,
				examPaper: [],
				course: {},
				index: 1,
				showLeave: false,
				choice: '',
				values: [],
				answer: [],
				showSheet:false
			}
		},
		onLoad(options) {
			this.id = options.id
			this.startExam(this.id)
			this.getExamTime(this.id)
		},
		methods: {
			// 离开考试
			leftClick() {
				this.showLeave = true
			},
			// 确定离开
			leave() {
				
			},
			// 关闭
			close1() {
				this.showLeave = false
			},
			// 关闭答题卡
			close2() {
				this.showSheet = false
			},
			// 开始考试
			startExam(id) {
				var that = this
				$api.req({
					url: '/api/User/startQuestions',
					data: {
						id: id
					}
				}, function(res) {
					if (res.code == 1) {
						that.id = res.data.course_id
						that.log_id = res.data.log_id
						that.getQuestions()
					} else {
						$api.info(res.msg)
						$api.jump(-1)
					}
				})
			},
			// 获取试题
			getQuestions() {
				var that = this
				$api.req({
					url: '/api/User/questionsList',
					data: {
						id: that.id
					}
				}, function(res) {
					if (res.code == 1) {
						that.examPaper = res.data
					}
				})
			},
			// 获取考试时间
			getExamTime(id) {
				var that = this
				$api.req({
					url: '/api/Index/courseDetail',
					data: {
						id: id
					}
				}, function(res) {
					if(res.code == 1) {
						that.course = res.data
					}
				})
			},
			// 打开答题卡
			open() {
				this.showSheet = true
			},
			// 选择答案
			select(option) {
				var that = this
				var index = that.index - 1
				if (that.examPaper[index].type !== 2) {
					that.choice = that.examPaper[index].items[option].ladder_title
					that.values = {
						id: that.examPaper[index].id,
						answer: that.choice
					}
				} else {
					that.choice = that.choice + that.examPaper[index].items[option].ladder_title + '、'
					that.values = {
						id: that.examPaper[index].id,
						answer: that.choice
					}
				}
			},
			// 去答题卡对应题目
			toTest(inx) {
				var that = this
				that.choice = ''
				that.values = []
				that.index = inx + 1
				that.showSheet = false
				console.log("values: ",that.values);
				console.log("answer:",that.answer);
				// for (let i = 0;i<that.answer.length;i++) {
				// 	if (that.index == that.answer[i].id) {
				// 		that.values = {
				// 			id: that.answer[i].id,
				// 			answer: that.answer[i].answer
				// 		}
				// 	}
				// }
			},
			// 下一题
			nextExam() {
				var that = this
				console.log(that.values.answer)
				if (that.values !== {} && that.values.length !== 0) {
					if(that.values.answer.charAt(that.values.answer.length - 1) == '、') {
						that.values.answer = that.values.answer.substr(0,that.values.answer.length-1);
					}
				} else {
					that.values = {
						id: that.examPaper[that.index - 1].id,
						answer: ''
					}
				}
				if (that.answer.length > 0) {
					console.log(typeof(that.answer));
					for (let i = 0;i<that.answer.length;i++) {
						if (that.values.id == that.answer[i].id) {
							that.answer[i].answer = that.values.answer
							that.values = []
							break;
						}
					}
					console.log(1111);
					console.log(that.values);
					if (that.values.length !== 0) {
						that.answer.push(that.values)
					}
					
				} else {
					that.answer.push(that.values)
				}
				if (that.choice != '') {
					that.examPaper[that.index - 1].state = true
				}
				that.choice = ''
				that.values = []
				that.index ++;
			},
			// 最后一题
			submit() {
				/* if(this.values.answer.charAt(this.values.answer.length - 1) == '、') {
					this.values.answer = this.values.answer.substr(0,this.values.answer.length-1);
				}
				this.answer.push(this.values)
				if (this.choice != '') {
					this.examPaper[this.index - 1].state = true
				} */
				var that = this
				console.log(that.values.length)
				if (that.values !== {} && that.values.length !== 0) {
					if(that.values.answer.charAt(that.values.answer.length - 1) == '、') {
						that.values.answer = that.values.answer.substr(0,that.values.answer.length-1);
					}
				} else {
					that.values = {
						id: that.examPaper[that.index - 1].id,
						answer: ''
					}
				}
				if (that.answer.length > 0) {
					console.log(typeof(that.answer));
					for (let i = 0;i<that.answer.length;i++) {
						if (that.values.id == that.answer[i].id) {
							that.answer[i].answer = that.values.answer
							that.values = []
							break;
						}
					}
					console.log(1111);
					console.log(that.values);
					if (that.values.length !== 0) {
						that.answer.push(that.values)
					}
					
				} else {
					that.answer.push(that.values)
				}
				if (that.choice != '') {
					that.examPaper[that.index - 1].state = true
				}
				// this.choice = ''
				// this.values = []
				this.open()
			},
			// 倒计时结束
			finish() {
				console.log("倒计时结束，自动交卷");
				this.submitExam()
				// this.submitExam()
			},
			// 交卷
			submitExam() {
				var that = this
				var all = true
				console.log(typeof(that.answer))
				let obj = []
				if(that.answer.length>0) {
					for (let i=0;i<that.answer.length;i++) {
						if (obj.indexOf(that.answer[i].id) == -1) {
							obj.push(that.answer[i].id)
							if(that.answer[i].answer == "") {
								all=false
							}
						} else {
							that.answer.splice(i,1)
						}
					}
				} else {
					$api.info("您还有题目未填")
				}
				console.log(that.answer)	
				
				if(all) {
					// $api.info("可以交卷")
					that.answer = JSON.stringify(that.answer)
					$api.req({
						url: '/api/User/subQuestions',
						data: {
							id: that.id,
							log_id: that.log_id,
							answer: that.answer
						}
					}, function(res) {
						if(res.code == 1) {
							$api.jump('/pages/index/exam/submit?data=' + JSON.stringify(res.data) + '&log_id=' + that.log_id, 1)
						} else {
							$api.info(res.msg)
						}
						
					})
				} else{
					$api.info("您还有题目未填")
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 36px 16px 100rpx 0;
		}
		.top {
			width: 100%;
			margin: 14rpx 0 14rpx;
			box-sizing: border-box;
			padding: 16rpx 30rpx 16rpx;
			background: #FFFFFF;
		}
		.name {
			font-size: 34rpx;
			font-weight: 500;
			color: #999999;
		}
		.text_style1 {
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
		.answer {
			padding-right: 38rpx;
		}
		.center {
			width: 100%;
			box-sizing: border-box;
			padding: 42rpx 30rpx;
			background: #FFFFFF;
		}
		.type {
			width: 126rpx;
			height: 40rpx;
			background: #2988FE;
			border-radius: 16px;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
		}
		.content {
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx 0 60rpx;
		}
		.options {
			width: 72rpx;
			height: 72rpx;
			border: 1px solid #979797;
			border-radius: 50%;
			font-size: 40rpx;
			font-weight: 600;
			color: #666666;
			text-align: center;
			line-height: 72rpx;
		}
		.options_value {
			font-size: 36rpx;
			font-weight: 400;
			color: #333333;
			letter-spacing: 1px;
			padding-left: 26rpx;
		}
		.cell {
			padding: 20rpx;
		}
		.active {
			background: #2988FE;
			color: #FFFFFF;
		}
		.changebtn {
			width: 100%;
			margin-top: 144rpx;
		}
		.btn1 {
			width: 690rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 40rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		
		.popup {
			width: 572rpx;
			background: #FFFFFF;
			border-radius: 24px;
			box-sizing: border-box;
			padding: 28rpx 32rpx;
		}
		.popup_sheet {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24px;
			box-sizing: border-box;
			padding: 28rpx 32rpx;
		}
		.popup_title {
			font-size: 40rpx;
			font-weight: 500;
			color: #2988FE;
		}
		.popup_content {
			font-size: 40rpx;
			font-weight: 400;
			color: #333333;
			box-sizing: border-box;
			padding: 48rpx 68rpx;
		}
		.options_item {
			margin: 60rpx 66rpx 0 0;
		}
		.options_item:nth-child(5n) {
			margin: 60rpx 0 0 0;
		}
		.sheet_bottom {
			margin-top: 106rpx;
		}
		.sheet_submit {
			width: 690rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 40rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		.leftBtn {
			width: 256rpx;
			height: 80rpx;
			background: rgba(41,136,254,0.2);
			border-radius: 20px 0 0 20px;
			font-size: 36rpx;
			font-weight: 500;
			color: #2988FE;
			text-align: center;
			line-height: 80rpx;
		}
		.rightBtn {
			width: 256rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 0px 20px 20px 0px;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		
	}
</style>