<template>
    <div class="bg-white pl50 pt30">

        <div class="flex items-center">
            <div class="vertical-line mr10"></div>
            <span class="font20 font-bold mr15">技巧练习</span>
            <!-- <div class="lh34 select-border1 round4 pr15 pl15">试听</div> -->
        </div>


        <div class="">
            <div class="flex justify-normal flex-wrap w-11/12">
                <div v-for="(item, index) in list" :key="index" class="flex radius4 pt15">
                    <div class="lh34 w185 text-left font18">
                        {{ index + 1 }}. {{ item.title }}
                    </div>
                    <div class="flex">
                        <!-- <div
          class="w64 lh34 mr15 round4 overflow-hidden select-border3 bg-gray-100 text-gray-500 cursor-not-allowed"
        >
                        视频
                      </div> -->
                        <router-link :to="
                            '/studySkill?subject=' +
                            ($route.query.subject || 4) +
                            '&columnAll=' +
                            (item.columnId || '')+'&model='+model
                        ">
                            <div class="w64 lh34 mr15 round4 overflow-hidden select-border2 ">
                                练习
                            </div>
                        </router-link>

                        <div @click="checkLocalWrongList()" class="w64 lh34 mr15 round4 overflow-hidden select-border2">
                            回顾
                        </div>

                    </div>
                </div>
            </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>
</template>

<script lang="ts">
import router from '@/router';
import { message } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue'
import { useRoute } from 'vue-router';
import api from '@/api';
export default defineComponent({
    setup(props, emit) {

        const route = useRoute();
        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

                }
            })


        }
        let list = ref<
            {
                "createTime": string,
                "updateTime": null,
                "id": number,
                "columnId": number,
                "sort": number,
                "model": string,
                "subject": string,
                "title": string
            }[]
        >([]);
        api.open
            .question2InfoGetQuestionColumn({
                subject: 'k' + (route.query.subject || '1') + '_3',
                model: props.model
            })
            .then((res) => {
                // message.success({
                //     content: '切换成功'
                // })
                list.value = res.data;
            });

        return {
            list,
            checkLocalWrongList,
            dialogVisible: ref(false)
        }
    },
    props: {
        model: {
            type: String,
            default: 'cart'
        },
        subject: {
            type: String,
            default: '1'
        }
    },
    watch: {
        "$route.query"(nowVal, oldVal) {
            api.open
                .question2InfoGetQuestionColumn({
                    subject: 'k' + (this.$route.query.subject || '1') + '_3',
                    model: this.model
                })
                .then((res) => {

                    this.list = res.data;
                });
        },
        model(nowVal, oldVal) {
            console.log(nowVal, oldVal)
            if (nowVal == oldVal) {
                return
            }

            api.open
                .question2InfoGetQuestionColumn({
                    subject: 'k' + (this.$route.query.subject || '1') + '_3',
                    model: nowVal
                })
                .then((res) => {
                    message.success({
                        content: '切换成功'
                    })
                    this.list = res.data;
                });
        },
    },


})
</script>

<style 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;
}
</style>