<template>
  <div class="bg-gray w-full min-h-screen">
    <div class="pt30 pr30 pl30 pb30 w-full">
      <div class="w-full gray-border flex flex-wrap">
        <div class="pt30 pl30 text-left font26 pb50 bg-white flex-1">
          <span
            >{{ listIndex + 1 }}.<span v-html="issueAutoRead()"></span
          ></span>
          <div v-if="list[listIndex].questionType === 1">
            <div v-for="(item, index) in list[listIndex].optsArr" :key="index">
              {{ switchIndexBySelect(index) }}.{{
                item == "√" ? "正确" : "错误"
              }}
            </div>
          </div>
          <div v-if="list[listIndex].questionType !== 1">
            <div v-for="(item, index) in list[listIndex].optsArr" :key="index">
              {{ switchIndexBySelect(index) }}.{{ item }}
            </div>
          </div>

          <div
            v-if="list[listIndex].isComplete && !list[listIndex].isError"
            class="inline-block pl15 pr5 mt15"
            style="background-color: #d9ffeb"
          >
            <img
              class="inline-block w42 h42 align-middle"
              src="@/assets/img/studySkill/smile_express.png"
            />
            <span class="lh60 align-middle" style="color: #21a65f">
              恭喜！回答正确！</span
            >
          </div>
          <div
            v-if="list[listIndex].isComplete && list[listIndex].isError"
            class="inline-block pl15 pr15 mt15"
            style="background-color: rgba(255, 220, 217, 1)"
          >
            <img
              class="inline-block w42 h42 align-middle"
              src="@/assets/img/studySkill/cry_express.png"
            />
            <span
              class="lh60 align-middle"
              v-if="list[listIndex].questionType !== 3"
              style="color: rgba(239, 54, 41, 1)"
            >
              正确答案是:{{
                switchAnswerBySelect(list[listIndex].answer, listIndex)
              }}</span
            >
            <span
              v-if="list[listIndex].questionType === 3"
              style="color: rgba(239, 54, 41, 1)"
            >
              正确答案是:{{
                switchAnswerBySelect(
                  list[listIndex].answer.split("-"),
                  listIndex
                )
              }}</span
            >
          </div>
          <div>
            <div
              @click="playIssueAudio"
              class="mt30 w88 items-center bottom-button flex h40 justify-center"
            >
              <img
                class="w18 h18 inline-block mr10"
                src="@/assets/img/studySkill/voice_icon.png"
              />
              <span class="font16">读题</span>
            </div>
          </div>
          <div v-if="list[listIndex].questionType === 1" class="flex mt15">
            <div
              @click="setUserAnswerAndRes(item)"
              v-for="(item, index) in list[listIndex].optsArr"
              :key="index"
              class="w57 lh46 bottom-button mr15"
              :class="{
                'bg-primary-yellow': list[listIndex].userAnswer == item,
              }"
            >
              {{ item }}
            </div>
          </div>
          <div v-if="list[listIndex].questionType == 2" class="flex mt15">
            <div
              @click="setUserAnswerAndRes(item)"
              v-for="(item, index) in list[listIndex].optsArr"
              :key="index"
              class="w57 lh46 bottom-button mr15"
              :class="{
                'bg-primary-yellow': list[listIndex].userAnswer == item,
              }"
            >
              {{ switchIndexBySelect(index) }}
            </div>
          </div>
          <div v-if="list[listIndex].questionType == 3" class="flex mt15">
            <div
              @click="
                list[listIndex].userAnswer.includes(item)
                  ? cancelUserAnswer(item)
                  : setUserAnswer(item)
              "
              v-for="(item, index) in list[listIndex].optsArr"
              :key="index"
              class="w57 lh46 bottom-button mr15"
              :class="{
                'bg-primary-yellow': list[listIndex].userAnswer.includes(item),
              }"
            >
              {{ switchIndexBySelect(index) }}
            </div>
            <div
              @click="setUserAnswerAndRes(list[listIndex].userAnswer)"
              class="bg-primary-yellow font16 lh48 w110 text-center round4 cursor-pointer"
            >
              确定
            </div>
          </div>
        </div>
        <div class="w430 pr30 flex items-center bg-white">
          <img
            class="w400"
            v-if="list[listIndex].image"
            :src="list[listIndex].image"
          />
        </div>
      </div>
      <div class="w-full pt30">
        <div class="w1200 flex justify-between mr-auto ml-auto">
          <div
            @click="preProblem()"
            @keydown.up="preProblem()"
            class="w120 lh46 bottom-button lh46"
          >
            上一题
          </div>
          <div
            @click="nextProblem()"
            @keydown.down="nextProblem()"
            class="w120 lh46 bottom-button lh46"
          >
            下一题
          </div>
          <div
            @click="
              () => {
                alertVisible = true;
              }
            "
            class="w120 lh46 bottom-button lh46"
          >
            本题解析
          </div>
          <div @click="playIssueAudio()" class="w120 lh46 bottom-button lh46">
            语音播报
          </div>
          <div class="w120 lh46 bottom-button lh46">不设为错题</div>
          <div
            @click="
              () => {
                dialogVisible = true;
              }
            "
            class="w120 lh46 bottom-button lh46"
          >
            交卷
          </div>
        </div>
      </div>
      <div class="w-full mt20">
        <div
          class="flex w1200 mr-auto ml-auto h30 items-center content-center justify-around"
        >
          <div class="flex items-center">
            <div class="pr2 pl2">转到</div>
            <input
              @keydown.enter="setPageToListIndex(listPageNum)"
              class="outline-none input-border w35 h30 text-center"
              type="text"
              v-model.number="listPageNum"
            />
            <div class="pr2 pl2">题(请按回车)</div>
          </div>

          <div>
            共 <span class="font-semibold">{{ list.length }}</span> 题
          </div>
          <div class="align-baseline">
            <input
              v-model="sysConfig.autoNext"
              class=""
              @change="changeSysConfig"
              type="checkbox"
            />
            <span>答对自动跳转到下一题</span>
          </div>
          <div>
            <div class="mr15 inline-block tracking5">
              答对<span style="color: #21a65f">{{ trueNum }}</span
              >题
            </div>
            <div class="inline-block tracking5">
              答错<span style="color: #ef3629">{{ falseNum }}</span
              >题
            </div>
          </div>
          <div class=""><span class="text-black font16">正确率100%</span></div>
          <div class="">
            <span class="text-black font16"
              >进度{{
                fixedNumber(((trueNum + falseNum) * 100) / list.length, 2)
              }}%</span
            >
          </div>
          <div class="flex items-center content-center">
            <div class="mr15">
              <input
                class=""
                v-model="sysConfig.autoRead"
                type="checkbox"
                @change="changeSysConfig"
              />
              <span>自动播放</span>
            </div>
            <div>
              <input
                class=""
                v-model="sysConfig.autoRed"
                type="checkbox"
                @change="changeSysConfig"
              />
              <span>提示红字</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <mProblemAlert
      v-model:visible="alertVisible"
      :content="list[listIndex].explainJs"
      title="题目解析"
    ></mProblemAlert>
    <mProblemDialog
      @confirm="submitDriveExam(false)"
      v-model:visible="dialogVisible"
      title="提示"
      content="是否真的要交卷（按确定键交卷，按取消键继续答题）"
    ></mProblemDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import api from "@/api";
import { useRoute } from "vue-router";
import { useDriverExam } from "@/hooks/exam/driverExam";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
import mProblemDialog from "@/components/mProblemDialog/index.vue";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import { Item } from "ant-design-vue/es/menu";
export default defineComponent({
  name: "studySkill",
  setup() {
    let route = useRoute();
    let store = useStore();
    let sysConfig = ref({
      autoRed: store.state.sysConfig.autoRed,
      autoRead: store.state.sysConfig.autoRead,
      autoNext: store.state.sysConfig.autoNext,
    });
    const changeSysConfig = (event: any) => {
      console.log(sysConfig.value);
      store.commit("SET_SYSCONFIG", sysConfig.value);
    };
    const fixedNumber = (decimal: number, digit: number) => {
      return decimal.toFixed(digit);
    };
    let wrongList = JSON.parse(
      window.localStorage.getItem(
        route.query.subject == "4"
          ? "driverExam4_local_wrong_list"
          : "driverExam1_local_wrong_list"
      ) || "[]"
    ) as { id: number; timestamp: number }[];

    return {
      sysConfig,
      alertVisible: ref(false),
      dialogVisible: ref(false),
      ...useDriverExam(
        api.question.questionInfoGetQuestionInfoByIds({
          ids: wrongList.map((item) => item.id).join(","),
        }),
        {
          autoAnswer: false,
          countDown: false,
          recordUncomplete: false,
        }
      ),
      changeSysConfig,
      fixedNumber,
    };
  },
  components: {
    mProblemAlert,
    mProblemDialog,
  },
});
</script>

<style scoped>
input[type="checkbox"] {
  margin-right: 5px;

  cursor: pointer;

  font-size: 14px;

  width: 15px;

  height: 12px;

  position: relative;
}

input[type="checkbox"]:after {
  position: absolute;

  width: 16px;

  height: 16px;

  top: 0;
  left: 0px;

  content: " ";

  background-color: #f9de5b;

  color: #fff;

  display: inline-block;

  visibility: visible;

  border-radius: 3px;
}

input[type="checkbox"]:checked:after {
  width: 16px;
  height: 16px;
  background-size: 100%;
  background-image: url("./../../assets/img/login/checked_icon.png");
}
.input-border {
  border: 1px solid #707070;
}
.bg-gray {
  background: #f5f5f5;
}
.gray-border {
  border: 1px solid #d8d8d8;
}
.bg-primary-yellow {
  background: #f9de5b;
}
.bottom-button {
  text-align: center;
  border: 1px solid #f9de5b;
  cursor: pointer;
}
.bottom-button:focus {
  background: #f9de5b;
  border: 1px solid #f9de5b;
  outline: none;
}
.bottom-button:hover {
  background: #fff7cc;
}
.w1200 {
  width: 1200px;
}
</style>