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

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

<script setup>
    import alipayConfig from '@/views/system/payment/components/alipay-config.vue';
    import wechatConfig from '@/views/system/payment/components/wechat-config.vue';
    import { reactive, ref, shallowRef } from 'vue';

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

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

    const tabList = reactive([
        {
            label: '微信支付',
            name: 'wechatConfig',
            component: shallowRef(wechatConfig)
        },
        {
            label: '支付宝支付',
            name: 'alipayConfig',
            component: shallowRef(alipayConfig)
        }
    ]);
</script>
