<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" />
            </div>
        </ele-card>
    </ele-page>
</template>

<script setup>
    import userAgreement from '@/views/system/policy/components/user-agreement.vue';
    import privacyAgreement from '@/views/system/policy/components/privacy-agreement.vue';
    import aboutUs from '@/views/system/policy/components/about-us.vue';
    import { reactive, ref, shallowRef } from 'vue';

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

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

    const tabList = reactive([
        {
            label: '用户协议',
            name: 'userAgreement',
            component: shallowRef(userAgreement)
        },
        {
            label: '隐私协议',
            name: 'privacyAgreement',
            component: shallowRef(privacyAgreement)
        },
        {
            label: '关于我们',
            name: 'aboutUs',
            component: shallowRef(aboutUs)
        }
    ]);
</script>
