<template>
    <div class="mtp-tab-component">
        <component :is="currentTabComponent.component" :name="currentTabComponent.code" v-bind="options"
            v-if="currentTabComponent" />
        <mtp-tabbar class="mtp-tabbar--bottom" :data-source="dynamicComponents" label="title" @change="componentChange">
            <slot name="tabbar"></slot>
        </mtp-tabbar>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useDynamicComponent } from '@/@next/hooks/common'
import MtpTabbar from '@/@next/components/base/tabbar/index.vue'

export default defineComponent({
    components: {
        MtpTabbar
    },
    props: {
        code: String,
        options: Object,
    },
    setup(props) {
        const { dynamicComponents, currentTabComponent, componentChange } = useDynamicComponent(props.code);

        return {
            dynamicComponents,
            currentTabComponent,
            componentChange,
        }
    }
})
</script>

<style lang="less">
@import './index.less';
</style>