<template>
    <view class="page-content">
        <mx-nav-bar title="错题本"/>
        <mx-tabs-swiper v-model="current" :tabs="subjects" :key-name="keyName" template="default" border>
            <template #="subject">
                <wrong-book-list :subject-id="subject[keyValue]"/>
            </template>
        </mx-tabs-swiper>
    </view>
</template>

<script setup>
import {watchEffect, ref} from 'vue'
import {useTopicSubjects} from "@/pages/topic-center/hooks/useTopicSubjects";
import WrongBookList from "@/pages/topic-center/wrong-book/components/wrong-book-list.vue";
import {useTransfer} from "@/hooks/useTransfer";
import _ from "lodash";

const {prevData} = useTransfer()
const {subjects, keyName, keyValue} = useTopicSubjects()
const current = ref(0)

watchEffect(() => current.value = _.findIndex(subjects.value, s => s[keyValue] == prevData.value.subjectId))
</script>

<style lang="scss">

</style>
