<template>
  <div class="info-list-page">
    <div class="exam-max-box" v-if="pageType">
      <div class="exam-left-max-box">
        <div class="for-max-box" v-if="examData.radioList[0]">
          <div class="for-title-box">
            <p class="for-title-p">单选题</p>
            <p class="for-title-right-icon" :class="leftOneType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(1)"></p>
          </div>
          <div class="for-big-box" v-show="leftOneType">
            <p class="for-box"
               :class="questionType==1&&questionIndex==index?'for-box-one':(item.isRight == 0 ?'isRightTwo':(item.isRight == 1 ?'isRightOne':''))"
               @click="questionClick('1',index,item)"
               v-for="(item,index) in examData.radioList" :key="index">{{index+1}}</p>
          </div>
        </div>
        <div class="for-max-box" v-if="examData.multiList[0]">
          <div class="for-title-box">
            <p class="for-title-p">多选题</p>
            <p class="for-title-right-icon" :class="leftTwoType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(2)"></p>
          </div>
          <div class="for-big-box" v-show="leftTwoType">
            <p class="for-box"
               :class="questionType==2&&questionIndex==index?'for-box-one':(item.isRight == 0 ?'isRightTwo':(item.isRight == 1 ?'isRightOne':''))"
               @click="questionClick('2',index,item)"
               v-for="(item,index) in examData.multiList" :key="index">{{index+1}}</p>
          </div>
        </div>
        <div class="for-max-box" v-if="examData.judgeList[0]">
          <div class="for-title-box">
            <p class="for-title-p">判断题</p>
            <p class="for-title-right-icon" :class="leftThreeType?'el-icon-arrow-down':'el-icon-arrow-right'" @click="leftIconClick(3)"></p>
          </div>
          <div class="for-big-box" v-show="leftThreeType">
            <p class="for-box"
               :class="questionType==3&&questionIndex==index?'for-box-one':(item.isRight == 0 ?'isRightTwo':(item.isRight == 1 ?'isRightOne':''))"
               @click="questionClick('3',index,item)"
               v-for="(item,index) in examData.judgeList" :key="index">{{index+1}}</p>
          </div>
        </div>
        <p class="button-p" @click="backPage">返回</p>
      </div>
      <div class="exam-right-max-box el-check-box">
        <p class="right-title-p">{{questionData.content}}</p>
        <template v-if="questionType==1 || questionType==3">
          <el-radio v-model="radio" :label="index" disabled
                    v-for="(item,index) in questionData.elPaperQuAnswerList" :key="index">{{item.abc}}. {{item.content}}</el-radio>
        </template>
        <template v-if="questionType==2">
          <el-checkbox-group v-model="radioList">
            <el-checkbox :label="index" disabled
                         v-for="(item,index) in questionData.elPaperQuAnswerList" :key="index">{{item.abc}}. {{item.content}}</el-checkbox>
          </el-checkbox-group>
        </template>
        <!--<p class="right-title-text" :class="questionData.isRight == 1?'right-title-text-one':'right-title-text-two'" v-if="item.isRight == 1" v-for="(item,index) in questionData.elPaperQuAnswerList">正确答案：{{item.abc}}</p>-->
        <div class="right-button-box">
          <p class="left-button" @click="superiorQuestion" v-if="leftButtonType">上一题</p>
          <p class="right-button" @click="downQuestion" v-if="rightButtonType">下一题</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { paperDetail,fillAnswer,handPaper,paperResult } from "@/api/myPage/myResultInquiry";
  export default {
    props:{
      transferData:{},
      violationId:{},
    },
    name: "infoList",
    data() {
      return {
        pageType:false,
        //时间数据
        timer:{},
        minute:"",
        second:"",
        //考试数据
        examData:{},
        questionData:{},
        //当前选择题型
        questionType:"",
        //当前选中题目
        questionIndex:0,
        //单选/判断选中的ID
        radio:"",
        //多选题选中
        radioList:[],
        //按钮显示状态
        leftButtonType:false,
        rightButtonType:false,
        //成功数据
        successData:{},
        //当前做题数
        examNum:0,
        //最大题数
        examMaxNum:0,
        //正确与否
        isRight:"",
        //题目展开状态
        leftOneType:true,
        leftTwoType:true,
        leftThreeType:true,
      }
    },
    created(){

    },
    mounted(){
      console.log("examData",this.examData)
      if(this.transferData){
        this.examData = JSON.parse(JSON.stringify(this.transferData))
        console.log("examData",this.examData)
        this.initializationQuestion();
      }
    },
    methods:{
      //icon点击切换展示左侧列表
      leftIconClick(type){
        if(type == 1){
          this.leftOneType = !this.leftOneType;
        }else if(type == 2){
          this.leftTwoType = !this.leftTwoType;
        }else if(type == 3){
          this.leftThreeType = !this.leftThreeType;
        }
      },
      //计算按钮显示
      buttonTypeClickShow(){
        if(this.questionType==1){
          //左
          this.leftButtonType = this.questionIndex != 0;
          //右
          if(this.examData.multiList[0]||this.examData.judgeList[0]){
            this.rightButtonType = true;
          }else{
            this.rightButtonType = this.questionIndex != this.examData.radioList.length - 1;
          }
        }else if(this.questionType==2){
          //左
          if(this.examData.radioList[0]){
            this.leftButtonType = true;
          }else{
            if(this.questionIndex == 0){
              this.leftButtonType = this.questionIndex != this.examData.multiList.length - 1;
            }else{
              this.leftButtonType = true;
            }
          }
          //右
          if(this.examData.judgeList[0]){
            this.rightButtonType = true;
          }else{
            this.rightButtonType = this.questionIndex != this.examData.multiList.length - 1;
          }
        }else if(this.questionType==3){
          //左
          if(this.examData.radioList[0]||this.examData.multiList[0]){
            this.leftButtonType = true;
          }else{
            this.leftButtonType = this.questionIndex != this.examData.judgeList.length - 1;
          }
          //右
          this.rightButtonType = this.questionIndex != this.examData.judgeList.length - 1;

        }
      },
      //获取问题
      getPaperDetail(){
        this.radio = "";
        this.radioList = [];
        let self = this;
        let obj = {
          paperId:this.examData.id,
          quId:this.calculateId(),
        };
        paperDetail(obj).then(response => {
          if(this.questionType == 1){
            this.isRight = this.examData.radioList[this.questionIndex].isRight;
          }else if(this.questionType == 2){
            this.isRight = this.examData.multiList[this.questionIndex].isRight;
          }else if(this.questionType == 3){
            this.isRight = this.examData.judgeList[this.questionIndex].isRight;
          }
          this.questionData = response.data;
          if(this.questionType == 1||this.questionType == 3){
            for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
              if(self.questionData.elPaperQuAnswerList[i].checked == 1){
                this.radio = i;
              }
            }
          }else if(this.questionType == 2){
            let list = [];
            for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
              if(self.questionData.elPaperQuAnswerList[i].checked == 1){
                list.push(i);
              }
            }
            this.radioList = list;
          }
          this.buttonTypeClickShow();
          this.$forceUpdate()
        });
      },
      //上一题
      superiorQuestion(){
        if(this.questionIndex!=0){
          // fillAnswer(this.calculateFillAnswer()).then(response => {
            this.questionIndex --
            this.getPaperDetail();
          // });
        }else{
          if(this.questionType==2 && this.examData.radioList[0]){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 1;
              this.questionIndex = this.examData.radioList.length-1;
              this.getPaperDetail();
            // });
          }else if (this.questionType==3 && this.examData.multiList[0]){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 2;
              this.questionIndex = this.examData.multiList.length-1;
              this.getPaperDetail();
            // });
          }else if (this.questionType==3 && this.examData.radioList[0]){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 1;
              this.questionIndex = this.examData.radioList.length-1;
              this.getPaperDetail();
            // });
          }
        }
      },
      //下一题
      downQuestion(){
        if (this.questionType==1){
          if(this.questionIndex < this.examData.radioList.length-1){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionIndex++
              this.getPaperDetail();
            // });
          }else if(this.examData.multiList[0]){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 2;
              this.questionIndex = 0;
              this.getPaperDetail();
            // });
          }else if(this.examData.judgeList[0]){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 3;
              this.questionIndex = 0;
              this.getPaperDetail();
            // });
          }
        } else if(this.questionType==2){
          if(this.questionIndex < this.examData.multiList.length-1){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionIndex++
              this.getPaperDetail();
            // });
          }else if(this.examData.judgeList[0]){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionType = 3;
              this.questionIndex = 0;
              this.getPaperDetail();
            // });
          }
        } else if(this.questionType==3){
          if(this.questionIndex < this.examData.judgeList.length-1){
            // fillAnswer(this.calculateFillAnswer()).then(response => {
              this.questionIndex++
              this.getPaperDetail();
            // });
          }
        }
      },
      //题目选择
      questionClick(type,index,item){
        console.log("type",type)
        console.log("index",index)
        // fillAnswer(this.calculateFillAnswer()).then(response => {
          if(this.questionType != type || this.questionIndex != index){
            this.questionType = type;
            this.questionIndex = index;
            this.getPaperDetail();
          }
        // });
      },
      //计算当前选中选项
      calculateCheck(index){
        console.log(index)
        let self = this;
        if(this.questionType == 1||this.questionType == 3){
          //单选或判断
          for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
            if(i==index){
              self.questionData.elPaperQuAnswerList[i].checked = 1;
            }else{
              self.questionData.elPaperQuAnswerList[i].checked = 0;
            }
          }
        }
        if(this.questionType == 1){
          this.examData.radioList[this.questionIndex].type = true;
        }else if(this.questionType == 2){
          this.examData.multiList[this.questionIndex].type = true;
        }else if(this.questionType == 3){
          this.examData.judgeList[this.questionIndex].type = true;
        }

        this.$forceUpdate()
      },
      //答题卡初始化
      initializationQuestion(){
        if(this.examData.radioList[0]){
          this.questionType=1;
        }else if(this.examData.multiList[0]){
          this.questionType=2;
        }else if(this.examData.judgeList[0]){
          this.questionType=3;
        }
        this.getPaperDetail();
        this.pageType = true;
      },
      //当前题目ID计算
      calculateId(){
        let id = "";
        if(this.questionType == 1){
          id = this.examData.radioList[this.questionIndex].quId;
        }else if(this.questionType == 2){
          id = this.examData.multiList[this.questionIndex].quId;
        }else if(this.questionType == 3){
          id = this.examData.judgeList[this.questionIndex].quId;
        }
        return id;
      },
      //计算当前选项答案
      calculateFillAnswer(){
        let self = this;
        let obj = {
          paperId:this.examData.id,
          quId:this.calculateId(),
          elPaperQuAnswerList:[]
        };
        if(this.questionType == 1||this.questionType == 3){
          for(let i=0;i<self.questionData.elPaperQuAnswerList.length;i++){
            if(self.questionData.elPaperQuAnswerList[i].checked == 1){
              obj.elPaperQuAnswerList.push(self.questionData.elPaperQuAnswerList[i]);
            }
          }
        }else if(this.questionType == 2){
          for(let i=0;i<self.radioList.length;i++){
            self.questionData.elPaperQuAnswerList[self.radioList[i]].checked=1;
            obj.elPaperQuAnswerList.push(self.questionData.elPaperQuAnswerList[self.radioList[i]]);
          }
        }
        return obj;
      },
      // 提交按钮
      backPage(){
        this.$parent.outClick();
      },
      // 考试时间到
      timeOver(){
        let obj = {
          id:this.examData.id,
          violationId:this.violationId
        };
        // fillAnswer(this.calculateFillAnswer()).then(response => {
          handPaper(obj).then(response => {
            this.msgSuccess("考试时间结束,自动交卷成功.");
            this.$parent.pageSwitch(1);
          });
        // });
      },
      //定时器
      time(num){
        let self = this;
        let time = num * 60;
        this.timer = window.setInterval(refreshCount, 1000);
        function refreshCount() {
          if(time<=0){
            window.clearInterval(this.timer);
            self.timeOver();
          }else{
            time--;
            self.minute = parseInt(time/60);
            self.second = time%60;
          }
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .info-list-page{
    flex: 1;
    display: flex!important;
    flex-direction: column;
    p{
      margin:0;
    }
    .exam-title{
      height:80px;
      line-height:80px;
      text-align: center;
      font-size:18px;
      box-shadow: 0 3px 16px 2px rgba(0, 0, 0, 0.06);
    }
    .exam-max-box{
      flex:1;
      display: flex;
      .exam-left-max-box{
        width:300px;
        padding-top:10px;
        box-shadow: 0 3px 16px 2px rgba(0, 0, 0, 0.06);
        .time-p{
          line-height:30px;
          font-size:16px;
          text-align: center;
        }
        .for-max-box{
          padding:0 20px;
          .for-title-box{
            display: flex;
            .for-title-p{
              line-height:50px;
              font-size:16px;
            }
            .for-title-right-icon{
              width:50px;
              line-height:50px;
              font-size:20px;
              text-align: center;
              cursor:pointer;
            }
          }
          .for-big-box{
            .for-box{
              display: inline-block;
              border:1px solid #E0E0E0;
              height:30px;
              width:46px;
              text-align: center;
              line-height:30px;
              border-radius:4px;
              margin:0 8px 8px 0;
              font-size:16px;
              cursor:pointer;
            }
          }
          .for-box-one{
            border:1px solid #0045af!important;
            color:#0045af!important;
          }
          .for-box-two{
            border:1px solid #0045af;
            background: #0045af;
            color:#fff;
          }
          .isRightOne{
            border:1px solid #14AE10;
            background: #14AE10;
            color:#fff;
          }
          .isRightTwo{
            border:1px solid #FF6666;
            background: #FF6666;
            color:#fff;
          }
        }
        .button-p{
          cursor:pointer;
          width: 100px;
          height: 40px;
          background: #999;
          border-radius: 4px;
          color:#fff;
          line-height:40px;
          font-size:18px;
          text-align: center;
          margin:60px auto;
        }
      }
      .exam-right-max-box{
        flex:1;
        padding:50px 60px;
        .right-title-p{
          margin-bottom:40px;
          font-size:16px;
          line-height:20px;
        }
        .right-title-text{
          width:160px;
          margin:40px 0;
          font-size:16px;
          line-height:40px;
          text-align: center;
          border-radius:4px;
        }
        .right-title-text-one{
          border:2px solid #14AE10;
          color: #14AE10;
        }
        .right-title-text-two{
          border:2px solid #FF6666;
          color: #FF6666;
        }
        .right-button-box{
          display: flex;
          margin-top:60px;
          p{
            font-size:14px;
            text-align: center;
            cursor:pointer;
          }
          .left-button{
            width: 100px;
            height: 40px;
            border: 1px solid #E0E0E0;
            color:#999;
            border-radius: 6px;
            margin-right:26px;
            line-height:38px;
          }
          .right-button{
            width: 100px;
            height: 40px;
            background: #0045AF;
            color:#FFFFFF;
            border-radius: 6px;
            line-height:40px;
          }
        }
      }
    }
  }
</style>
