<template>
    <ele-page flex-table>
        <ele-card flex-table>
            <el-tabs
                v-model="activeName"
                @tab-change="handleTabChange"
                class="mb-6"
            >
                <el-tab-pane
                    v-for="item in tabList"
                    :label="item.label"
                    :name="item.name"
                />
            </el-tabs>

            <component :is="currentComponent" style="max-width: 600px" />
        </ele-card>
    </ele-page>
</template>

<script setup>
    import baseConfig from '@/views/system/setting/components/base-config.vue';
    import isbnCollection from '@/views/system/setting/components/isbn-collection.vue';
    import logisticsQuery from '@/views/system/setting/components/logistics-query.vue';
    import mapConfig from '@/views/system/setting/components/map-config.vue';
    import smsConfig from '@/views/system/setting/components/sms-config.vue';
    import storageConfig from '@/views/system/setting/components/storage-config.vue';
    import mallConfig from '@/views/system/setting/components/mall-config.vue';
    import wechatApplet from '@/views/system/setting/components/wechat-applet.vue';
    import alipayApplet from '@/views/system/setting/components/alipay-applet.vue';
    import withdrawalLimit from '@/views/system/setting/components/withdrawal-limit.vue';
    import { reactive, ref, shallowRef } from 'vue';

    const activeName = ref('baseConfig');
    const currentComponent = shallowRef(baseConfig);

    function handleTabChange(name) {
        let tab = tabList.find((item) => item.name === name);
        currentComponent.value = tab ? tab.component : shallowRef(baseConfig);
    }

    const tabList = reactive([
        {
            label: '基础配置',
            name: 'baseConfig',
            component: shallowRef(baseConfig)
        },
        {
            label: 'ISBN采集配置',
            name: 'isbnCollection',
            component: shallowRef(isbnCollection)
        },
        {
            label: '物流查询',
            name: 'logisticsQuery',
            component: shallowRef(logisticsQuery)
        },
        {
            label: '地图配置',
            name: 'mapConfig',
            component: shallowRef(mapConfig)
        },
        {
            label: '短信配置',
            name: 'smsConfig',
            component: shallowRef(smsConfig)
        },
        {
            label: '阿里云OSS存储配置',
            name: 'storageConfig',
            component: shallowRef(storageConfig)
        },
        {
            label: '商城配置',
            name: 'mallConfig',
            component: shallowRef(mallConfig)
        },
        {
            label: '微信小程序配置',
            name: 'wechatApplet',
            component: shallowRef(wechatApplet)
        },
        {
            label: '支付小程序配置',
            name: 'alipayApplet',
            component: shallowRef(alipayApplet)
        },
        {
            label: '提现限制',
            name: 'withdrawalLimit',
            component: shallowRef(withdrawalLimit)
        }
    ]);
</script>
