

<template>
  <div class="content">
    <div class="flex mb15 items-center bg-white pt10 pb10 pl50">
      <div class="vertical-line mr10"></div>
      <span class="font20 font-bold mr15">车型选择</span>
      <div :class="{
        'bg-primary-yellow': model == 'cart'
      }" @click="changeCarModel('cart')" class="lh34 ml15 select-border1 round4 pr15 pl15">
        轿车
      </div>
      <div :class="{
        'bg-primary-yellow': model == 'bus'
      }" @click="changeCarModel('bus')" class="lh34 ml15 select-border1 round4 pr15 pl15">
        客车
      </div>
      <div :class="{
        'bg-primary-yellow': model == 'truck'
      }" @click="changeCarModel('truck')" class="lh34 ml15 select-border1 round4 pr15 pl15">
        货车
      </div>
    </div>
    <mSkillList :model="model"></mSkillList>
    <mProblemAlert v-model:visible="alertVisible" title="开启" content="禁止重复"></mProblemAlert>
    <mProblemDialog @confirm="deleteAllWrong()" v-model:visible="dialogVisible" title="提示" content="是否要清空全部错题">
    </mProblemDialog>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import api from "@/api";
import { useRoute } from "vue-router";
import mProblemDialog from "@/components/mProblemDialog/index.vue";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
import mSkillList from "@/components/mSkillList/index.vue"
import { message } from "ant-design-vue";
import router from "@/router";
import store from "@/store";

export default defineComponent({
  name: "practiseSelect",
  setup() {
    const route = useRoute();
    const subject = route.query.subject
    const dialogVisible = ref(false);
    const model = computed(() => {
      return store.state.model
    })
    // let list = ref<
    //   {
    //     "createTime": string,
    //     "updateTime": null,
    //     "id": number,
    //     "columnId": number,
    //     "sort": number,
    //     "model": string,
    //     "subject": string,
    //     "title": string
    //   }[]
    // >([]);
    const deleteAllWrong = () => {
      store.dispatch('ClearDriver' + subject + 'WrongList')
      dialogVisible.value = 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

        }
      })


    }
    
    // api.open
    //   .question2InfoGetQuestionColumn({
    //     subject: 'k'+(route.query.subject||'1')+'_3',
    //     model: model.value
    //   })
    //   .then((res) => {

    //     list.value = res.data;
    //   });
     

    return {
      dialogVisible,
      alertVisible: ref(false),
      model,
      deleteAllWrong,
      checkLocalWrongList
    };
  },
  methods: {
    changeCarModel(model: string) {
      store.commit('SET_MODEL', model)
      
   
    },
  },
  // watch: {
  //   "$route.query"(nowVal, oldVal) {
  //     if (JSON.stringify(nowVal) == "{}") {
  //       return;
  //     }

  //     api.open
  //       .question2InfoGetQuestionColumn({
  //         subject: 'k1_3',
  //         model: this.model
  //       })
  //       .then((res) => {
  //         res.data.shift();
  //         this.list = res.data;
  //       });
  //   },
  // },
  components: {
    mProblemDialog,
    mProblemAlert,
    mSkillList
  },
});
</script>

<style lang="scss" scoped>
.bg-primary-yellow {
  background-color: #f9de5b;
}

a {
  color: black;
  text-decoration: none;

}

.select-border1 {
  border: 1px solid #f9de5b;
}

.select-border2 {
  border: 1px solid #f9de5b;
  color: black;
  text-decoration: none;
}

.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>