<template>
	<view>
		<!-- 大标题 -->
		<view class="header" id="header">
			<span class="header-button">第{{currentIndex+1}}/{{currentExam.questions_.length}} 题</span>

		</view>
		<!-- 小标题栏 -->
		<view class="sub-header">
			<u-row>
				<u-col span="4">
					<u-count-down :timestamp="currentExam.paper_.limit*60" :show-days="false" @end="end" border-color="#2979ff">
					</u-count-down>
				</u-col>
				<u-col span="4">
					<view style="text-align: center;"><span class="header-card">{{currentQuestion.type}}</span></view>
				</u-col>
				<u-col span="4">
					<view style="text-align: right;"><span class="submitButton" @click='handleSubmit()' >交卷</span></view>
				</u-col>
			</u-row>	
		</view>
		<scroll-view class="content" scroll-y="true" v-bind:style="{height:scollHeight+'rpx'}">
			<view class="name">
				<view>{{currentIndex}}·{{currentQuestion.name}}</view>
				<!-- <rich-text :nodes="currentQuestion.name"></rich-text> -->
				<view v-if="currentQuestion.img">
					{{currentQuestion.img}}
				</view>
			</view>
			<view class="options">
				<checkbox-group @change="checkboxGroupChange" v-if="currentQuestion.type=='多选'">
					<label class="option" v-for="item in currentOptions" :key="item.id" >
						<view class="option-item1">
							<checkbox :value="item.value" :checked="item.checked" color="#2979ff"/>
						</view >
						<view class="option-item2">{{item.value}}.{{item.text}}</view>
					</label>
				</checkbox-group>
				<radio-group v-else @change="checkboxGroupChange">
					<label class="option" v-for="item in currentOptions" :key="item.id">
						<view class="option-item1">
							<radio :value="item.value" :checked="item.checked" color="#2979ff"></radio>
						</view>
						<view class="option-item2">
							{{item.value}}.{{item.text}}
						</view>
					</label>
				</radio-group>
			</view>
			<view style="height:20rpx"></view>
		</scroll-view>
		<u-popup v-model="showM" mode="bottom" height="40%">
			<view class="questionArea" style="display:flex">
				<block v-for="(item, index) in currentExam.questions_" :key="index">
					<view class="questionItem questionItem-select" v-if="item.user_answer" @click="jumpQuestion(index)">{{index+1}}</view>
					<view class="questionItem questionItem-unselect" v-else @click="jumpQuestion(index)">{{index+1}}</view>
				</block>
			</view>
		</u-popup>
		<!-- 底部栏 -->
		<view class="footer" id="footer">
			<u-button @click='previousQ()' throttle-time="200" :plain="true" type="primary">上一题</u-button>
			<u-button @click="showM = !showM" type="primary">答题卡</u-button>
			<u-button @click='nextQ()' throttle-time="200" :plain="true" type="primary">下一题</u-button>
		</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentExam:{questions_:[]},
				currentIndex:0,
				currentOptions:[],
				currentQuestion:{type:'单选'},
				showM:false,
				keyid:0,
				start_time:null,
				scollHeight:0
				}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			uni.hideHomeButton()
			//#endif
			this.start_time= (new Date()).getTime()
			this.currentExam = uni.getStorageSync('currentExam')
			let res = uni.getSystemInfoSync();
			let ratio = 750 / res.windowWidth;
			this.scollHeight = res.windowHeight*ratio - 230
			this.initQuestion()
		},
		methods: {
			end(){
				var that = this
				uni.showModal({
				    title: '警告',
				    content: '时间到,请交卷',
					showCancel:false,
				    success: function (res) {
				        if (res.confirm) {
				            that.handIn();
				        } 
				    }
				});
				
			},
			change(){
				
			},
			handleSubmit(){
				var that = this
				let questions = that.currentExam.questions_;
				for(var i=0;i<questions.length;i++){
					if(!questions[i].user_answer){
						uni.showModal({
						    title: '警告',
						    content: '答卷未完成,确认交卷吗?',
						    success: function (res) {
						        if (res.confirm) {
						            that.handIn();
						        } 
						    }
						});
						return
					}
				}
				uni.showModal({
				    title: '提示',
				    content: '确认交卷吗?',
				    success: function (res) {
				        if (res.confirm) {
							//直接交卷，不需要判卷了
				            that.handIn();
				        } 
				    }
				});
			},
			handIn(){
				var that = this
				uni.showLoading({
					title:'正在提交...',
					mask:true
				})
				let questions_ = [];
				for (let i = 0; i < that.currentExam.questions_.length; i++) {
					let obj = {};
					obj.id=that.currentExam.questions_[i].id;
					obj.user_answer=that.currentExam.questions_[i].user_answer;
					questions_.push(obj);
				}
				that.$u.api.submitExam(that.currentExam.examrecord,{questions_:questions_}).then(res=>{
					uni.setStorageSync('currentExam',res.data)
					uni.hideLoading()
					uni.redirectTo({
						url:'/pages/exam/result'
					})
				}).catch(e=>{
					if(res.msg){
						uni.showModal({
							title:'提交失败',
							content:res.msg,
							showCancel:false,
							success(res) {
								uni.reLaunch({
									url:'/pages/index/index'
								})
							}
						})
					}
					
				})
				// let questions = this.currentExam.questions
				// let score=0
				// for(var i=0, lenI =questions.length;i<lenI;i++){
				// 	var ret=this.panTi(questions[i])
				// 	questions[i].is_right=ret.is_right
				// 	questions[i].score=ret.score
				// 	score = score+ret.score
				// }
				// this.currentExam.score = score
				// this.currentExam.start_time = this.$u.timeFormat(this.start_time, 'yyyy-mm-dd hh:MM:ss');
				// this.currentExam.end_time = this.$u.timeFormat((new Date()).getTime(), 'yyyy-mm-dd hh:MM:ss')
				// this.currentExam.took = Math.floor(((new Date()).getTime() - this.start_time) / 1000)
				// if(score>=this.currentExam.pass_score){
				// 	this.currentExam.is_pass=true
				// }else{
				// 	this.currentExam.is_pass=false
				// }
				// if(this.vuex_user.id){
					
				// }
				// else{
				// 	uni.setStorageSync('currentExam',this.currentExam)
				// 	uni.hideLoading()
				// 	uni.redirectTo({
				// 		url:'/pages/exam/result'
				// 	})
				// }
			},
			panTi(tm_current) {
			    // 返回当前题目是否正确,得分多少
			    let is_right = false, score = 0
			    if (tm_current.type == '多选') {
			      if (tm_current.user_answer) {
			        if (tm_current.user_answer.sort().toString() == tm_current.right.sort().toString()) {
			          is_right = true
			          score = tm_current.total_score
			        }
			      }
			    } else {
			      if(tm_current.right == tm_current.user_answer){
			        is_right = true
			        score = tm_current.total_score
			      }
			    }
			    return {'is_right':is_right,'score':score}
			  },
			initQuestion(){
				var currentQuestion = this.currentExam.questions_[this.currentIndex];
				this.currentQuestion = currentQuestion;
				let options_ = [];
				let origin = currentQuestion.options;
				this.currentOptions = [];
				for (let key in origin) {
				      let option = {
						  value:key,
						  text:origin[key],
						  id: this.keyid++,
						  checked:false
					  }
				      if (currentQuestion.user_answer) {
				              if (key == currentQuestion.user_answer || currentQuestion.user_answer.indexOf(key) != -1) {
				                option.checked = true
				              }
				            } else {
				              option.checked = false
				            }
				      options_.push(option)
				}
				this.currentOptions = options_
			},
			nextQ(){
				let index = this.currentIndex + 1
				 if(index<this.currentExam.questions_.length){
					 this.currentIndex = index
					 this.initQuestion()
				 }
			},
			previousQ(){
				let index = this.currentIndex - 1
				 if(index >= 0){
					 this.currentIndex = index
					 this.initQuestion()
				 }
			},
			checkboxGroupChange(e){
				// debugger;
				console.log(e)
				this.currentExam.questions_[this.currentIndex].user_answer = e.detail.value
			},
			jumpQuestion(index){
				this.currentIndex = index
				this.initQuestion()
				this.showM = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
	.content{
		margin-top:8rpx;
		.name {
			font-size:34rpx;
			padding: 25rpx 30rpx;
			color:$u-content-color;
			line-height:130%;
			background-color: #FFFFFF;
		}
		.options {
			margin-top:8rpx;
			background-color: #FFFFFF;
			padding: 6rpx 30rpx;
			.option {
				padding: 10rpx 0rpx;
				display: flex;
				font-size: 36rpx;
				.option-item1{
					justify-content: flex-start
				}
				.option-item2{
					justify-content: flex-start;
					color:$u-main-color;
				}
			}
			
		}
	}

	.header {
		width: 750rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: $theme-color;
		background-color: #FFFFFF;
	
		&-button {
			position: absolute;
			right: 10rpx;
			font-size:34rpx;
			font-weight: bold;
			color: #000;
		}
	
		.scoreText {
			color: #00b060;
			font-size: 35rpx;
		}
	}
	.sub-header {
		padding: 4rpx 20rpx;
		color: #000;
		font-size: 33rpx;
		font-weight: bold;
		background-color: #FFFFFF;
	}
	.submitButton{
		padding: 6rpx 20rpx;
		border-radius: 15rpx;
		font-weight: bold;
		color: #ffffff;
		background-color: $u-type-error;
	}
	.header-card {
		padding: 6rpx 20rpx;
		border-radius: 15rpx;
		color: #FFFFFF;
		background-color: $u-type-primary-dark;
	}
	.footer {
		width: 750rpx;
		height: 100rpx;
		padding: 30rpx 60rpx;
		position: fixed;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		box-sizing: border-box;
		color: #4c8af3;
		box-shadow: 0 0 5px 1px #eee;
		background-color: #FFFFFF;
	
		&-card {
			padding: 10rpx 20rpx;
			border: 1px solid $theme-color;
			border-radius: 15rpx;
			color: #FFFFFF;
			background-color: $theme-color;
		}
	}
	.questionArea {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	
		.questionItem {
			width: 80rpx;
			height: 80rpx;
			margin: 10rpx 22rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			text-align: center;
			border-radius: 50%;
			color: #ffffff;
		}
		.questionItem-select {
			background-color: $theme-color;	
		}
		
		.questionItem-unselect {
			background-color: #bbbbbb;
		}
	}
	

</style>