<template>
    <div v-show="isActive" class="tab-pane">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'CustomTabPane',
    props: {
        label: {
            type: String,
            required: true
        },
        name: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            isActive: false,
            parentTabs: null
        }
    },
    mounted() {
        this.findParentTabs()
        if (this.parentTabs) {
            this.parentTabs.registerTab({
                label: this.label,
                name: this.name
            })
            this.updateActiveState(this.parentTabs.activeTab)
        }
    },
    beforeDestroy() {
        if (this.parentTabs) {
            this.parentTabs.unregisterTab(this.name)
        }
    },
    methods: {
        findParentTabs() {
            let parent = this.$parent
            while (parent) {
                if (parent.$options.name === 'CustomTabs') {
                    this.parentTabs = parent
                    break
                }
                parent = parent.$parent
            }
        },
        updateActiveState(activeTab) {
            this.isActive = activeTab === this.name
        }
    }
}
</script>

<style scoped>
.tab-pane {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
</style>

