<template>
  <div class="center">
    <beforeSubmitMask
      :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>
    <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 mt6">
            <div class="student-header">考生信息</div>
            <div class="mt13">
              <img class="driver" :src="headimg" />
              <div class="driverInfo">
                <div>姓名：{{ username }}</div>
                <div>类型：{{ carType }}</div>
                <div>科目：{{ subject }}</div>
              </div>
            </div>
          </div>
          <div class="restTime">
            <div class="restTime-header">剩余时间</div>
            <div class="restTime-headerText">{{ countdownTime }}</div>
          </div>
        </div>
        <div class="container2">
          <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">
            <span>您选择的答案：</span>
            <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)"
                  :class="{
                    answer_selected: list[listIndex].userAnswer == item,
                  }"
                >
                  {{ letter[index] }}
                </div>
                <!-- <div class="answer-list-item answer-list-item_select">B</div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="container3">
          <div class="coll">
            <!-- <div class="coll-header1">
              <table class="coll-header1">
                <td class="coll-header1-row">题目</td>
                <td class="coll-header1-row" v-for="(item, index) in 10" :key="index">
                  {{ index + 1 }}列
                </td>
              </table>
            </div> -->
            <!-- <div class="coll-header2"> -->
            <!-- <table>
                <td class="coll-header1-row" v-for="(item, index) in 10" :key="index"></td>
              </table> -->

            <!-- <div class="coll-header2-col">题目</div> -->
            <!-- <div class="coll-header2-col" v-for="(item, index) in 10" :key="index">
                {{ index + 1 }}行
              </div>
            </div> -->
            <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 :key="index" v-for="(item, index) in list.length / 10">
                <td class="coll-table-topic-item bg-498ef5">
                  <div style="white-space: nowrap">{{ index + 1 }}行</div>
                </td>
                <td
                  v-for="(_item, _index) in 10"
                  :class="{
                    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="bottom">
        <div class="left">
          <div style="color: #bc322d; width: 100%">操作提示：选择题</div>
          <div>请在备选答案中选择你认为正确的答案！</div>
        </div>
        <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 class="mt16">
        <img class="answer-img" v-if="list[listIndex].image" :src="list[listIndex].image" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue';
import dayjs from 'dayjs';
import beforeSubmitMask from '@/components/mask/beforeSubmitMask.vue';
import submitMask from '@/components/mask/submitMask.vue';
// import Api from '@/api/api';
import { countdownTime, countdown, countdownTimer } from '@/hooks/countdown';
import { useStore } from 'vuex';
// import router from '@/router';
import { useExamTest } from '@/hooks/examTest';
import { useRoute } from 'vue-router';
import { useStringMap } from '@/hooks/stringMap';
export default defineComponent({
  setup() {
    //清除定时器
    window.clearInterval(countdownTimer.value);
    const headimg = useRoute().query?.headimg;
    const username = useRoute().query?.username;
    const store = useStore();
    const { subjectMap, carTypeMap } = useStringMap();
    let subject = subjectMap[Number(useRoute().query?.subject)];
    let carType = carTypeMap[useRoute().query?.type as string];
    let {
      list,
      beforeSubmitVisible,
      listIndex,
      submitScore,
      changeListIndex,
      selectExamAnswer,
      beforeTopic,
      nextTopic,
      getPgae,
      correctScore,
      errorScore,
      submitVisible,
    } = useExamTest();
    //设置开始时间
    store.commit('SET_BEGINTIME', {
      beginTime: `${dayjs().format('MM-DD HH:mm:ss')}`,
    });
    getPgae();

    // let list = ref<selectTestQuestionInfo.row[]>([
    //   {
    //     createTime: '2021-11-05 10:25:51',
    //     id: 20,
    //     image: null,
    //     imageYdt: null,
    //     answer: '√',
    //     answerkeyword: null,
    //     explainGif: 'https://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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://t1-1305573081.file.myqcloud.com/qb/gif/20.gif',
    //     explainJq: '题目中看到“追究”.答对；“不追究”.答错。',
    //     explainJs:
    //       '《道路交通安全法》第九十九条：未取得机动车驾驶证、机动车驾驶证被吊销或者机动车驾驶证被暂扣期间驾驶机动车的，由公安机关交通管理部门处二百元以上二千元以下罚款，可以并处十五日以下拘留。',
    //     explainMp3: 'https://t1-1305573081.file.myqcloud.com/qb/mp3/explain20.mp3',
    //     issue: '对未取得驾驶证驾驶机动车的，追究其法律责任。',
    //     opts: '√-×',
    //     optsArr: ['√', '×'],
    //     skillkeyword: '追究-答对',
    //     titlekeyword: '追究',
    //     issuemp3: 'https://t1-1305573081.file.myqcloud.com/qb/issue/issue20.mp3',
    //     answermp3: 'https://t1-1305573081.file.myqcloud.com/qb/answer/answer20.mp3',
    //     explainjsmp3: 'https://t1-1305573081.file.myqcloud.com/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: '',
    //   },
    // ]);

    // let listIndex = ref(0);
    // let submitScore = () => {
    //   let score =0
    //   list.value.forEach(item=>{
    //     score +=item.answer==item.userAnswer?1:0
    //   })
    //   store.commit('SET_ENDTIME', {
    //     endTime: `${dayjs().format('MM-DD HH:mm:ss')}`,
    //   });
    //   router.push({
    //     name: 'examScore',
    //     query: {
    //       score:score,
    //       total:list.value.length
    //     },
    //   });
    // };
    // let changeListIndex = (e: PointerEvent) => {
    //   listIndex.value = Number(e.target?.dataset?.key) - 1;
    // };
    // let selectExamAnswer = (item: string) => {
    //   list.value[listIndex.value] = { ...list.value[listIndex.value], userAnswer: item };
    //   console.log(list.value[listIndex.value], item);
    // };
    // let beforeTopic = () => {
    //   if (listIndex.value == 0) {
    //     return;
    //   }
    //   listIndex.value = listIndex.value - 1;
    // };
    // let nextTopic = () => {
    //   if (listIndex.value == list.value.length - 1) {
    //     return;
    //   }
    //   listIndex.value = listIndex.value + 1;
    // };

    // Api.studentQustionInfoSelectTestQuestionInfo({
    //   liceBus: '',
    //   liceCar: '1',
    //   liceMoto: '',
    //   liceTruck: '',
    //   subject: 1,
    // }).then((res) => {
    //   res.data.rows.forEach((item) => {
    //     item.optsArr = item.opts.split('-');
    //     item.userAnswer = '';
    //   });
    //   list.value = res.data.rows;
    // });

    onMounted(() => {
      //倒计时结束
      countdown().then((timer) => {
        window.clearInterval(timer as number);
        submitScore();
      });
    });

    return {
      list,
      letter: ['A', 'B', 'C', 'D', 'E', 'F'],
      listIndex: listIndex,
      beforeTopic,
      nextTopic,
      changeListIndex,
      selectExamAnswer,
      countdownTime,
      store,
      submitScore,
      beforeSubmitVisible,
      submitVisible,
      correctScore,
      errorScore,
      headimg,
      subject,
      username,
      carType,
    };
  },
  components: {
    beforeSubmitMask,
    submitMask,
  },
});
</script>

<style lang="scss" scoped>
.mt6 {
  margin-top: 6px;
}
.mt13 {
  margin-top: 13px;
}
.border-none {
  border: none;
}
.bg-498ef5 {
  background: #498ef5;
}
.bottom {
  margin-top: 3px;
  display: flex;
  padding: 0px 8px;
  font-size: 13px;
  flex-wrap: wrap;
  text-align: left;
  height: 100%;
  overflow-y: scroll;
  height: 46px;
  border: 1px solid #b8c0cc;
  border-radius: 6px;
  padding: 4px 0px;
  padding-left: 6px;
  padding-right: 12px;
  .left {
    display: flex;
    width: 50%;
    font-size: 12px;
    flex-wrap: wrap;
  }
  .right {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    .right-button1 {
      width: 58px;
      height: 28px;
      background: #FFFFFB;
      opacity: 1;

      font-size: 12px;
      color: #3D3C38;
      line-height: 28px;
      text-align: center;
      margin-left: 16px;
    }
    .button1_disabled{
      background-color: #F9FAF5;
      color: #979893;

    }
    .right-button2 {
      width: 58px;
      height: 28px;
      background: #FFFFFB;
      opacity: 1;

      font-size: 12px;
   
      line-height: 28px;
      text-align: center;
      margin-left: 16px;
    }
  }
}
.center {
  display: flex;

  height: 100vh;
  background: #f6f2f1;
}
.box {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 14px;
  padding-right: 14px;
  overflow: hidden;
}

.main {
  display: flex;
}
.container3 {
  flex: 1;
}
.container2 {
  box-sizing: border-box;
  padding-left: 3px;
  padding-right: 3px;
  width: 454px;
  height: 151px;
}
.container1 {
  display: flex;
  width: 73px;
  flex-direction: column;
}
.coll {
  position: relative;
  display: flex;

  .coll-header1 {
    width: 231px;
    height: 21px;
    border-spacing: 0;
    border-right: 1px solid #b8c0cc;
    div {
      box-sizing: border-box;
    }
    .coll-header1-row {
      width: 21px;
      height: 21px;
      line-height: 21px;
      background: #498ef5;
      border-right: 1px solid #b8c0cc;
      font-size: 10px;
      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: 237px;
    width: 21px;

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

  .coll-table-topic {
    background: #f2f3f5;
    border-spacing: 0;
    border-left: 1px solid #b8c0cc;
    border-top: 1px solid #fff;
    td {
      border-bottom: 1px solid #b8c0cc;
      border-right: 1px solid #b8c0cc;

      div {
        font-size: 8px;
        width: 15px;
        height: 15px;
        line-height: 15px;
      }
      // font-size: 12px;
      .coll-table-topic-item {
        border: none;

        white-space: nowrap;
        div {
          white-space: nowrap;
        }
      }
    }
    .collselected {
      background: #498ef5;
      color: #fff;
    }
  }
}
.answer {
  font-size: 13px;
  text-align: left;
  height: 31px;
  line-height: 31px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  padding-left: 18px;

  .answer-list {
    display: flex;
    justify-content: space-between;
    width: auto;
    height: 24px;
    .answer_selected {
      color: #fff;
      background: #498ef5;
    }
    .answer-list-item {
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #b8c0cc;
      border-radius: 6px;
      text-align: center;
      margin-left: 8px;
    }
    .answer-list-item_select {
      color: #fff;
      background: #498ef5;
    }
  }
}
.answer-img {

  height: 90px;
}
.topic {
  border: 1px solid #b8c0cc;
  width: 100%;
  height: 161px;
  position: relative;
  .topic-issue {
    margin-top: 8px;
    font-size: 13px;
    padding-left: 10px;
    font-weight: normal;
    text-align: left;
  }
  .topic-header {
    color: #498ef5;
    position: absolute;
    background: #f6f2f1;
    top: 0;
    left: 30px;
    transform: translate(-50%, -50%);
    text-align: left;
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
    font-size: 10px;
  }
  .topic-select {
    display: flex;
    width: 100%;
    height: 37px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    flex-wrap: wrap;
  }
  .topic-select-item {
    width: 50%;
    height: 50%;
    text-align: left;
  }
}
.student {
  border: 1px solid #b8c0cc;
  width: 70px;
  height: 125px;
  font-size: 13px;
  position: relative;
  .student-header {
    color: #498ef5;
    position: absolute;
    background: #f6f2f1;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
    font-weight: 600;
    font-size: 10px;
  }
  .driver {
    width: 57px;
    height: 57px;
  }
  .driverInfo {
    font-size: 9px;
    font-weight: 600;
    padding-top: 6px;
    text-align: left;
    padding-left: 2px;
    div {
      margin-bottom: 4px;
    }
  }
}
.kaoti {
  width: 70px;
  position: relative;
  height: 26px;
  border: 1px solid #b8c0cc;
  font-size: 13px;
  font-weight: 600;
  .kaoti-header {
    color: #498ef5;
    position: absolute;
    background: #f6f2f1;
    top: 0;
    left: 50%;
    font-size: 10px;
    transform: translate(-50%, -50%);
    text-align: left;
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
  }
  .kaoti-headerText {
    font-size: 8px;
    font-weight: normal;
    margin-top: 8px;
  }
}
.restTime {
  width: 70px;
  position: relative;
  height: 26px;
  border: 1px solid #b8c0cc;
  font-size: 9px;
  font-weight: 600;
  margin-top: 6px;
  .restTime-header {
    color: #498ef5;
    position: absolute;
    background: #f6f2f1;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }
  .restTime-headerText {
    margin-top: 7px;
    font-size: 12px;
  }
}
.mt6 {
  margin-top: 6px;
}
.mt9 {
  margin-top: 9px;
}
.mt19 {
  margin-top: 19px;
}
.font13 {
  font-size: 13px;
}
</style>