<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+'upx'}">
			<view class="name">
				<view>{{currentIndex+1}}·{{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:20upx"></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() {
			uni.setNavigationBarColor({
			    frontColor: '#ffffff', // 前景色值，包括按钮、标题、状态栏的颜色
			    backgroundColor: '#4c8af3', // 背景颜色值，包括背景、按钮的颜色
			    animation: { // 动画效果
			        duration: 400,
			        timingFunc: 'easeIn'
			    },
			    success: function() {
			        console.log('颜色设置成功');
			    },
			    fail: function(err) {
			        console.error('颜色设置失败', err);
			    }
			});
			//#ifdef MP-WEIXIN
			uni.hideHomeButton()
			//#endif
			this.start_time= (new Date()).getTime()
			this.currentExam = uni.getStorageSync('currentExam')
			console.log('this.currentExam',this.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,{detail:questions_}).then(res=>{
					uni.showToast({
						title:"提交成功",
						icon:"none"
					})
					this.currentExam.score = res.score;
					console.log('this.currentExam',this.currentExam)
					uni.setStorageSync('currentExam',this.currentExam)
					uni.hideLoading()
					uni.reLaunch({
						url:'/pages/exam/result'
					})
					
				}).catch(e=>{
					if(res.msg){
						uni.showModal({
							title:'提交失败',
							content:res.msg,
							showCancel:false,
							success(res) {
								uni.reLaunch({
									url:'/pages/exam/exam'
								})
							}
						})
					}
				})
			},
			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: #f3f4f6;
	}
	.content{
		margin-top:8upx;
		.name {
			font-size:34upx;
			padding: 25upx 30upx;
			color:#606266;
			line-height:130%;
			background-color: #FFFFFF;
		}
		.options {
			margin-top:8upx;
			background-color: #FFFFFF;
			padding: 6upx 30upx;
			.option {
				padding: 10upx 0upx;
				display: flex;
				font-size: 36upx;
				.option-item1{
					justify-content: flex-start
				}
				.option-item2{
					justify-content: flex-start;
					color:#303133;
				}
			}
			
		}
	}

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

</style>