<template>
    <a-card
        style="width:100%"
        :tab-list="tabListNoTitle"
        :active-tab-key="currentTabComponent"
        @tabChange="key => onTabChange(key)"
    >
        <component v-bind:is="currentTabComponent"></component>
    </a-card>
</template>
<script>
export default {
    components:{
        directional: () => import('../directional/directional'),
        person: () => import('@/views/modules/crowd-control/crowd-control.vue'),
        url: () => import('../url/url'),
        application: () => import('../application/application'),
        autoCopyLibrary: () => import('../auto-copy-library/auto-copy-library.vue'),
    },
    data() {
        return {
            currentTabComponent: 'directional', // 当前加载的组件名称
            tabListNoTitle: [
                {
                    key: 'directional',
                    tab: '定向包管理'
                },
                {
                    key: 'person',
                    tab: '人群包管理'
                },
                {
                    key: 'url',
                    tab: '落地页管理'
                },
                {
                    key: 'application',
                    tab: '应用包管理'
                },
                {
                    key: 'autoCopyLibrary',
                    tab: '文案库管理'
                }
            ]
        }
    },
    methods: {
        onTabChange(key, type) {
            this.currentTabComponent = key;
        }
    },
    created() {
        this.currentTabComponent = 'directional';
    }
}
</script>
