<template>
  <div class="content">
    <div class="bg-white pl50 pt30">
      <div class="flex items-center">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">仿真模拟考试</span>
        <span>（注意科目四，各车型一样）</span>
        <div class="flex">
          <div
            @click="goDriveExam('xc')"
            class="lh34 ml15 select-border1 round4 pr15 pl15"
          >
            轿车
          </div>
          <div
            @click="goDriveExam('kc')"
            class="lh34 ml15 select-border1 round4 pr15 pl15"
          >
            客车
          </div>
          <div
            @click="goDriveExam('hc')"
            class="lh34 ml15 select-border1 round4 pr15 pl15"
          >
            货车
          </div>
        </div>

        <div
          @click="checkLocalWrongList()"
          class="lh34 ml15 select-border1 round4 pr15 pl15"
        >
          错误回顾
        </div>
      </div>
      <div class="flex items-center pt30 pb30">
        <div class="vertical-line mr10"></div>
        <span class="font20 font-bold mr15">全部错误题回顾</span>

        <div
          @click="checkLocalWrongList()"
          class="lh34 round4 pr15 pl15 select-border1 mr15"
        >
          错误回顾
        </div>
        <div
          @click="
            () => {
              dialogVisible = true;
            }
          "
          class="lh34 round4 pr15 pl15 select-border1"
        >
          清空全部错题
        </div>
      </div>
    </div>
    <mProblemAlert
      v-model:visible="alertVisible"
      title="开启"
      content="禁止重复"
    ></mProblemAlert>
    <mProblemDialog
      v-model:visible="dialogVisible"
      @confirm="deleteAllWrong()"
      title="提示"
      content="是否要清空全部错题"
    ></mProblemDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import mProblemDialog from "@/components/mProblemDialog/index.vue";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
import api from "@/api";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
import router from "@/router";
import store from "@/store";
export default defineComponent({
  setup() {
    const route = useRoute();
    const subject = route.query.subject;
    const dialogVisible = ref(false);
    const checkLocalWrongList = () => {
      const subject = route.query.subject as string;
      let name = "driverExam" + subject + "_local_wrong_list";
      let list = JSON.parse(window.localStorage.getItem(name) || "[]");
      if (list.length == 0) {
        message.warn({
          content: "没有对应的错题",
        });
        return;
      }
      router.push({
        path: "/reviewDriverError",
        query: {
          subject,
        },
      });
    };
    const deleteAllWrong = () => {
      store.dispatch("driverExam" + subject + "_local_wrong_list");
      dialogVisible.value = false;
    };
    return {
      dialogVisible,
      alertVisible: ref(false),
      deleteAllWrong,
      checkLocalWrongList,
    };
  },
  methods: {
    goDriveExam(gs: string) {
      this.$router.push({
        path: "/examInstructions",
        query: {
          gs: gs,
          ...this.$route.query,
        },
      });
    },
  },
  components: {
    mProblemDialog,
    mProblemAlert,
  },
});
</script>

<style lang="scss" scoped>
.select-border1 {
  border: 1px solid #f9de5b;
}
.select-border2 {
  border: 1px solid #f9de5b;
}
.select-border3 {
  border: 1px solid #d8d8d8;
}
.select-border1:hover {
  border: 1px solid #f9de5b;
  background-color: #f9de5b;
  cursor: pointer;
}
.select-border2:hover {
  border: 1px solid #f9de5b;
  background-color: rgba(255, 247, 204, 1);
  cursor: pointer;
}
.radius4 {
  border-radius: 4px;
}
.bg-primary-yellow {
  background-color: #f9de5b;
}
.bg-light-yellow {
  background: #fff7cc;
}

.w1603 {
  width: 1603px;
}

.content {
  padding: 0 30px;
  padding-top: 21px;
  padding-bottom: 30px;

  .vertical-line {
    width: 5px;
    height: 20px;
    background: #f9de5b;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
  }
}
</style>