<script setup>
import {defineAsyncComponent} from "vue";

const FrequentlyQuestions = defineAsyncComponent(() => import('./tabs/FrequentlyQuestions.vue'));
const BasicTeaching = defineAsyncComponent(() => import('./tabs/BasicTeaching.vue'));
const BannerManagement = defineAsyncComponent(() => import('./tabs/BannerManagement.vue'));
const SecondaryClassificationManagement = defineAsyncComponent(() => import('./tabs/SecondaryClassificationManagement.vue'));

const tabs = [
    {
        title: '常见问题',
        key: '1',
        component: FrequentlyQuestions
    },
    {
        title: '基础教学',
        key: '2',
        component: BasicTeaching
    },
    {
        title: 'banner管理',
        key: '3',
        component: BannerManagement
    },
    {
        title: '二级分类管理',
        key: '4',
        component: SecondaryClassificationManagement
    },
];
</script>

<template>
    <a-tabs
        class="w-full"
        :justify="true"
        :destroy-on-hide="true"
        type="rounded">
        <a-tab-pane v-for="item in tabs" :key="item.key" :title="item.title">
            <Suspense>
                <template #default>
                    <div class="h-full flex flex-col items-start">
                        <component :is="item.component"></component>
                    </div>
                </template>

                <template #fallback>
                    加载中...
                </template>
            </Suspense>
        </a-tab-pane>
    </a-tabs>
</template>

<style scoped lang="scss">

</style>
