export default {
    props: {
        tabPanels: { type: Array, required: true },
        activeTabIndex: { type: Number, required: true, default: 0 },
        id: { type: String, required: false, default: 'tabContainer' },
    },
    emits: ['onActiveTabChanged'],
    created: function () {
    },
    updated: function () {
    },
    computed: {        
    },
    methods: {
        handleTabChanged: function (indx) {
            this.$emit('onActiveTabChanged', indx);
        }
    },
    template: `
<div class="p-b-10">
    <div :id="'tc-' + id" class="TabControlTabHeader">
	    <span v-for="(tab, index) of tabPanels" :data-key="index" :id="'Tab' + index" @click.prevent="handleTabChanged(index)"
        :class="{ajax__tab_active:(activeTabIndex == index)}" v-show="tab.enabled">
            <span class="ajax__tab_outer">
                <span class="ajax__tab_inner">
                    <span :class="(activeTabIndex == index) ? 'TabControlTab' : 'TabControlTabInActive'">{{ tab.text }}</span>
                </span>
            </span>
        </span>
    </div>
</div>

`
}
