<!--我的考试查看-->
<template>
  <div class="exam_info">
    <p class="exam-title color_33">{{examData.title}}</p>
    <div class="exam-max-box">
      <div class="exam-left-max-box">
        <p class="time-p color_33" style="margin-top:20px;">考试用时</p>
        <p class="time-p color_33">{{minute}}分{{second}}秒</p>
        <div class="for-max-box" v-if="examData.radioList[0]">
          <p class="for-title-p color_one">单选题</p>
          <p class="for-box"
             :class="questionType==1&&questionIndex==index?'for-box-one':(item.type?'for-box-1':'for-box-2')"
             @click="questionClick('1',index,item)"
             v-for="(item,index) in examData.radioList" :key="index">{{index+1}}</p>
        </div>
        <div class="for-max-box" v-if="examData.multiList[0]">
          <p class="for-title-p">多选题</p>
          <p class="for-box"
             :class="questionType==2&&questionIndex==index?'for-box-one':(item.type?'for-box-1':'for-box-2')"
             @click="questionClick('2',index,item)"
             v-for="(item,index) in examData.multiList" :key="index">{{index+1}}</p>
        </div>
        <div class="for-max-box" v-if="examData.judgeList[0]">
          <p class="for-title-p">判断题</p>
          <p class="for-box"
             :class="questionType==3&&questionIndex==index?'for-box-one':(item.type?'for-box-1':'for-box-2')"
             @click="questionClick('3',index,item)"
             v-for="(item,index) in examData.judgeList" :key="index">{{index+1}}</p>
        </div>
        <p class="button-p" @click="backPage">返回</p>
      </div>
      <div class="exam-right-max-box">
        <p class="right-title-p">{{questionData.name}}</p>
        <p class="right-title-text">请选择选项:</p>
        <template v-if="questionData.type==1 || questionData.type==3">
          <el-radio v-model="questionData.radio" disabled  :label="index" v-for="(item,index) in questionData.list" :key="index">{{item.name}}</el-radio>
        </template>
        <template v-if="questionData.type==2">
          <el-checkbox-group v-model="questionData.radioList">
            <el-checkbox disabled :label="item.name" v-for="(item,index) in questionData.list" :key="index"></el-checkbox>
          </el-checkbox-group>
        </template>
        <p class="right-text-1 color_one">正确答案：B</p>
        <p class="right-text-2 color_99">解析：</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      videoData:{},
    },
    name: 'exam_info',
    data() {
      return {
        //时间数据
        timer:{},
        minute:"55",
        second:"11",
        //考试数据
        examData:{
          title:"我是考试题目我是考试题目我是考试题目我是考试题目",
          radioList:[
            {type:true,},{type:true,},{type:true,},{type:true,},
          ],//单选
          multiList:['1','1','1','1','1','1','1','1','1','1'],//多选
          judgeList:['2','2','2','2','2','2','2','2','2','2','2','2',],//判断
        },
        questionData:{
          name:"1.题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目",
          type:"1",
          list:[
            {
              name:"选项A",
            },
            {
              name:"选项B",
            },
            {
              name:"选项C",
            },
          ],
          radio:"",
          radioList:[],
        },
        //当前选择题型
        questionType:"",
        //当前选中题目
        questionIndex:0,
      }
    },
    created() {

    },
    mounted(){
      this.initializationQuestion();
    },
    methods: {
      //题目选择
      questionClick(type,index,item){
        console.log("type",type)
        console.log("index",index)
        if(this.questionType != type || this.questionIndex != index){
          this.questionType = type;
          this.questionIndex = index;
        }
      },
      //答题卡初始化
      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;
        }
      },
      // 提交按钮
      backPage(){
        this.$parent.pageSwitch(1);
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
      console.log("beforeDestroy");
    },
    destroyed() {
      //清除定时器
      //clearInterval(this.timer);
      console.log("destroyed");
    }
  }
</script>

<style lang="scss" scoped>
  .exam_info{
    flex:1;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    margin:10px 20px 20px;
    border-radius:10px;
    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-p{
            line-height:50px;
            font-size:16px;
          }
          .for-box{
            display: inline-block;
            border:1px solid #E0E0E0;
            height:30px;
            width:30px;
            text-align: center;
            line-height:30px;
            border-radius:4px;
            margin:0 12px 12px 0;
            font-size:16px;
            color:#999;
            cursor:pointer;
          }
          .for-box-one{
            border:1px solid #0045af!important;
            color:#0045af!important;
          }
          .for-box-1{
            border:1px solid #39A922!important;
            color:#39A922!important;
          }
          .for-box-2{
            border:1px solid #FF6666!important;
            color:#FF6666!important;
          }
        }
        .button-p{
          cursor:pointer;
          width: 100px;
          height: 40px;
          border-radius: 4px;
          color:#999;
          line-height:40px;
          font-size:18px;
          text-align: center;
          margin:60px auto;
          border:1px solid #999;
        }
      }
      .exam-right-max-box{
        flex:1;
        padding:50px 60px;
        .right-title-p{
          margin-bottom:40px;
          font-size:16px;
          line-height:20px;
        }
        .right-title-text{
          margin-bottom:40px;
          font-size:16px;
          line-height:20px;
        }
        .right-button-box{
          display: flex;
          margin-top:60px;
          p{
            font-size:14px;
            text-align: center;
            cursor:pointer;
          }
          p:nth-child(1){
            width: 100px;
            height: 40px;
            border: 1px solid #E0E0E0;
            color:#999;
            border-radius: 6px;
            margin-right:26px;
            line-height:38px;
          }
          p:nth-child(2){
            width: 100px;
            height: 40px;
            background: #0045AF;
            color:#FFFFFF;
            border-radius: 6px;
            line-height:40px;
          }
        }
        .right-text-1{
          font-size:16px;
          line-height:20px;
          margin-top:40px;
        }
        .right-text-2{
          font-size:16px;
          line-height:20px;
          margin-top:30px;
        }
      }
    }
  }
</style>
