<template>
  <div class="pt30 pb30 pr30 pl30 w100vw h100vh flex flex-col">
    <div
      class="w-full h-full flex content-start items-start border-gray-200 border flex-col"
    >
      <div class="w-full flex h440">
        <div class="w215">
          <div class="w-full h50 lh50 font-semibold">视频输入设备</div>
          <div
            class="w-full h50 lh50 font-semibold"
            style="background-color: #fff5cc"
          >
            第1考台
          </div>
          <div class="pt30 pb30 pr45 pl45">
            <img src="@/assets/img/driverExam/user_img.png" />
          </div>
          <div
            style="background-color: #fff5cc"
            class="pt20 pb20 text-left pl30"
          >
            <div class="font20 font-bold">姓名 中国驾考网</div>
            <div class="font20 font-bold">性别 男</div>
            <div class="font20 font-bold">车型 C1</div>
            <div class="font20 font-bold">科目一理论考试</div>
          </div>
        </div>
        <div class="w1196 flex-1">
          <div style="background-color: #fff5cc" class="lh50 font-bold">
            考试题目
          </div>
          <div class="text-left pr20 pl20 pt20">
            <span class="font-bold"
              >{{ listIndex + 1 }}、{{list[listIndex].issue}}</span
            >
          </div>
          <div v-if="list[listIndex].questionType !== 1" class="mt30">
            <div
              v-for="(item, index) in list[listIndex].optsArr"
              :key="index"
              class="pl20 text-left font-bold"
            >
              <span>{{ switchIndexBySelect(index) }}</span> {{ item }}
            </div>
          </div>
        </div>
        <div class="w440 h440 bg-driver-exam">
          <div class="w-full">
            <div class="flex flex-wrap">
              <div class="w40 lh40 bg-primary-yellow">题号</div>
              <div
                class="w40 lh40 bg-primary-yellow"
                v-for="(item, index) in 10"
                :key="index"
              >
                {{ index + 1 }}列
              </div>
            </div>

            <div class="flex flex-col flex-wrap w-full h400 content-start">
              <div class="w40 overflow-hidden flex flex-col">
                <div
                  class="w40 lh40 bg-primary-yellow"
                  v-for="(item, index) in 10"
                  :key="index"
                >
                  {{ index + 1 }}行
                </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="
                        () => {
                          listIndex = index * 10 + _index;
                        }
                      "
                    >
                      <div
                        v-if="list[index * 10 + _index].questionType == 1"
                        style="white-space: nowrap"
                        :data-key="index * 10 + _index + 1"
                        class="coll-table-topic-item text-black"
                        :class="{
                          'text-red': list[index * 10 + _index].isError,
                        }"
                      >
                        {{ list[index * 10 + _index].userAnswer || "" }}
                      </div>
                      <div
                        v-if="list[index * 10 + _index].questionType != 1"
                        style="white-space: nowrap"
                        :data-key="index * 10 + _index + 1"
                        class="coll-table-topic-item text-black"
                        :class="{
                          'text-red': list[index * 10 + _index].isError,
                        }"
                      >
                        {{
                          switchAnswerBySelect(
                            list[index * 10 + _index].userAnswer,
                            index * 10 + _index
                          )
                        }}
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full bg-driver-exam h84 pl30 pr450 flex justify-between">
        <div class="pt15 pb15 flex w500 text-left">
          <div class="font-bold flex">
            <div class="inline-block">
              <div>剩余时间</div>
              <div class="pl20">{{ countDown }}</div>
            </div>

            <div
              v-if="list[listIndex].questionType == 1"
              class="ml90 font-bold inline-block"
            >
              您选择的答案：{{ list[listIndex].userAnswer }}
            </div>
            <div
              v-if="list[listIndex].questionType != 1"
              class="ml90 font-bold inline-block"
            >
              您选择的答案：{{
                switchAnswerBySelect(list[listIndex].userAnswer, listIndex)
              }}
            </div>
          </div>
        </div>
        <div class="flex cursor-pointer mt20">
          <!-- 答案列表 -->
          <div
            @click="list[listIndex].isComplete ? '' : setUserAnswer(_item)"
            v-for="(_item, _index) in list[listIndex].optsArr"
            :key="_index"
            class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0"
          >
            <span v-if="list[listIndex].questionType == 1">{{
              switchIndexByJudge(_index)
            }}</span>
            <span v-if="list[listIndex].questionType !== 1">{{
              switchIndexBySelect(_index)
            }}</span>
          </div>
          <!-- <div class="w46 lh46 h46 answer-select font20 font-bold flex-grow-0">
            ×
          </div> -->
        </div>
      </div>
      <div
        class="border-b-gray-200 border-b w-full h84 text-left pr30 pl30 flex justify-between"
      >
        <div class="text-red-500 pt15 font-bold">
          操作提示：{{ getProblemTypeName(list[listIndex].questionType) }}
        </div>
        <div class="flex h-full w390 items-center justify-between">
          <div @click="preProblem()" class="w120 lh46 bottom-button">
            上一题
          </div>
          <div @click="nextProblem()" class="w120 lh46 bottom-button">
            下一题
          </div>
          <div
            @click="
              () => {
                dialogVisible = true;
              }
            "
            class="w120 lh46 bottom-button"
          >
            交卷
          </div>
        </div>
      </div>
    </div>
    <div class="w-full pt15 h280 pb15 flex-1">
      <div class="h-full">
        <img
          class="h-full mr-auto ml-auto"
          v-if="list[listIndex].image"
          :src="list[listIndex].image"
        />
      </div>
    </div>

    <mProblemAlert
      v-model:visible="alertVisible"
      title="开启"
      content="禁止重复"
    ></mProblemAlert>
    <mProblemDialog
      v-model:visible="dialogVisible"
      @confirm="submitDriveExam()"
      title="提示"
      content="是否真的要交卷（按确定键交卷，按取消键继续答题）"
    ></mProblemDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
import mProblemDialog from "@/components/mProblemDialog/index.vue";
import api from "@/api";
import { openApi } from "@/api/open/type";
import { useDriverExam } from "@/hooks/exam/driverExam";
import { useRoute } from "vue-router";
export default defineComponent({
  name: "driverExam",
  setup() {
    const route = useRoute();
    return {
      alertVisible: ref(false),
      dialogVisible: ref(false),
      ...useDriverExam(
        api.open.questionInfoSelectTestK14QuestionInfoList({
          subject: Number(route.query.subject),
          gs: route.query.gs as string,
        })
      ),
    };
  },

  components: {
    mProblemAlert,
    mProblemDialog,
  },
});
</script>

<style lang="scss" scoped>
.text-red {
  color: red;
}
.pr23vw {
  padding-right: 23vw;
}
.bottom-button {
  text-align: center;
  border: 1px solid #f9de5b;
  cursor: pointer;
}
.bottom-button:hover {
  background: #fff7cc;
}

.answer-select {
  background: #fffdf2;

  border: 1px solid #f9de5b;
}
.answer-select:hover {
  background: #fff7cc;
}
.bg-driver-exam {
  background: #f5f5f3;
}
.h100vh {
  height: 100vh;
}
.w1196 {
  width: 1196px;
}
.bg-primary-yellow {
  background-color: #f9de5b;
}

.coll {
  position: relative;
  display: flex;
  cursor: pointer;

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

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

        white-space: nowrap;
        div {
          white-space: nowrap;
        }
      }
    }
    .collselected {
      background: #f9de5b;
      color: #fff;
    }
  }
}
</style>