<template>
	<view class="main">
		<view class="page-info">
			 <view class="head-info">
			 	<view class="title">
			 		{{name}}
			 	</view>
				<view class="info">
					<view>考试时间：{{duration}}分钟</view>
					<view>总分：{{score}}</view>
				</view>
				<view class="btn" @click="subExam">
					交卷
				</view>
			 </view>
			 
			 <view class="list">
			 	 <view class="item" v-for="(item,index) in list" :key="index">
			 	 	<view class="question_name">
			 	 		{{index+1}}.{{item.question_name}}({{item.score}}分)
			 	 	</view>
					<view class="postion_list" v-if="item.question_type != 1">
                        <view v-for="(a,i) in item.q_options" :key="i">{{a.item}}.{{a.value}}</view>
					</view>

					<view class="answer" v-if="item.question_type == 1 ">
						<input v-model="answer[index].answer" placeholder="请输入">
					</view>
					<view class="answer" v-if="item.question_type == 2 || item.question_type == 4">
						<radio-group class="answer-list">
							<view v-for="(a,i) in item.q_options" :key="i">
								<radio 
								:value="a.value" 
								:color="color" style="transform:scale(0.7)" 
								:checked="answer[index].answer == a.item"
								@click="changeRadio(index,a.item,i)"/>
								{{a.item}}
							</view>
						</radio-group >
					</view>
					<view class="answer" v-if="item.question_type == 3">
						<checkbox-group  class="answer-list">
							<view  v-for="(a,i) in item.q_options" :key="i">
								<checkbox :value="a.value" 
								:activeBackgroundColor="color" 
								:color="checkcolor" 
								style="transform:scale(0.7)" 
								@click="changeChechBox(index,a.item,i)"/>
								{{a.item}}
							</view>
						</checkbox-group>
			
					</view>
				
			 	 </view>
			 </view>
			 
		</view>
		<view class="times">
			<template v-if="!is_end">
				<view class="title" >
					距离考试结束还有：
				</view>
				<view class="time-info">
					{{time}}
				</view>
			</template>
			<template v-else>
				<view>考试已结束</view>
			</template>
			
		</view>

		<uni-popup ref="popup" type="center" :mask-click="false"  :is-mask-click="false">
			<view class="popinfo">
				<view class="title">提示</view>
				<view class="info">
					<view>
						考试已结束，请有序离开考场
					</view>
					<view>
						您的成绩为：<span class="pscore">{{scoreTotal}}</span>分
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
	export default {
		data() {
			return {
				m_id:'',
				checkcolor:'#fff',
				color:'#5179ef',
				name:'',
				duration:'',
				score:'',
				list:[],
				answer:[],
				time:'',
				timer:'',
				leval_time:0,
				is_end:0,
				question_num:0,
				scoreTotal:0
			};
		},
		computed: {
		  ...mapState(["hasLogin", "userinfo"]),
		},
		onLoad({m_id}) {
			this.m_id = m_id
			this.getQuestion()
			
		},
		onShow() {
			  if(!this.hasLogin)
			  {
				uni.redirectTo({
					url: '/pages/common/login/login?href2=train/examination/index?m_id='+this.m_id
				});
				return false;
			  }
		},
		methods:{
			subExam(){
               if(this.is_end) return;
				uni.showModal({
					title: '提示',
					content: '提交后不可修改，确认提交吗',
					success: res=> {
						if (res.confirm) {
							this.subExamDo()
						} 
					}
				});
			},
			subExamDo(){
				uni.showModal({
					title: '再次提示',
					content: '再次确认将交卷，确认提交吗',
					success: res=> {
						if (res.confirm) {
							this.subExamDone()
						} 
					}
				});
			},
			subExamDone(){
				clearInterval(this.timer)
				this.is_end = 1
				for(let i=0;i<this.question_num;i++)
				{
					this.list[i].user_answer = this.answer[i].answer
					if(this.list[i].answer == this.answer[i].answer)
					{
						this.list[i].user_score = this.list[i].score
						this.scoreTotal= parseInt(this.scoreTotal)+ parseInt(this.list[i].score)
					}else{
						this.list[i].user_score = 0
					}
				}
				this.$refs.popup.open()
				let form={}
				form.id = this.m_id
				form.duration = this.duration
				form.leval_time = this.leval_time
				form.score = this.score
                form.scoreTotal = this.scoreTotal
				form.list = this.list
				getApp().globalData.request.post(
				  "learn/exam/submitQuestion",
				  form
				).then(res=>{
					if(res.code == -1)
					{
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}
				})
			},
			changeChechBox(index,item,i)
			{
				let checkBox = this.answer[index].checkbox
				if(checkBox.includes(item))
				{
					checkBox.splice(checkBox.indexOf(item),1)
				}else{
					checkBox.push(item)
				}
				 checkBox.sort()
				 this.answer[index].checkbox = checkBox
				 this.answer[index].answer = this.answer[index].checkbox.join(',')
			},
			
			changeRadio(index,item,i){
				this.answer[index].answer = item
			},
			getQuestion(){
				getApp().globalData.request.get(
				  "learn/exam/getQuestion",
				  {id:this.m_id}
				).then(res=>{
					for(let i=0;i<res.data.question_num;i++)
					{
						let data={id:i,answer:'',checkbox:[]}
						this.answer.push(data)
					}
					this.question_num = res.data.question_num
					this.name =res.data.name
					this.duration =res.data.duration
					this.score = res.data.score
					this.list =res.data.list
					this.leval_time = parseInt(res.data.duration)*60;
				    this.startExam()
				})
			},
			startExam()
			{
				let that=this
				this.timer = setInterval(()=>{
					that.leval_time--
					if(that.leval_time <= 0)
					{
						this.subExamDone()
					}else{
						let m = parseInt(that.leval_time/60)
						let s = that.leval_time%60
						that.time = m+'分钟'+s+'秒'
					}
				},1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popinfo{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 500px;
		height: 300px ;
		padding: 20px;
		border-radius: 20px;
		background-color: #fff;
		.title{
			font-size: 38px;
		}
		.info{
			margin-top: 20px;
			font-size: 26px;
			view{
				margin-top: 20px;
			}
			.pscore{
				font-size: 36px;
				color: red;
			}
		}
	}
 .main{
	 font-size: 28rpx;
	 background-color: #f4f9ff;
 }
 .page-info{
	 position: relative;
	 width: 70%;
	 min-height: 500px;
	 margin-left: 15%;
	 margin-top: 20px;
	 padding: 0 20px;
	 background-color: #FFF;
 }
 .head-info{
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 padding: 10px 0;
	 background-color: #FFF;
	 .title{
		 font-size: 32rpx;
		 font-weight: 700;
	 }
	 .info{
		 display: flex;
		 view{
			 margin: 5px 10px;
		 }
	 }
	 .btn{
		 position: absolute;
		 top:6px;
		 right:10px;
		 padding: 8px 16px;
		 border: 1px solid #5179ef;
		 border-radius: 4px;
		 color:#fff;
		 background-color: #5179ef;
	 }
 }
 .list{
	 margin-top: 20px;
	 .item{
		 padding: 14px 0;
		 border-top: 1px solid #5179ef;
		 .question_name{
			 margin-bottom: 10px;
		 }
		 .postion_list{
			 view{
				 margin: 4px 0;
			 }
		 }
		 .answer{
			 margin-top: 10px;
			 .answer-list{
				 display: flex;
				 view{
					 display: flex;
					 align-items: center;
					margin-right: 10px;
				 				
				 }
			 }

		 }
	 }
 }
.times{
	position: absolute;
	top:50px;
	left:50px;
	view{
		margin: 5px 0;
	}
}
</style>
