<template>
    <!--考试页面，用户在此页面一个试题一个试题的回答-->
    <view>
		<u-toast ref="messager"></u-toast>
        <page-title :showBack="false">课程考试</page-title>
        <view>
			<view style="display: flex;justify-content: space-between;padding: 20upx;">
				<view style="padding-top: 10upx;color: #757575; ">第{{curIndex+1}}题 / 共{{total}}题</view>
				<view style="color: #000000;"> 
					<text style="font-size: 40upx;" :class="{'redText':timerValue<5}">{{timerValue}}</text> 分钟
				</view>
			</view>
            <!--试题内容-->
            <view class="qitem">
                <view class="qitem-info">[{{getTypeName(curItem.type)}}]{{curItem.content}}</view>
                <view v-for="(opt,optIdx) in curItem.options" :key="optIdx">
                    <view class="qitem-opts">
                        <view class="qitem-opt" :class="{check:opt.checked}" @click="chooseOption(opt)">
							{{toLetter(optIdx+1)}}.{{opt.content}}
							<u-icon v-if="opt.checked" name="checkbox-mark" color="#00aa00"></u-icon>
						</view>
                    </view>
                </view>
            </view>
        </view>
		<view style="height: 50px;"></view>
        <view v-if="!stop" class="bottom-btns">
            <u-button type="success" text="提交" class="sub" @click="present"></u-button>
			<u-button type="info" text="上一题" @click="prevSub" class="next" v-if="curIndex>0"></u-button>
            <u-button type="primary" text="下一题" @click="nextSub" class="next" v-if="curIndex<(total-1)"></u-button>
        </view>
		<u-modal :show="stop" 
			@confirm="confirmStop" 
			@cancel="cancelStop"
			ref="stopModal" 
			content="时间已到,是否提交答卷? 否:不提交答卷返回课程页面,是:提交答卷并返回课程页面" 
			confirmText="是" 
			:showCancelButton="true"
			cancelText="否"
			:asyncClose="true">
		</u-modal>
		<u-modal :show="scoreShow"
			@confirm="confirmFinish" 
			title="您本次得分">
			<view class="slot-content">
					<view style="text-align: center;font-size: 60rpx;">{{lastScore}}</view>
			</view>
		</u-modal>
        
    </view>
</template>

<script>
	import apiCourseStudy from '@/api/modules/courseStudy.js'
	import apiCourse from '@/api/modules/course.js';
	import {formatDate,getQuestionType,correctJudgment,numberToLetter} from '@/utils/tools.js';
    export default {
        data() {
            return {
				studyId:'',
				examId:'',
				ctype:10,
				startTime:null,
				toLetter:numberToLetter,
				getTypeName:getQuestionType,
				info:{},
				stop:false,
				paper:[],
				total:0,
				curIndex:0,
				curItem:{},
				timer:null,
				scoreShow:false,
				lastScore:0,
				timerValue:0,
				noAnswers:[] //有未答完的试题
            }
        },
		onLoad(options){
			this.studyId=options.studyId;
			this.examId=options.ccid;
			this.ctype=options.ctype;
			if(this.examId){
				this.loadExamInfo();
			}
		},
	    methods: {
			changeTimer(){
				if(this.timerValue==0){
					window.clearInterval(this.timer);
					//系统自动提交
					this.stop=true;
				}else{
					this.timerValue--;
				}
			   	
			},
			loadExamInfo(){//加载考试信息
				this.curIndex=0;
			    apiCourse.getExam(this.examId).then(res=>{
			       if(res.status==200){
			           this.info=res.result;
					   let paper= JSON.parse(this.info.paperContent);
					   paper.items.forEach(item=>{
					     //console.log(item);
					      if(item.type==101){
					        item.userAnswer='';
					      }else if(item.type==102){
					        item.userAnswer=[];
					      }else{
					        item.userAnswer=''
					      }
						  item.options.forEach(opt=>{
							  opt.checked=false;
						  })
					    })
					   this.total=paper.items.length;
					   this.paper =paper;
					   //console.log(this.paper);
					   this.curItem=paper.items[this.curIndex];
					   this.startTime=new Date();//记录开始时间
					   this.timerValue=res.result.testDuration;
					   this.timer=setInterval(this.changeTimer,60000);
					   this.loadStudyItemId();
			       }else if(res.status==404){
			          //没有找到考试信息
			       }else{
			         //this.$message.error(res.message);
			       }
			    })
			},
			loadStudyItemId(){
				//获取studyItemId;
				apiCourseStudy.getStudyContentItem(this.studyId,this.info.contentId).then(rs=>{
					if(rs.status==200){
						this.studyItemId=rs.result.id;
					}
				})
			},
			chooseOption(opt){
				if(this.curItem.type==101 || this.curItem.type==103){
					this.curItem.options.forEach(op=>{
						op.checked=false;
					})
					opt.checked=true;
				}else{
					if(opt.checked){
						opt.checked=false;
					}else{
						opt.checked=true;
					}
				}
			},
			confirmStop(){
				this.submitTest();
			},
			cancelStop(){
				//应该返回课程面页
				this.confirmFinish();
			},
			prevSub(){
				if(this.curIndex==0){
					return;
				}
				this.curIndex--;
				if(this.curIndex>-1){
					this.curItem=this.paper.items[this.curIndex];
				}
			},
			nextSub() {
				if(this.curIndex>=(this.total-1)){
					return;
				}
				this.curIndex++;
				this.curItem=this.paper.items[this.curIndex];
				
			},
			countTest(){ //计算课程的分数
				//console.log(this.paper.items);
				let totalScore=0;
				this.paper.items.forEach(item => {
					item.score=parseInt(item.score);
			  		totalScore+=item.score;//加到总分中
					if(item.type != 102){
						item.userAnswer='';
						item.options.forEach(opt => {
							if(opt.checked){
								item.userAnswer=opt.id;
							}
						});
					}else{
						item.userAnswer=[];
						item.options.forEach(opt => {
							if(opt.checked){
								item.userAnswer.push(opt.id);
							}
						});
					}
				});
				let scoreNum = 0;//用户得分
				let noAnswers=[];//是否都已答
				this.paper.items.forEach((item,idx) => {
					if(item.type != 102){
						if(item.userAnswer==''){
							noAnswers.push(idx+1);
						}
						item.options.forEach(it => {
							if(it.answer && item.userAnswer == it.id) {
								scoreNum+=item.score
							}
						})
					}else{
						if(item.userAnswer.length==0){
							noAnswers.push(idx+1);
						}
						let allRight = true;
						item.options.forEach(it =>{
							if(it.answer){ //正确答案
							  if(item.userAnswer.indexOf(it.id)==-1){
							    allRight=false;
							  }
							}else{
							  if(item.userAnswer.indexOf(it.id)>-1){
							    allRight=false;
							  }
							}
						});
						if(allRight){
							scoreNum+=item.score;
						}
					}
			  })
			  
			  this.noAnswers=noAnswers;
			  if(scoreNum === null)scoreNum=0;
			  this.lastScore=scoreNum;
			  //转化成百分制显示
			  if(this.info.percentScore){
				  this.lastScore=parseInt(scoreNum*100/totalScore);
			  }
			  return this.lastScore;
			},
			submitTest(){
			  let now=new Date();
			  let postData={
			    studyId:this.studyId,//
			    studyItemId:this.studyItemId,//此值没有的，需要单独的查询了来
			    courseId:this.info.courseId,
			    contentId:this.info.contentId,
			    testId:this.info.id,
			    testName:''+this.info.testName,//应该是课程的名称 + 内容的名称
			    testDuration:0,
			    arrange:this.info.arrange,
			    passLine:this.info.passLine,
			    randomMode:this.info.randomMode,
			    score:this.lastScore,//分数需要计算，在检查是否填写完整性时就可以计算出分数
			    paperJson:JSON.stringify(this.paper),//原来是对象，这里要也要对象
			    //startTime:formatDate(this.startTime),//此时间需要格式化,格式化时间可以放在util中
			    //endTime:formatDate(now),
			  }
			  //计划考试的时长
			  var dateDiff = now.getTime() - this.startTime.getTime();//时间差的毫秒数
			  var minutes=Math.floor(dateDiff/(1000))//计算相差秒数，分钟记录的太大，经常为0
			  postData.testDuration=minutes;
			  apiCourseStudy.saveExam(postData).then(res=>{
			     if(res.status == 200) {
			        this.studyItemId=res.result.studyItemId;
					this.scoreShow=true;
			     } else {
					this.$refs.messager.show({message:res.message,type:'error'});
			     }
			  })
			},
            present(){
				let $this=this;
				let score=this.countTest();
				//console.log(score)
				//console.log(this.noAnswers)
				if(this.noAnswers.length>0){
					uni.showModal({
					    title: '友情提示',
					    content: '还有未答试题,您确定要提交吗?',
					    success(res) {
					        if (res.confirm) {
					             $this.submitTest()
					        }
					    }
					});
				}else{
                    this.submitTest()
                }
            },
			confirmFinish(){
				//这里应该是返回课程的页面
				uni.redirectTo({
					url:'/pages/study/courseStudy?id='+this.info.courseId + '&contentId='+this.examId
				})
				// if(this.ctype==10){
				// 	uni.redirectTo({
				// 		url:'/pages/resource/microDetail?id='+this.info.courseId + '&exam=1'
				// 	})
				// }else if(this.ctype==20){
				// 	uni.redirectTo({
				// 		url:'/pages/study/onlineCourse?id='+this.info.courseId
				// 	})
				// }
				
				
			}
        }

    }
</script>

<style lang="scss" scoped>
	.redText{
		color:#ff0000;
	}
    .footer {
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 80upx;
        line-height: 80upx;
        border-top: 1px solid #d9d9d9;
        background-color: #FFFFFF;
    }
    
    .column{
        color: #838383;
        font-size: 40upx;
        padding: 10px 20px;
    }

    .qitem {
        padding: 10px 20px;

        .qitem-info {
            font-size: 1.2em;
            padding: 10px 0px;
        }

        .qitem-opts {
            padding: 5px 0px;

            .qitem-opt {
				display: flex;
                margin-bottom: 10px;
                padding: 20px 15px;
                background-color: #FFFFFF;
                border-radius: 6px;
            }
			.check{
				color:#00aa00;
			}
        }
    }
    .bottom-btns{
		padding: 10px;
		position: fixed;
		width: 100%;
		bottom: 0px;
        display: flex;
        justify-content: space-around;
    }
    
</style>
