mn-h5/src/views/exam/test.vue

<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>
    <correctAnswerMask
      :question="wrongQuestion"
      :no="wrongQuestionIndex"
      @close="
        () => {
          correctAnswerVisible = false;
        }
      "
      v-if="correctAnswerVisible"
    ></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="headimg" />
              <div class="driverInfo">
                <div>姓名：{{ username }}</div>
                <div>性别：{{ sex }}</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="container2-row1">
            <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 class="answer-tip">您选择的答案：</span>
              <div style="display: flex; align-items: center">
                <span>选项:</span>
                <div v-if="list[listIndex].questionType < 3" 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 v-if="list[listIndex].questionType == 3" class="answer-list">
                  <div
                    v-for="(item, index) in list[listIndex].optsArr"
                    :key="index"
                    class="answer-list-item"
                    @click="selectExamAnswers(item)"
                    :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 class="coll">
              <table border="0" class="coll-table-topic">
                <tr :key="index" v-for="(item, index) in list.length / 10">
                  <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"
                       :class="{
                      'text-red': list[index * 10 + _index].isError,
                    }"
                    >
                      {{list[index * 10 + _index ].userAnswerLetter || "" }}
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="container2-row2">
            <div class="w-half">
              <div class="left-line1">
                操作提示：{{ questionTypeMap[list[listIndex].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>
        <!-- <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 :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">
        <img
          class="icon"
          @click="
            () => {
              router.back();
            }
          "
          src="@/assets/img/backButton.png"
        />
        <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 correctAnswerMask from '@/components/mask/correctAnswerMask.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, useRouter } 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 router = useRouter();

    const { subjectMap, carTypeMap } = useStringMap();
    let subject = subjectMap[Number(useRoute().query?.subject)];
    let sex = '男';
    let carType = carTypeMap[useRoute().query?.gs as string];
    let {
      list,
      beforeSubmitVisible,
      listIndex,
      submitScore,
      changeListIndex,
      selectExamAnswer,
      beforeTopic,
      nextTopic,
      getPgae,
      selectExamAnswers,
      correctScore,
      errorScore,
      submitVisible,
      wrongQuestion,
      wrongQuestionIndex,
      correctAnswerVisible,
    } = 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'],
      questionTypeMap: ['', '判断题', '选择题', '多选题'],
      listIndex: listIndex,

      beforeTopic,
      nextTopic,
      changeListIndex,
      selectExamAnswer,
      selectExamAnswers,
      countdownTime,
      store,
      router,
      submitScore,
      beforeSubmitVisible,
      submitVisible,
      correctScore,
      errorScore,
      headimg,
      subject,
      username,
      carType,
      sex,
      wrongQuestion,
      wrongQuestionIndex,
      correctAnswerVisible,
    };
  },
  components: {
    beforeSubmitMask,
    submitMask,
    correctAnswerMask,
  },
});
</script>

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

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

.main {
  display: flex;
  border: 1px solid #c6c7c9;
}
.container3 {
  flex: 1;
}
.container2 {
  box-sizing: border-box;
  width: 613px;
  .container2-row1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 220px;
    width: 100%;
  }
  .container2-row2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 42px;
    width: 100%;
    align-content: center;
    align-items: center;
    border-top: 1px solid #b8c0cc;
    border-left: 1px solid #b8c0cc;
    text-align: left;
    font-size: 11px;
    padding-left: 8px;
    .left-line1 {
      color: #bc322d;
      text-align: left;
      font-size: 11px;
      width: 100%;
    }
    .left-line2 {
      color: #3d3c38;
      text-align: left;
      font-size: 11px;
      width: 100%;
    }
    .right {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
      padding-right: 16px;
      .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;
      }
    }
  }
}
.container1 {
  display: flex;
  width: 119px;
  flex-direction: column;
}
.coll {
  position: relative;
  display: flex;
  margin-top: 9px;

  .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 #d2d1cf;
    border-top: 1px solid #d2d1cf;
    td {
      border-bottom: 1px solid #d2d1cf;
      border-right: 1px solid #d2d1cf;

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

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

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