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

// 懒加载组件
const HomepageBannerMessage = defineAsyncComponent(() => import('./components/HomepageBannerMessage.vue'));
const PlatformNews = defineAsyncComponent(() => import('./components/PlatformNews.vue'));
const HomeBanner = defineAsyncComponent(() => import('./components/HomeBanner.vue'));
const PersonalCenterBanner = defineAsyncComponent(() => import('./components/PersonalCenterBanner.vue'));
const QRCode = defineAsyncComponent(() => import('./components/QRCode.vue'));
const NoviceTeaching = defineAsyncComponent(() => import('./components/NoviceTeaching.vue'));
const RichTextContentLibrary = defineAsyncComponent(() => import('./components/RichTextContentLibrary.vue'));

const tabs = [
    {
        key: '1',
        title: '首页横幅消息',
        component: HomepageBannerMessage,
    },
    {
        key: '2',
        title: '平台消息',
        component: PlatformNews,
    },
    {
        key: '3',
        title: '首页banner',
        component: HomeBanner,
    },
    {
        key: '4',
        title: '个人中心banner',
        component: PersonalCenterBanner,
    },
    {
        key: '5',
        title: '二维码',
        component: QRCode,
    },
    {
        key: '6',
        title: '新手教学',
        component: NoviceTeaching,
    },
    {
        key: '7',
        title: '富文本内容库',
        component: RichTextContentLibrary,
    },
];
</script>

<template>
    <!-- 达人端物料 -->
    <a-card>
        <div class="title">
            达人端物料
        </div>

        <a-tabs
            :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>
    </a-card>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 16px;
}
</style>
