<template>
  <div class="box" v-if="isComplete">
    <!-- 答题卡区域 -->
    <div class="box-left">
      <div class="paper_card">
        <div class="card_title">
          <span>答题卡已完成&nbsp;&nbsp;({{completeNumber}}/{{queNumInfo.totalNum}})</span>
        </div>

        <div class="card_options">
          <!--答题卡单选题-->
          <div class="options">
            <div
              class="options_title"
              style="padding-top: 15px"
              v-if="paperInfo.singleScore"
            >单选题(每题{{paperInfo.singleScore}}分)</div>

            <div class="row">
              <div
                class="item"
                v-for="(singleItem, singleIndex) in queNumInfo.singleNum"
                :key="singleIndex"
              >
                <div
                  @click="toPaperQue(singleItem)"
                  :class="{'complete_flag' : singleAnswers[singleIndex] ? true : false}"
                >
                  <span>{{singleItem}}</span>
                </div>
              </div>
            </div>
          </div>

          <!--答题卡多选题-->
          <div class="options">
            <div
              class="options_title"
              v-if="paperInfo.multipleScore"
            >多选题(每题{{paperInfo.multipleScore}}分)</div>

            <div class="row">
              <div
                class="item"
                v-for="(multipleItem, multipleIndex) in queNumInfo.multipleNum"
                :key="multipleIndex"
              >
                <div
                  @click="toPaperQue(multipleItem + queNumInfo.singleNum)"
                  :class="{'complete_flag' : JSON.stringify(multipleAnswers[multipleIndex]) !== '[]' &&  JSON.stringify(multipleAnswers[multipleIndex]) !== undefined && JSON.stringify(multipleAnswers[multipleIndex]) !== 'null' ? true : false}"
                >
                  <span>{{multipleItem + queNumInfo.singleNum}}</span>
                </div>
              </div>
            </div>
          </div>

          <!--答题卡判断题-->
          <div class="options">
            <div class="options_title" v-if="paperInfo.judgeScore">判断题(每题{{paperInfo.judgeScore}}分)</div>

            <div class="row">
              <div
                class="item"
                v-for="(judgeItem, judgeIndex) in queNumInfo.multipleNum"
                :key="judgeIndex"
              >
                <div
                  @click="toPaperQue(judgeItem + queNumInfo.singleNum + queNumInfo.multipleNum)"
                  :class="{'complete_flag' : judgeAnswers[judgeIndex] ? true : false}"
                >
                  <span>{{judgeItem + queNumInfo.singleNum + queNumInfo.multipleNum}}</span>
                </div>
              </div>
            </div>
          </div>

          <!--答题卡填空题-->
          <div class="options">
            <div class="options_title" v-if="paperInfo.fillScore">填空题(每题{{paperInfo.fillScore}}分)</div>

            <div class="row">
              <div
                class="item"
                v-for="(fillItem, fillIndex) in queNumInfo.fillNum"
                :key="fillIndex"
              >
                <div
                  @click="toPaperQue(fillItem + queNumInfo.singleNum + queNumInfo.multipleNum + queNumInfo.judgeNum)"
                  :class="{'complete_flag' : fillAnswers[fillIndex] ? true : false}"
                >
                  <span>{{fillItem + queNumInfo.singleNum + queNumInfo.multipleNum + queNumInfo.judgeNum}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--试卷问题及选项区域-->
    <div class="box-right">
      <div class="paper_container">
        <!--单选题列表-->
        <section
          class="que"
          v-for="(item, index) in singleQueList"
          :key="'single'+ item.singleId"
          v-show="index == currentIndex"
        >
          <div class="content">
            <span class="que_type">(单选题)</span>
            <span class="que_content">
              {{index + 1}}.&nbsp;{{item.singleContent}}
              <span
                class="que_score"
              >[{{paperInfo.singleScore}}分]</span>
            </span>

            <!-- <img :src="item.pictureSrc" alt style="width: 100%" v-if="item.pictureSrc" /> -->

            <div
              class="single_option"
              v-for="(option, optionIndex) in item.options"
              :key="'single'+ item.singleId + optionIndex"
            >
              <el-radio
                class="options"
                :value="option.value"
                v-model="singleAnswer"
                :label="option.label"
                v-if="option.label"
                @change="singleChange"
              ></el-radio>
            </div>
          </div>
        </section>
        <!--多选题列表-->
        <section
          class="que"
          v-for="(item, index) in multipleQueList"
          :key="'multiple'+ item.multipleId"
          v-show="(index + queNumInfo.singleNum) == currentIndex"
        >
          <div class="content">
            <span class="que_type">(多选题)</span>
            <span class="que_content">
              {{index + 1 + queNumInfo.singleNum}}.&nbsp;{{item.multipleContent}}
              <span
                class="que_score"
              >[{{paperInfo.multipleScore}}分]</span>
            </span>

            <img :src="item.pictureSrc" alt style="width: 100%" v-if="item.pictureSrc" />

            <div
              class="multiple_option"
              v-for="(option, optionIndex) in item.options"
              :key="'multiple'+ item.multipleId + optionIndex"
            >
              <el-checkbox
                class="options"
                :value="option.value"
                v-model="multipleAnswer"
                :label="option.label"
                v-if="option.label"
                @change="multipleChange"
              ></el-checkbox>
            </div>
          </div>
        </section>

        <!--判断题列表-->
        <section
          class="que"
          v-for="(item, index) in judgeQueList"
          :key="'judge'+ item.judgeId"
          v-show="(index + queNumInfo.singleNum + queNumInfo.multipleNum) == currentIndex"
        >
          <div class="content">
            <span class="que_type">(判断题)</span>
            <span class="que_content">
              {{index + 1 + queNumInfo.singleNum + queNumInfo.multipleNum}}.&nbsp;{{item.judgeContent}}
              <span
                class="que_score"
              >[{{paperInfo.judgeScore}}分]</span>
            </span>

            <div
              class="judge_option"
              v-for="(option, optionIndex) in item.options"
              :key="'judge'+ item.judgeId + optionIndex"
            >
              <el-radio
                class="options"
                :value="option.value"
                v-model="judgeAnswer"
                :label="option.label"
                v-if="option.label"
                @change="judgeChange"
              ></el-radio>
            </div>
          </div>
        </section>

        <!--填空题列表-->
        <section
          class="que"
          v-for="(item, index) in fillQueList"
          :key="'fill'+ item.fillId"
          v-show="(index + queNumInfo.singleNum + queNumInfo.multipleNum + queNumInfo.judgeNum) == currentIndex"
        >
          <div class="content">
            <span class="que_type">(填空题)</span>
            <span class="que_content">
              {{index + 1 + queNumInfo.singleNum + queNumInfo.multipleNum + queNumInfo.judgeNum}}.&nbsp;{{item.fillContent}}
              <span
                class="que_score"
              >[{{paperInfo.fillScore}}分]</span>
            </span>

            <div class="fill_option">
              <el-input
                v-model="fillAnswer"
                label="答题区域(答案不区分大小写，首尾空格忽略)"
                full-width
                multi-line
                :rows="3"
                :rows-max="6"
                @change="fillChange"
              />
            </div>
          </div>
        </section>

        <!--上一题和下一题按钮-->
        <div class="paper_button">
          <el-button
            type="success"
            @click.native="preItem"
            :disabled="currentIndex < 1"
          >{{currentIndex < 1 ? '无' : '上一题'}}</el-button>
          <el-button
            style="margin-left=30px"
            type="success"
            @click.native="nextItem"
            v-if="currentIndex != queNumInfo.totalNum-1"
          >下一题</el-button>
          <el-button
            type="success"
            @click.native="clickSubmit"
            v-if="currentIndex == queNumInfo.totalNum-1"
          >提交试卷</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
//   import HeaderTop from '../../../app/components/HeaderTop/HeaderTop.vue'
//   import {Toast, MessageBox, Indicator} from 'mint-ui'
//   import {reqPapersInfoByPaperId, reqInsertStudentPaperScore, reqSubmitPaper} from '../../../app/api'
import { getNumberPrefix } from "../../common/utils/common";
import { mapState, mapActions, mapGetters } from "vuex";

export default {
  name: "",
  data() {
    return {
      //学号
      sno: this.$store.state.userInfo.sno,
      //当前日期
      currentDate: new Date(),
      //路由传值paperId
      paperId: this.$route.params.paperId,
      //试卷信息
      paperInfo: {},
      //试卷问题类型数量
      queNumInfo: {},
      //初始化时间戳
      currentTime: new Date().getTime(),
      restTime: "",
      timer: "",
      //单选题数组
      singleQueList: [],
      //单选题答案
      singleAnswer: "",
      //多选题数组
      multipleQueList: [],
      //多选题答案
      multipleAnswer: [],
      //判断题数组
      judgeQueList: [],
      //判断题答案
      judgeAnswer: "",
      //填空题数组
      fillQueList: [],
      //填空题答案
      fillAnswer: "",
      //是否显示paperContainer,默认进入页面为true
      showPaperContainer: true,
      //是否显示paperCard答题卡，默认进入页面为false，当点击答题卡区域为true
      showPaperCard: false,
      timeUsed: 0, //考试花费时间
      percentage: 0, //进度条值
      loading: undefined, //页面加载loading
      isComplete: false
    };
  },
  computed: {
    ...mapState([
      "currentIndex", //当前题数
      "singleAnswers",
      "multipleAnswers",
      "judgeAnswers",
      "fillAnswers",
      "firstCurrentTime"
    ]),
    ...mapGetters(["completeNumber"])
  },

  /*      //答题卡已完成题数
      completeNumber(){
        var number = 0;
        this.singleAnswers.forEach(function (v) {
          if (v)
            number++
        });
        this.multipleAnswers.forEach(function (v) {
          if (v.length)
            number++
        });
        this.judgeAnswers.forEach(function (v) {
          if (v)
            number++
        });
        this.fillAnswers.forEach(function (v) {
          if (v)
            number++
        });
        console.log(number)
        return number
      }*/
  // },
  created() {
    this.loading = this.$loading({
      lock: true,
      fullscreen: true,
      text: "正在准备试卷...",
      background: "rgba(0, 0, 0, 0.3)"
    });
    setTimeout(() => {
      this.getPaperInfoByPaperId();
    }, 1500);
  },
  /*mounted() {
    // 挂载完成后，判断浏览器是否支持popstate
    if (window.history && window.history.pushState) {
      // 进入页面时给history压入一个本地的连接
      window.history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.toBack, false);
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.toBack, false);
  },
  */
  methods: {
    //单选题点击change事件
    ...mapActions([
      "nextQue", //点击下一题
      "prevQue", //点击上一题
      "cardQue", //点击答题卡序号
      "recordFirstCurrentTime", //记录当前花费时间
      "recordSingleAnswers", //记录单选题答案到数组，第一个参数为数组下标，第二个参数为当前下标的值
      "recordMultipleAnswers", //记录多选题答案到数组，第一个参数为数组下标，第二个参数为当前下标的值
      "recordJudgeAnswers", //记录判断题答案到数组，第一个参数为数组下标，第二个参数为当前下标的值
      "recordFillAnswers", //记录填空题答案到数组，第一个参数为数组下标，第二个参数为当前下标的值
      "refreshCurrentIndex",
      "refreshSingleAnswers",
      "refreshMultipleAnswers",
      "refreshJudgeAnswers",
      "refreshFillAnswers",
      "refreshFirstCurrentTime"
    ]),
    //单选题点击change事件
    singleChange() {
      const { currentIndex, singleAnswer } = this;
      this.recordSingleAnswers({ currentIndex, singleAnswer });
    },
    //多选题点击change事件
    multipleChange() {
      const { currentIndex, multipleAnswer } = this;
      this.recordMultipleAnswers({ currentIndex, multipleAnswer });
    },
    //判断题点击change事件
    judgeChange() {
      const { currentIndex, judgeAnswer } = this;
      this.recordJudgeAnswers({ currentIndex, judgeAnswer });
    },
    //填空题点击change事件
    fillChange() {
      const { currentIndex, fillAnswer } = this;
      this.recordFillAnswers({ currentIndex, fillAnswer });
    },
    // 点击上一题
    preItem() {
      this.singleAnswer = "";
      this.multipleAnswer = [];
      this.judgeAnswer = "";
      this.fillAnswer = "";
      this.prevQue();
      this.getCurrentAnswer();
    },
    //点击下一题
    nextItem() {
      this.singleAnswer = "";
      this.multipleAnswer = [];
      this.judgeAnswer = "";
      this.fillAnswer = "";
      this.nextQue();
      this.getCurrentAnswer();
    },
    //点击显示试卷问题
    toPaperQue(index) {
      this.singleAnswer = "";
      this.multipleAnswer = [];
      this.judgeAnswer = "";
      this.fillAnswer = "";
      this.cardQue(index);
      this.getCurrentAnswer();

      this.showPaperCard = false;
      this.showPaperContainer = true;
    },
    //插入学生成绩表成绩信息，包含三个字段，考试开始时间、学号和试卷id
    //   async insertStudentPaperScore() {
    //     const {sno, paperId} = this;
    //     let result = await reqInsertStudentPaperScore({sno, paperId});
    //     if (result.statu == 0) {
    //       sessionStorage.setItem("sno" + this.sno + "paperId" + this.paperId, result.msg);
    //     }
    //     else {
    //       Toast({
    //         message: result.msg,
    //         duration: 1500
    //       });
    //     }
    //   },
    // 根据paperId获取试卷信息和问题数量信息
    getPaperInfoByPaperId() {
      this.$http
        .get(`/exam/getPaperInfoByPaperId?paperId=${this.paperId}`)
        .then(response => {
          const res = response.data;
          console.log(response.data);
          if (res.statu == 0) {
            this.paperInfo = res.data.paperInfo;
            this.queNumInfo = res.data.queNumInfo;
            this.singleQueList = res.data.singleQueList;
            this.multipleQueList = res.data.multipleQueList;
            this.judgeQueList = res.data.judgeQueList;
            this.fillQueList = res.data.fillQueList;
            this.isComplete = true;
            this.setStore();
          } else {
            this.$message.warning(res.msg);
          }
          this.loading.close();
        })
        .catch(error => {
          this.loading.close();
        });
    },
    //初始化考试数据到store
    setStore() {
      // 进度条
      this.percentage = parseInt(
        ((this.currentIndex + 1) / this.queNumInfo.totalNum) * 100
      );
      //初始化state中单选题答案数组长度
      this.$store.dispatch(
        "initSingleAnswersLength",
        this.queNumInfo.singleNum
      );
      //初始化state中多选题答案数组长度
      this.$store.dispatch(
        "initMultipleAnswersLength",
        this.queNumInfo.multipleNum
      );
      //初始化state中判断题答案数组长度
      this.$store.dispatch("initJudgeAnswersLength", this.queNumInfo.judgeNum);
      //初始化state中填空题答案数组长度
      this.$store.dispatch("initFillAnswersLength", this.queNumInfo.fillNum);
      //若vuex中state没被赋值过则将最先进入考试的开始时间存入vuex的state
      if (this.firstCurrentTime == 0) {
        //同步记录开始时间
        let firstCurrentTime = this.currentTime;
        this.recordFirstCurrentTime(firstCurrentTime);
        sessionStorage.removeItem("firstCurrentTime");
        sessionStorage.setItem("firstCurrentTime", firstCurrentTime);
      }
    }
    //   //倒计时
    //   countTime() {
    //     // console.log(this.paperInfo.paperDuration);
    //     //定义常量vm代表vue实例，指向当前this
    //     const vm = this,
    //       endTime = vm.paperInfo.paperDuration * 1000 + vm.firstCurrentTime,//firstCurrentTime即最先进入考试的时间
    //       currentTime = new Date().getTime(),
    //       restTime = endTime - currentTime,
    //       hours = getNumberPrefix(parseInt(restTime / (1000 * 60 * 60) % 24, 10)),
    //       minutes = getNumberPrefix(parseInt(restTime / (1000 * 60) % 60, 10)),
    //       seconds = getNumberPrefix(parseInt(restTime / 1000 % 60, 10));
    //     vm.restTime = `${hours}:${minutes}:${seconds}`;

    //     vm.timer = setTimeout(function () {
    //       if (restTime > 0) {
    //         vm.countTime();
    //       } else if (restTime <= 0) {
    //         clearTimeout(vm.timer);
    //         Toast({
    //           message: '交卷时间已到，系统将帮您自动交卷',
    //           duration: 1000
    //         });
    //         setTimeout(() => {
    //           let result = vm.handleSubmit();
    //           if (result){
    //             //等待成绩计算完毕并插入数据库表
    //             Indicator.open({
    //               text: '加载中...',
    //               spinnerType: 'fading-circle'
    //             });
    //             setTimeout(() => {
    //               Indicator.close();
    //               //清除sessionStorage数据
    //               sessionStorage.removeItem("currentIndex");
    //               sessionStorage.removeItem("singleAnswers");
    //               sessionStorage.removeItem("multipleAnswers");
    //               sessionStorage.removeItem("judgeAnswers");
    //               sessionStorage.removeItem("judgeAnswers");
    //               sessionStorage.removeItem("fillAnswers");
    //               sessionStorage.removeItem("firstCurrentTime");
    //               sessionStorage.removeItem("sno" + vm.sno + "paperId" + vm.paperId, result.msg);
    //               //清除vuex数据
    //               vm.refreshCurrentIndex(0);
    //               vm.refreshSingleAnswers([]);
    //               vm.refreshMultipleAnswers([]);
    //               vm.refreshJudgeAnswers([]);
    //               vm.refreshFillAnswers([]);
    //               vm.refreshFirstCurrentTime(0);
    //               vm.$router.replace('/profile/stuscore');
    //             }, 3000)
    //           }
    //           else {
    //             Toast({
    //               message:'交卷失败，数据库错误，请重新开始考试',
    //               duration: 1500
    //             });
    //             vm.$router.replace('/home/paper/detail/' + vm.paperId)
    //           }
    //         }, 2000)
    //       }
    //     }, 1000);
    //   },
    //用户手动点击提交试卷按钮，弹出确认框
    //   clickSubmit(){
    //     MessageBox.confirm('确定要提交试卷吗?').then(action => {
    //       let result = this.handleSubmit();
    //       if (result){
    //         //等待成绩计算完毕并插入数据库表
    //         Indicator.open({
    //           text: '自动计算成绩中...',
    //           spinnerType: 'double-bounce'
    //         });
    //         setTimeout(() => {
    //           Indicator.close();
    //           Toast({
    //             message:'提交成功，请查看成绩',
    //             duration: 1500
    //           });
    //           //清除sessionStorage数据
    //           sessionStorage.removeItem("currentIndex");
    //           sessionStorage.removeItem("singleAnswers");
    //           sessionStorage.removeItem("multipleAnswers");
    //           sessionStorage.removeItem("judgeAnswers");
    //           sessionStorage.removeItem("judgeAnswers");
    //           sessionStorage.removeItem("fillAnswers");
    //           sessionStorage.removeItem("firstCurrentTime");
    //           sessionStorage.removeItem("sno" + this.sno + "paperId" + this.paperId, result.msg);
    //           //清除vuex数据
    //           this.refreshCurrentIndex(0);
    //           this.refreshSingleAnswers([]);
    //           this.refreshMultipleAnswers([]);
    //           this.refreshJudgeAnswers([]);
    //           this.refreshFillAnswers([]);
    //           this.refreshFirstCurrentTime(0);
    //           this.$router.replace('/profile/stuscore');
    //         }, 4000)
    //       }
    //       else {
    //         Toast({
    //           message:'交卷失败，数据库错误，请重新开始考试',
    //           duration: 1500
    //         });
    //         this.$router.replace('/home/paper/detail/' + this.paperId)
    //       }
    //     },() => {
    //       //点击取消按钮操作
    //     })
    //   },
    //最终提交答案，包含用户手动点击提交按钮和到时自动提交
    //   async handleSubmit() {
    //     this.timeUsed = new Date().getTime() - this.firstCurrentTime;
    //     clearTimeout(this.timer);

    //将考试答案数据提交给后台
    // const {sno, paperId, singleAnswers, multipleAnswers, judgeAnswers, fillAnswers, timeUsed} = this;
    // let result = await reqSubmitPaper({sno, paperId, singleAnswers, multipleAnswers, judgeAnswers, fillAnswers, timeUsed});
    // if (result.statu == 0) {
    //交卷成功
    /*//清除sessionStorage数据
          sessionStorage.removeItem("currentIndex");
          sessionStorage.removeItem("singleAnswers");
          sessionStorage.removeItem("multipleAnswers");
          sessionStorage.removeItem("judgeAnswers");
          sessionStorage.removeItem("judgeAnswers");
          sessionStorage.removeItem("fillAnswers");
          sessionStorage.removeItem("firstCurrentTime");
          sessionStorage.removeItem("sno" + this.sno + "paperId" + this.paperId, result.msg);
          //清除vuex数据
          this.refreshCurrentIndex(0);
          this.refreshSingleAnswers([]);
          this.refreshMultipleAnswers([]);
          this.refreshJudgeAnswers([]);
          this.refreshFillAnswers([]);
          this.refreshFirstCurrentTime(0);*/
    // console.log(rusult.msg);
    //   return true;
    // }
    // else {
    //   return false;
    // }
  },
  //点击返回按钮
  //   toBack() {
  //     MessageBox.confirm('系统将自动提交试卷，请确认是否离开考试?').then(action => {
  //       Toast({
  //         message: '可到我的页面查看成绩',
  //         duration: 1500
  //       });
  //       //提交试卷
  //       let result = this.handleSubmit();
  //       if (result){
  //         //清除sessionStorage数据
  //         sessionStorage.removeItem("currentIndex");
  //         sessionStorage.removeItem("singleAnswers");
  //         sessionStorage.removeItem("multipleAnswers");
  //         sessionStorage.removeItem("judgeAnswers");
  //         sessionStorage.removeItem("judgeAnswers");
  //         sessionStorage.removeItem("fillAnswers");
  //         sessionStorage.removeItem("firstCurrentTime");
  //         sessionStorage.removeItem("sno" + this.sno + "paperId" + this.paperId, result.msg);
  //         //清除vuex数据
  //         this.refreshCurrentIndex(0);
  //         this.refreshSingleAnswers([]);
  //         this.refreshMultipleAnswers([]);
  //         this.refreshJudgeAnswers([]);
  //         this.refreshFillAnswers([]);
  //         this.refreshFirstCurrentTime(0);
  //         //返回试卷详情页面
  //         this.$router.isBack = true;
  //         this.$router.replace('/home')
  //       }
  //       else {
  //         Toast({
  //           message:'交卷失败，数据库错误，请重新开始考试',
  //           duration: 1500
  //         });
  //         this.$router.isBack = true;
  //         this.$router.replace('/home/paper/detail/' + this.paperId)
  //       }
  //     }, () => {
  //       //点击取消按钮操作
  //     })

  //   },
  /*touchToBack() {
        this.toBack()
        // 进入页面时压入的本地连接已消耗，重新给history压入一个本地的连接
        window.history.pushState(null, null, document.URL);
      },*/
  //获取当前题目填写的答案
  getCurrentAnswer() {
    //获取单选题当前答案
    if (this.currentIndex < this.queNumInfo.singleNum) {
      const currentAnswer = this.singleAnswers[this.currentIndex];
      if (currentAnswer) {
        this.singleAnswer = currentAnswer;
      } else {
        const { currentIndex, singleAnswer } = this;
        this.recordSingleAnswers({ currentIndex, singleAnswer });
      }
    }
    //获取多选题当前答案
    else if (
      this.currentIndex <
      this.queNumInfo.singleNum + this.queNumInfo.multipleNum
    ) {
      const currentAnswer = this.multipleAnswers[
        this.currentIndex - this.queNumInfo.singleNum
      ];
      if (currentAnswer) {
        this.multipleAnswer = currentAnswer;
      } else {
        const { currentIndex, multipleAnswer } = this;
        this.recordMultipleAnswers({ currentIndex, multipleAnswer });
      }
    }
    //获取判断题当前答案
    else if (
      this.currentIndex <
      this.queNumInfo.singleNum +
        this.queNumInfo.multipleNum +
        this.queNumInfo.judgeNum
    ) {
      const currentAnswer = this.judgeAnswers[
        this.currentIndex -
          this.queNumInfo.singleNum -
          this.queNumInfo.multipleNum
      ];
      if (currentAnswer) {
        this.judgeAnswer = currentAnswer;
      } else {
        const { currentIndex, judgeAnswer } = this;
        this.recordJudgeAnswers({ currentIndex, judgeAnswer });
      }
    }
    //获取填空题当前答案
    else {
      const currentAnswer = this.fillAnswers[
        this.currentIndex -
          this.queNumInfo.singleNum -
          this.queNumInfo.multipleNum -
          this.queNumInfo.judgeNum
      ];
      if (currentAnswer) {
        this.fillAnswer = currentAnswer;
      } else {
        const { currentIndex, fillAnswer } = this;
        this.recordFillAnswers({ currentIndex, fillAnswer });
      }
    }
  },
  // components: {
  //   HeaderTop
  // },
  watch: {
    currentIndex() {
      this.percentage = parseInt(
        ((this.currentIndex + 1) / this.queNumInfo.totalNum) * 100
      );
      sessionStorage.removeItem("currentIndex");
      sessionStorage.setItem("currentIndex", this.currentIndex);
    },
    singleAnswers() {
      sessionStorage.removeItem("singleAnswers");
      sessionStorage.setItem(
        "singleAnswers",
        JSON.stringify(this.singleAnswers)
      );
    },
    multipleAnswers: function() {
      sessionStorage.removeItem("multipleAnswers");
      sessionStorage.setItem(
        "multipleAnswers",
        JSON.stringify(this.multipleAnswers)
      );
    },
    judgeAnswers() {
      sessionStorage.removeItem("judgeAnswers");
      sessionStorage.setItem("judgeAnswers", JSON.stringify(this.judgeAnswers));
    },
    fillAnswers() {
      sessionStorage.removeItem("fillAnswers");
      sessionStorage.setItem("fillAnswers", JSON.stringify(this.fillAnswers));
    }
  }
};
</script>

<style scoped>
.box {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
}
.box-left {
  width: 30%;
  display: flex;
  box-sizing: border-box;
  padding: 20px 0px 0px 80px;
}
.box-right {
  width: 70%;
  display: flex;
  box-sizing: border-box;
  padding: 20px 0px 0px 80px;
}
.paper_card {
  /* background-color: #f5f5f5; */
  width: 100%;
  padding-bottom: 50px;
}
.paper_card .card_title {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.paper_card .card_options .options .options_title {
  display: flex;
  color: #4ab8a1;
}
.paper_card .card_options .options .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 6px;
}
.paper_card .card_options .options .row .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 45px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.paper_card .card_options .options .row .item > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #789;
  border-radius: 12px;
  color: #789;
  cursor: pointer;
}
.paper_container {
  width: 100%;
  margin: 15px auto;
  margin-bottom: 15px;
}
/* .paper_container .section {
  display: block;
} */
.paper_container .que .conten {
  height: 24px;
  line-height: 24px;
}
.paper_container .que .content .que_type {
  display: flex;
  color: #4ab8a1;
}
.paper_container .que .content .que_content {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
}
.paper_container .que .content .que_score {
  color: #4ab8a1;
}
.paper_container .que .content .single_option,
.paper .paper_container .que .content .multiple_option,
.paper .paper_container .que .content .judge_option,
.paper .paper_container .que .content .fill_option {
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
}
.paper_container .que .content .single_option .options {
  position: relative;
  display: inline-block;
  height: 30px;
  line-height: 30px;
}
.paper_container .que .content .multiple_option .options,
.paper_container .que .content .judge_option .options,
.paper_container .que .content .fill_option .options {
  position: relative;
  display: flex;
  height: 30px;
}
.paper_container .paper_button {
  z-index: 100;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}
.paper_container .paper_button > button {
  width: 150px;
}
</style>

