<template>
  <div class="center">
    <beforeSubmitMask
      v-if="beforeSubmitVisible"
      :show="beforeSubmitVisible"
      @cancel="
        () => {
          beforeSubmitVisible = false;
        }
      "
      :correctScore="correctScore"
      :errorScore="errorScore"
      :total="list.length"
      @confirm="
        () => {
          beforeSubmitVisible = false;
          submitVisible = true;
        }
      "
    ></beforeSubmitMask>
    <submitMask v-if="submitVisible" :correctScore="correctScore"></submitMask>
    <correctAnswerMask
      :question="wrongQuestion"
      :no="wrongNo"
      @close="
        () => {
          correctAnswer = false;
        }
      "
      v-if="correctAnswer"
    ></correctAnswerMask>
    <div class="box">
      <div class="main">
        <div class="container1">
          <div class="kaoti">
            <div class="kaoti-header">金牌驾考</div>
            <div class="kaoti-headerText">第01考台</div>
          </div>
          <div class="student">
            <div class="student-header">考生信息</div>
            <div class="mt10">
              <img class="driver" :src="headImage" />
              <div class="driverInfo">
                <div>姓名：{{ nickName }}</div>
                <div>性别：{{ sex }}</div>
                <div>类型：{{ vehicle }}</div>
                <div>科目：{{ subject }}</div>
              </div>
            </div>
          </div>
          <div class="restTime">
            <text class="restTime-header">剩余时间</text>
            <text class="restTime-headerText">{{ countdownTime }}</text>
          </div>
        </div>
        <div class="container2">
          <div class="container2-col1">
            <div class="topic">
              <div class="topic-header">考试题目</div>
              <div class="topic-issue">
                <span>{{ listIndex + 1 }}.{{ list[listIndex].issue }}</span>
              </div>
              <div class="mt9 topic-select">
                <div
                  v-for="(item, index) in list[listIndex].optsArr"
                  :key="index"
                  class="topic-select-item"
                >
                  {{ letter[index] }}.<span>{{ item }}</span>
                </div>
                <!-- <div class="topic-select-item">B.<span>xx</span></div> countdown-->
              </div>
            </div>
            <div class="answer">
              <text v-if="list[listIndex].questionType < 3" class="answer-tip"
                >您选择的答案：{{
                  findAnswerLetter(list[listIndex].userAnswer)
                }}</text
              >
              <text v-if="list[listIndex].questionType == 3" class="answer-tip"
                >您选择的答案：{{
                  findAnswerLetter(list[listIndex].userAnswer)
                }}</text
              >
              <div style="display: flex; align-items: center">
                <span>选项:</span>
                <div class="answer-list">
                  <div
                    v-for="(item, index) in list[listIndex].optsArr"
                    :key="index"
                    class="answer-list-item"
                    @click="selectExamAnswer(item, index)"
                    :class="{
                      answer_selected:
                        list[listIndex].userAnswer.includes(item),
                    }"
                  >
                    {{ letter[index] }}
                  </div>
                  <!-- <div class="answer-list-item answer-list-item_select">B</div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="container2-row2">
            <div class="operate">
              <div class="w-half">
                <div class="left-line1">
                  操作提示：{{ list[listIndex].questionType | questionType }}
                </div>
                <div class="left-line2">
                  请在备选答案中选择你认为正确的答案！
                </div>
              </div>
              <div class="w-half">
                <div class="right">
                  <div
                    @click="beforeTopic"
                    class="right-button1"
                    :class="{
                      button1_disabled: listIndex == 0,
                    }"
                  >
                    上一题
                  </div>
                  <div
                    @click="nextTopic"
                    class="right-button1"
                    :class="{
                      button1_disabled: listIndex == list.length - 1,
                    }"
                  >
                    下一题
                  </div>
                  <div @click="submitScore" class="right-button2">交卷</div>
                </div>
              </div>
            </div>
            <!-- <div class="coll">
              <table border="0" class="coll-table-topic">
                <tr
                  class="coll-table-topicTr"
                  :key="index"
                  v-for="(item, index) in list.length / 10"
                >
                  <td
                    v-for="(_item, _index) in 10"
                    :class="{
                      'coll-table-topicTd': true,
                      collselected: index * 10 + _index == listIndex,
                    }"
                    :data-key="index * 10 + _index + 1"
                    :key="_index"
                    @click="changeListIndex"
                  >
                    <div
                      style="white-space: nowrap"
                      :data-key="index * 10 + _index + 1"
                      class="coll-table-topic-item"
                    >
                      {{ index * 10 + _index + 1 }}
                    </div>
                  </td>
                </tr>
              </table>
            </div> -->
          </div>
        </div>
        <div class="container3">
          <div class="coll">
            <table border="0" class="coll-table-topic">
              <!-- <tr>
                <td class="coll-table-topic-item bg-498ef5">
                  <div class="coll-table-topic-item coll-header1-row bg-498ef5">题目</div>
                </td>
                <td
                  class="coll-table-topic-item bg-498ef5"
                  v-for="(item, index) in 10"
                  :key="index"
                >
                  <div class="coll-table-topic-item coll-header1-row bg-498ef5">
                    {{ index + 1 }}列
                  </div>
                </td>
              </tr> -->

              <tr
                class="coll-table-topicTr"
                :key="index"
                v-for="(item, index) in list.length / rowNum"
              >
                <!-- <td class="coll-table-topic-item bg-498ef5">
                  <div style="white-space: nowrap">{{ index + 1 }}行</div>
                </td> -->
                <td
                  class="coll-table-topicTr-td"
                  v-for="(_item, _index) in rowNum"
                  :class="{
                    collselected: index * rowNum + _index == listIndex,
                  }"
                  :data-key="index * rowNum + _index + 1"
                  :key="_index"
                  @click="changeListIndex"
                >
                  <div
                
                    style="white-space: nowrap"
                    :data-key="index * rowNum + _index + 1"
                    class="coll-table-topic-item"
                    :class="{
                      'text-red': list[index * rowNum + _index].isError,
                    }"
                  >
                    {{ list[index * rowNum + _index].userAnswerLetter || "" }}
                    <!-- {{ index * rowNum + _index + 1 }} -->
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="bottom">
        <img
          class="icon"
          @click="
            () => {
              back();
            }
          "
          src="@/assets/img/backButton.png"
        />
        <image
          mode="heightFix"
          class="answer-img"
          v-if="list[listIndex].image"
          :src="list[listIndex].image"
        />
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/index.js";
import beforeSubmitMask from "./components/beforeSubmitMask.vue";
import submitMask from "./components/submitMask.vue";
import correctAnswerMask from "./components/correctAnswerMask.vue";
export default {
  data() {
    return {
      sex: "男",
      vehicle: "",
      rowNum: 10,
      beforeSubmitVisible: false,
      submitVisible: false,
      correctAnswer: false,
      nickName: "",
      subject: "",
      subjectMap: ["科目零", "科目一", "科目二", "科目三", "科目四"],
      headImage: "",
      carType: "",
      listIndex: 0,
      wrongTopicIndex: 1,
      letter: ["A", "B", "C", "D", "E", "F"],
      list: [
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
        {
          createTime: "2021-11-05 10:25:51",
          id: 20,
          image: null,
          imageYdt: null,
          answer: "√",
          answerkeyword: null,
          explainGif: "https://ndata.zzxcx.net/qb/gif/20.gif",
          explainJq: "题目中看到“追究”.答对；“不追究”.答错。",
          explainJs:
            "《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。",
          explainMp3:
            "https://ndata.zzxcx.net/qb/mp3/explain20.mp3",
          issue: "对未取得驾驶证驾驶机动车的，追究其法律责任。",
          opts: "√-×",
          optsArr: ["√", "×"],
          skillkeyword: "追究-答对",
          titlekeyword: "追究",
          issuemp3:
            "https://ndata.zzxcx.net/qb/issue/issue20.mp3",
          answermp3:
            "https://ndata.zzxcx.net/qb/answer/answer20.mp3",
          explainjsmp3:
            "https://ndata.zzxcx.net/qb/explainjs/explainJS20.mp3",
          liceCar: "1",
          liceBus: "1",
          liceTruck: "1",
          liceMoto: "0",
          sequeIssue: "2",
          classIssue: "32",
          placeIssue: "0",
          excellIssue: "1",
          copyIssue: "0",
          mockIssue: "0",
          sequeIssueName: "练习二",
          placeIssueName: null,
          excellIssueName: "必学题一",
          classIssueName: "刑法题",
          questionType: 1,
          subject: 1,
          classSort: 16,
          excellSort: 39,
          sequeSort: 118,
          placeSort: null,
          userAnswer: "",
        },
      ],
      wrongTopicIssue: "",
      wrongNo: 1,
      wrongQuestion: {},
      wrongTopicOptsArr: [],
      wrongTopicAnswer: [],
      wrongTopicuserAnswer: [],
      wrongImage: "",
      beginTimeStrap: 1646988300000,
      endTimeStrap: 164698560000,
      correctScore: 0,
      errorScore: 0,
      countdownTime: "45:00",
      countdownTimer: 0,
      carTypeMap: {
        liceBus: "客车",
        liceCar: "小车",
        liceMoto: "摩托",
        liceTruck: "货车",
      },
    };
  },
  filters: {
    questionType: function (questionType) {
      questionType = Number(questionType);
      let questionTypeName = "";
      switch (questionType) {
        case 1:
          questionTypeName = "判断题";
          break;
        case 2:
          questionTypeName = "选择题";
          break;
        case 3:
          questionTypeName = "多选题";
          break;
      }

      return questionTypeName;
    },
  },
  watch: {
    listIndex(newVal, oldVal) {
      if (newVal !== oldVal) {
        if (this.list[oldVal].questionType == 3) {
          let userAnswerLetter = [];
          if (
            this.list[oldVal].userAnswer &&
            this.list[oldVal].userAnswer.sort().toString() !==
              this.list[oldVal].answer.split("-").sort().toString()
          ) {
            this.$set(this.list[oldVal], "isError", true);
            this.list[oldVal].userAnswer.forEach((element) => {
              userAnswerLetter.push(
                this.letter[this.list[oldVal].optsArr.indexOf(element)]
              );
            });
            this.$set(
              this.list[oldVal],
              "userAnswerLetter",
              userAnswerLetter.sort().join("")
            );
            this.correctAnswer = true;
            this.wrongQuestion = this.list[oldVal];
            this.wrongNo = oldVal;
          } else {
            this.$set(
              this.list[oldVal],
              "userAnswerLetter",
              userAnswerLetter.join("")
            );
            this.correctAnswer = false;
          }
        } else if (this.list[oldVal].questionType < 3) {
          let userAnswerLetter = [];
          if (
            this.list[oldVal].userAnswer &&
            this.list[oldVal].userAnswer !== this.list[oldVal].answer
          ) {
            this.$set(
              this.list[oldVal],
              "userAnswerLetter",
              this.letter[
                this.list[oldVal].optsArr.indexOf(this.list[oldVal].userAnswer)
              ]
            );
            this.$set(this.list[oldVal], "isError", true);
            this.correctAnswer = true;
            this.wrongQuestion = this.list[oldVal];
            this.wrongNo = oldVal;
          } else {
            this.$set(
              this.list[oldVal],
              "userAnswerLetter",
              this.letter[
                this.list[oldVal].optsArr.indexOf(this.list[oldVal].userAnswer)
              ]
            );
            this.correctAnswer = false;
          }
        }
      }
    },
  },
  methods: {
    findAnswerLetter(userAnswer) {
      if (!userAnswer) {
        return "";
      }
      let letter = [];
      if (Array.isArray(userAnswer)) {
        userAnswer.forEach((item) => {
          letter.push(
            this.letter[this.list[this.listIndex].optsArr.indexOf(item)]
          );
        });
      } else {
        letter.push(
          this.letter[this.list[this.listIndex].optsArr.indexOf(userAnswer)]
        );
      }
      letter.sort();
      return letter.join(" ");
    },
    getTimeStr(timeStrap) {
      let timer = new Date(timeStrap);
      let str = `${timer.getMinutes()}:${timer.getSeconds()}`;
      return str;
    },
    back() {
      uni.navigateBack();
    },
    changeListIndex(e) {
      console.log(e);
      this.listIndex = Number(e.currentTarget.dataset.key - 1);
    },
    beforeTopic() {
      if (this.listIndex == 0) {
        return;
      }
      this.listIndex = this.listIndex - 1;
    },
    nextTopic() {
      if (this.listIndex == this.list.length - 1) {
        return;
      }
      this.listIndex = this.listIndex + 1;
    },
    selectExamAnswer(item, index) {
      if (this.list[this.listIndex].isComplete) {
        return;
      }
      if (this.list[this.listIndex].questionType < 3) {
        this.$set(this.list[this.listIndex], "isComplete", true);
      }

      if (this.list[this.listIndex].questionType < 3) {
        this.$set(this.list, this.listIndex, {
          ...this.list[this.listIndex],
          userAnswer: item,
        });
      } else {
        let userAnswer = [];
        userAnswer = [...this.list[this.listIndex].userAnswer];
        userAnswer.includes(item)
          ? (userAnswer = userAnswer.filter((_item) => {
              return item !== _item;
            }))
          : userAnswer.push(item);
        this.$set(this.list, this.listIndex, {
          ...this.list[this.listIndex],
          userAnswer: userAnswer,
        });
      }

      // this.list[this.listIndex] = { ...this.list[this.listIndex], userAnswer: item };
      // console.log(list.value[listIndex.value], item);
    },
    submitScore() {
      //重置为0,不然会有数据不准确的bug
      this.correctScore = 0;
      this.errorScore = 0;
      this.list.forEach((item) => {
        this.correctScore += item.answer == item.userAnswer ? 1 : 0;
        if (item.userAnswer) {
          this.errorScore += item.answer == item.userAnswer ? 0 : 1;
        }
      });
      this.beforeSubmitVisible = true;
      // this.$store.commit('SET_ENDTIME', {
      //     endTime: `${dayjs().format('MM-DD HH:mm:ss')}`,
      // });
    },
  },
  components: {
    beforeSubmitMask,
    submitMask,
    correctAnswerMask,
  },
  onLoad(option) {
    let that = this;
    this.nickName =
      uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo").nickName;
    this.headImage =
      uni.getStorageSync("userInfo") &&
      uni.getStorageSync("userInfo").headImage;
    this.rowNum = option.subject == 1 ? 10 : 5;
    this.carType = option.carType;
    this.subject = this.subjectMap[Number(option.subject)];
    this.carType = this.carTypeMap[option.type];
    this.vehicle = option.vehicle;
    api.open
      .questionInfoSelectTestK14QuestionInfoList({
        subject: Number(option.subject),
        gs:option.gs,
        liceBus: option.liceBus,
        liceCar: option.liceCar,
        liceTruck: option.liceTruck,
        liceMoto: option.liceMoto,
      })
      .then((res) => {
        res.rows.forEach((item) => {
          item.optsArr = item.opts.split("-");
          item.userAnswer = "";
        });
        console.log("赋值");
        this.list = res.rows;
      });

    //开始倒计时
    this.countdownTimer = setInterval(() => {
      this.beginTimeStrap = this.beginTimeStrap - 1000;
      this.countdownTime = this.getTimeStr(this.beginTimeStrap);
      if (this.beginTimeStrap == this.endTimeStrap) {
        this.submitScore();
        clearInterval(that.countdownTimer);
      }
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
.text-red {
  color: red;
}
.w-half {
  width: 50%;
}
.mt10 {
  margin-top: 10rpx;
}
.mt6 {
  margin-top: 6rpx;
}
.mt13 {
  margin-top: 13rpx;
}
.border-none {
  border: none;
}
.bg-498ef5 {
  background: #498ef5;
}
.bottom {
  display: flex;
  position: relative;
  justify-content: center;
  border-left: 1rpx solid #c6c7c9;
  border-bottom: 1rpx solid #c6c7c9;
  border-right: 1rpx solid #c6c7c9;
  height: 74rpx;
  .icon {
    width: 35rpx;
    height: 35rpx;
    position: absolute;
    left: 17rpx;
    bottom: 21rpx;
  }
}
.center {
  display: flex;
  align-content: flex-start;
  height: 100vh;
  padding-top: 5rpx;
  padding-bottom: 5rpx;
  padding-left: 7rpx;
  padding-right: 7rpx;
  background: #fff;
}
.box {
  overflow: hidden;
  background: #f6f2f1;
}

.main {
  display: flex;
  border: 1rpx solid #c6c7c9;
}
.container3 {
  flex: 1;
  width: 205rpx;
  align-items: flex-end;
  align-content: flex-end;
  display: flex;
  padding-bottom: 5rpx;
}
.container2 {
  box-sizing: border-box;
  width: 410rpx;
  border-right: 1rpx solid #b8c0cc;
  .container2-col1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 220rpx;
    width: 100%;
    align-content: flex-start;
  }
  .container2-row2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 42rpx;
    width: 100%;
    align-content: center;
    align-items: center;
    border-top: 1rpx solid #b8c0cc;
    border-left: 1rpx solid #b8c0cc;
    text-align: left;
    font-size: 11rpx;
    padding-left: 8rpx;
    .left-line1 {
      color: #bc322d;
      text-align: left;
      font-size: 11rpx;
      width: 100%;
    }
    .left-line2 {
      color: #3d3c38;
      text-align: left;
      font-size: 11rpx;
      width: 100%;
    }
    .right {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
      padding-right: 16rpx;
      .right-button1 {
        width: 58rpx;
        height: 28rpx;
        background: #fffffb;
        opacity: 1;

        font-size: 12rpx;
        color: #3d3c38;
        line-height: 28rpx;
        text-align: center;
        margin-left: 16rpx;
      }
      .button1_disabled {
        background-color: #f9faf5;
        color: #979893;
      }
      .right-button2 {
        width: 58rpx;
        height: 28rpx;
        background: #fffffb;
        opacity: 1;

        font-size: 12rpx;

        line-height: 28rpx;
        text-align: center;
        margin-left: 16rpx;
      }
    }
  }
}
.container1 {
  display: flex;
  width: 119rpx;
  flex-direction: column;
}
.coll {
  position: relative;
  display: flex;
  margin-top: 9rpx;
  width: 100%;
  justify-content: center;
  align-content: flex-end;
  align-items: flex-end;

  .coll-header1 {
    width: 231rpx;
    height: 21rpx;
    border-spacing: 0;
    border-right: 1rpx solid #b8c0cc;
    div {
      box-sizing: border-box;
    }
    .coll-header1-row {
      width: 21rpx;
      height: 21rpx;
      line-height: 21rpx;
      background: #498ef5;
      border-right: 1rpx solid #b8c0cc;
      font-size: 10rpx;
      white-space: nowrap;
    }
    // .coll-header1-row_border{
    //   border-bottom: 1px solid #fff;
    // }
  }
  .coll-header2 {
    // position: absolute;
    // top: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    border-spacing: 0;
    height: 237rpx;
    width: 21rpx;

    .coll-header2-col {
      width: 23rpx;
      height: 25rpx;
      border-top: 1rpx solid #b8c0cc;
      font-size: 10rpx;
      line-height: 21rpx;
      background: #498ef5;
      white-space: nowrap;
    }
  }

  .coll-table-topic {
    background: #f2f3f5;
    border-spacing: 0;
    border-left: 1rpx solid #d2d1cf;
    border-top: 1rpx solid #d2d1cf;
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    .coll-table-topicTr {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;

      .coll-table-topicTr-td {
        flex: 1;
        text-align: center;
        display: flex;
        justify-content: center;
      }
    }
    .coll-table-topicTd {
      width: 20rpx;
      height: 20rpx;
      text-align: center;
    }

    td {
      border-bottom: 1rpx solid #d2d1cf;
      border-right: 1rpx solid #d2d1cf;

      div {
        font-size: 8rpx;

        height: 20rpx;
        line-height: 20rpx;
        text-align: center;
      }
      // font-size: 12px;
      .coll-table-topic-item {
        border: none;

        white-space: nowrap;
        div {
          white-space: nowrap;
        }
      }
    }
    .collselected {
      background: #498ef5;
      color: #fff;
    }
  }
}
.answer {
  width: 410rpx;
  font-size: 13rpx;
  text-align: left;
  height: 41rpx;
  line-height: 41rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  padding-left: 18rpx;
  padding-right: 13rpx;
  border-left: 1rpx solid #b8c0cc;
  .answer-tip {
    color: #498ef5;
    font-weight: 700;
  }
  .answer-list {
    display: flex;
    justify-content: space-between;
    width: auto;
    height: 24rpx;
    .answer_selected {
      color: #fff;
      background: #498ef5;
    }
    .answer-list-item {
      width: 24rpx;
      height: 24rpx;
      line-height: 24rpx;
      border-radius: 2rpx;
      font-size: 13rpx;
      font-weight: 600;
      border: 1rpx solid #b8c0cc;
      border-radius: 6rpx;
      text-align: center;
      margin-left: 6rpx;
    }
    .answer-list-item_select {
      color: #fff;
      background: #498ef5;
    }
  }
}
.answer-img {
  height: 74rpx;
}
.topic {
  border: 1rpx solid #b8c0cc;
  width: 410rpx;
  height: 178rpx;
  position: relative;
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding-top: 6rpx;

  .topic-issue {
    font-size: 14rpx;
    padding-left: 10rpx;
    font-weight: normal;
    text-align: left;
    font-weight: 700;
  }
  .topic-header {
    display: none;
    color: #498ef5;
    background: #f6f2f1;
    top: 0;
    left: 30px;
    text-align: left;
    padding-left: 2rpx;
    padding-right: 2rpx;
    white-space: nowrap;
    font-size: 1r0px;
  }
  .topic-select {
    display: flex;
    width: 100%;
    height: 37px;
    padding-left: 10rpx;
    padding-right: 10rpx;
    font-size: 14rpx;
    flex-wrap: wrap;
  }
  .topic-select-item {
    width: 100%;
    font-size: 14rpx;
    text-align: left;
    font-weight: 700;
  }
}
.student {
  border-bottom: 1rpx solid #b8c0cc;
  width: 100%;
  height: 175rpx;
  font-size: 13rpx;
  position: relative;
  .student-header {
    color: #498ef5;
    background: #f6f2f1;
    text-align: left;
    padding-left: 2rpx;
    padding-right: 2rpx;
    white-space: nowrap;
    font-weight: 600;
    font-size: 10rpx;
    text-align: center;
    margin-top: 7rpx;
  }
  .driver {
    width: 54rpx;
    height: 54rpx;
    margin-left: 32rpx;
  }
  .driverInfo {
    font-size: 9rpx;
    font-weight: 600;
    padding-top: 10rpx;
    text-align: left;
    padding-left: 16rpx;
    div {
      margin-bottom: 6rpx;
    }
  }
}
.kaoti {
  width: 100%;
  position: relative;
  height: 46rpx;
  border-bottom: 1rpx solid #b8c0cc;
  font-size: 13rpx;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  .kaoti-header {
    color: #498ef5;
    background: #f6f2f1;
    width: 100%;
    font-size: 10rpx;
    text-align: center;
    white-space: nowrap;
    font-size: 12rpx;
  }
  .kaoti-headerText {
    font-size: 8rpx;
    font-weight: normal;
    width: 100%;
    text-align: center;
    font-size: 11rpx;
    color: #3d3c38;
  }
}
.restTime {
  width: 100%;
  position: relative;
  height: 42rpx;
  font-size: 9rpx;
  font-weight: 600;
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  // border-right: 1px solid #b8c0cc;
  .restTime-header {
    color: #498ef5;
    font-size: 11rpx;
    background: #f6f2f1;
    width: 100%;
    text-align: center;
    padding-left: 8rpx;
    padding-right: 8rpx;
    white-space: nowrap;
  }
  .restTime-headerText {
    font-size: 14rpx;
    color: #3d3c38;
    width: 100%;
    text-align: center;
  }
}
.operate {
  width: 410rpx;
  display: flex;
}
.mt6 {
  margin-top: 6rpx;
}
.mt9 {
  margin-top: 9rpx;
}
.mt19 {
  margin-top: 19rpx;
}
.font13 {
  font-size: 13rpx;
}
</style>