<template>
    <div :class="['app-tabs', 'app-tabs--' + direction]">
        <div class="app-tabs__navbar">
            <ul class="tabs" v-if="dataList.length">
                <li :class="['tabs-item', index === selectedIndex && 'is-active']" v-for="(item, index) in dataList"
                    :key="index" @click="onTabChange(index)">
                    {{ item[propLabel] ?? '标签' + index }}
                </li>
            </ul>
            <slot name="navbar"></slot>
        </div>
        <div class="app-tabs__container">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, PropType } from 'vue'

const props = defineProps({
    dataList: {
        type: Array,
        default: () => ([])
    },
    // 选中的标签
    dataIndex: {
        type: Number,
        default: 0,
    },
    // 标签属性
    propLabel: {
        type: String,
        default: 'label',
    },
    // 组件方向
    direction: {
        type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
        default: 'top',
    },
})

const emit = defineEmits(['update:dataIndex', 'change'])
const selectedIndex = ref(props.dataIndex)

const onTabChange = (index: number) => {
    if (selectedIndex.value !== index) {
        selectedIndex.value = index;
        emit('update:dataIndex', index);
        emit('change', index, props.dataList[index]);
    }
}

watch(() => props.dataIndex, (index) => selectedIndex.value = index)
</script>

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