<template lang="html">
  <div class="m-right-block fr">
    <div class="exam-card">
        <el-row :gutter="20">
          <el-col :span="16"  >
            <div class="exam-content">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>第{{currentQuestion.index+1}}题（{{currentQuestion.type|getType}}）</span>

                  <span style="float: right;">
                    <span> 剩余时间： <span class="ltime">{{end.h}}: {{end.m}}:{{end.s}}</span> </span>

                    <el-button type="danger" @click="submitPaper" class="ml20">交卷</el-button>

                  </span>
                </div>

                <div class="q-single">
                  <div class="question">
                    题目 : <span v-html="currentQuestion.title"></span>
                  </div>
                  <!-- 判断题 -->

                  <div class="answer" v-if="currentQuestion.type==1">
                    <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
                      <el-radio v-model="radio" :label="index+1" width="560">
                        <span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
                      </el-radio>
                    </div>
                  </div>

                  <!-- 当选题 -->
                  <div class="answer" v-if="currentQuestion.type==2">
                    <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
                      <el-radio v-model="radio" :label="index+1" swidth="560">
                        <span class="answer-title">{{transformChar[index]+'、 '+item}}</span>
                      </el-radio>
                    </div>
                  </div>

                  <!-- 多选题 -->
                  <div class="answer" v-if="currentQuestion.type==3">
                    <div class="answer-item" v-for="(item,index) in currentQuestion.choice" :key="index">
                       <el-checkbox  v-model="checked[index]" :label="index+1" width="560">
                          <span class="answer-title">{{transformChar[index]+'、 '}}{{item}}</span>
                       </el-checkbox>
                    </div>
                  </div>


                  <div class="mark" >
                    <el-checkbox v-model="currentQuestion.marked" @change="changeMark" :checked="currentQuestion.marked">
                      <span class="red">*</span> 题目标注
                    </el-checkbox>
                  </div>
                </div>

                <div class="page-ctrl">
                  <el-button  type="primary" :disabled="currentQuestion.index<1" @click="prevQuestion">上一题</el-button>
                  <el-button  type="primary" :disabled="currentQuestion.index>48" @click="nextQuestion">下一题</el-button>
                </div>
              </el-card>
            </div>
          </el-col>

          <el-col :span="8" >
            <div class="card-select">
              <div>
                <h3 class="p10">单项选择题</h3>
                <el-row :gutter="24" class="ml20">
                  <el-col :span="4" v-for="(item,index) in info.answers" :key="index" class="select-item" v-if="item.type==2">
                    <el-button :class="'b-grid '+getStyle(index)" @click="gotoQuestion(index)" >
                       {{index+1}}
                       <span class="red">
                        {{isMarked(index)}}
                       </span>
                    </el-button>
                  </el-col>
                </el-row>

               <h3 class="p10">多选题</h3>
                <el-row :gutter="24" class="ml20">
                  <el-col :span="4" v-for="(item,index) in info.answers"   :key="index" class="select-item" v-if="item.type==3">
                    <el-button :class="'b-grid '+getStyle(index)" @click="gotoQuestion(index)" >
                       {{index+1}}
                       <span class="red">
                        {{isMarked(index)}}
                       </span>
                    </el-button>
                  </el-col>
                </el-row>

                <h3 class="p10">判断题</h3>
                <el-row :gutter="24" class="ml20">
                  <el-col :span="4" v-for="(item,index) in info.answers"  :key="index" class="select-item" v-if="item.type==1">
                    <el-button :class="'b-grid '+getStyle(index)" @click="gotoQuestion(index)" >
                       {{index+1}}
                       <span class="red">
                        {{isMarked(index)}}
                       </span>
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
     </div>

    <my-dialog style="margin-top:20vh" :dialogVisible="dialogVisible" :info="info" :start="start" :end="end" @leavePage="leavePage" >


    </my-dialog>
  </div>
</template>

<script>
import { Message, MessageBox } from "element-ui";
import {httpServer } from "@/components/httpServer/httpServer.js";
import md5 from 'js-md5';
import { getTime, packTime, time2str, saveExam, getExam,getSelect,delExam } from "./components/util.js";
import headline from "./components/headline.vue";
import myDialog from "./components/my-dialog.vue";
const defAnswer = [false,false,false,false,false];

export default {
  components:{
    headline,
    myDialog
  },
  filters:{
    getType( val ){
      const d = {1:'判断题', 2:'单选题', 3:'多选题'}
      return d[val]
    }
  },
  data() {
    return {
      uuid:0,
      examId:0,
      startExam: false,
      dialogVisible: false,
      info: {},
      currentQuestion: {index:0, choice: [], marked: false},
      questionList: [],
      questionLen: 0,
      questionType: '单选题',
      textarea: "",
      radio: "",
      checked:defAnswer,
      getSelect,
      time2str,
      questionId: 0,
      startTime: "",
      endTime: "",
      transformChar: ["A", "B", "C", "D","E"],
      start: { h: 0, m: 0, s: 0 },
      end: { h: 0, m: 0, s: 0 },
      timer: 0,
      commitMap:{},
      onblurTime: 0
    };
  },
  methods: {
    isMarked(val){
      if( val>= this.questionList.length || val < 0 ) return '';
      return this.questionList[val].marked?'*':'';
    },
    initTimer() {
      let courseId = this.info.courseId;
      let leftTime =  this.info.startTime +this.info.duration -getTime();
      if (leftTime < 0) return;
      if (this.timer) {
        window.clearInterval(this.timer);
      }
      this.tickTimer( courseId );
      this.timer = window.setInterval(() => {
        this.tickTimer( courseId );
      }, 1000);
    },
    tickTimer( courseId ) {
      let nowSec = getTime();
      let {startTime, duration} = this.info;
      let timeLast =  startTime+duration -nowSec;
      this.end = packTime(timeLast);
      this.start = packTime( startTime );
      if (timeLast < 0) {
        window.clearInterval(this.timer);
        this.dosubmit(answer);
        return;
      }
    },
    doLoadQuestion( item){
      this.currentQuestion = item;
      this.currentQuestion.choice= [];
      for( let i=0;i<6;i++){
        let mkey = "answer"+i
        if(item[mkey] ) this.currentQuestion.choice.push( item[mkey] );
      }
      if( item.type == 3){
        this.checked= this.currentQuestion.answer||[false,false,false,false,false];
      }else{
        this.radio = this.currentQuestion.answer;
      }
      this.currentQuestion.marked = !!item.marked
    },
    loadQuestion( index ) {
      let item = this.questionList[index];
      item.index = index;
      if( !item.title ){
        let {id} = item;
        httpServer("course.loadAnswer", {id} ).then(res => {
          if( res.code != 200) return;
          Object.assign( item, res.data)
          this.doLoadQuestion( item )
        })
      }else{
        this.doLoadQuestion( item )
      }
    },
    changeMark(marked){
      let index = this.currentQuestion.index
      this.questionList[ index ].marked = marked
      this.$forceUpdate()
    },
    getStyle: function(i) {
      let item = this.questionList[i];
      let select = getSelect( item.answer )
      return select ? "finish" : "unfinish";
    },
    checkCommit( ){
      let {id, answer, exmaId} = this.currentQuestion
      let select = getSelect(answer);
      if( !select ) return
      if( this.commitMap[id] == select) return;
      httpServer("course.SubmitAnswer", {id, select,exmaId } ).then(res => {
        if( res.code != 200) return;
        this.commitMap[id] = select;
      })
    },
    leavePage(){
      let courseId = this.info.courseId
      this.timer &&  window.clearInterval(this.timer);
      delExam( )
      this.$router.push(`/center/play/${courseId}`);
    },
    submitPaper() {
      let that = this
      MessageBox({
        title: "确认交卷",
        message: "是否确认交卷",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '提交中...';
            that.dosubmit(done);
            done();
            instance.confirmButtonLoading = false;
            that.dialogVisible = true;

          } else{
            done();
          }

        }
      })
    },
    dosubmit( cb ) {
      let param = { examId: this.info.examId };
      httpServer("course.FinishExam", param).then(res => {
        if (res.code == 200) {
          let { score, useTime } = res.data;
          this.info.score = score;
          this.info.useTime = useTime;
          this.info.isFinish = 1;
          this.timer &&  window.clearInterval(this.timer);
        }
      });
    },
    prevQuestion() {
      let index = this.currentQuestion.index
      if( index <1) return
      this.loadQuestion(index-1);
    },
    nextQuestion() {
      let index = this.currentQuestion.index
      if( index >= this.questionList.length - 1) return
      this.loadQuestion(index+1);
    },
    gotoQuestion( index ) {
      index = parseInt(index);
      this.loadQuestion(index);
    },
    doStartExam( info ){
      this.info = info
      this.questionList = info.answers
      this.loadQuestion(0);
      this.startTime = info.startTime;
      saveExam( this.info, this.questionList );
      this.initTimer();
    }
  },
  destroyed(){
    this.timer &&  window.clearInterval(this.timer)
    saveExam( this.info, this.questionList );
  },

  beforeMount() {
    let courseId = +this.$route.params.courseId
    let info = getExam()
    let nowSec = getTime()
    if( info.courseId == courseId && info.startTime + info.duration > nowSec){
      this.doStartExam( info )
      return;
    }
    let that = this;
    //
    httpServer("course.StartExam", {courseId} ).then(res => {
      if( res.code != 200) return;
      let info = res.data||{}
      info.questionList = info.answers.map( v =>{
        v.marked = false
        v.answer = 0
        if(v.type==3) v.answer = [false,false,false,false,false];
        return v;
      });
      that.doStartExam( info );
    });
  },
  watch: {
    radio(answer, from) {
      if (answer === "") return;
      if (this.currentQuestion){
        this.currentQuestion.answer = answer;
        this.questionList[ this.currentQuestion.index].answer = answer
        this.checkCommit()
       }
    },
    checked(answer, from) {
      if (answer === "") return;
      if (this.currentQuestion) {
        this.currentQuestion.answer = answer;
        this.questionList[ this.currentQuestion.index].answer = answer
        this.checkCommit()
      }
    }
  }
};
</script>

<style lang="css">
  @import url("./index.css");
  @import url("../../../assets/css/base.css");
</style>
