<template>
    <div class="tabs">
        <div v-for="item in tabs" :key="item.value" :class="{ 'tab-selected': activeTab === item.value }" @click="handleTabClick(item)">
            {{ item.name }}
        </div>
    </div>
</template>

<script lang="ts" setup>
interface TabItem {
    value: string | number;
    name: string;
}

const props = defineProps<{
    tabs: TabItem[];
    active: string | number;
}>();

const emit = defineEmits<{
    (event: 'update:active', value: string | number): void;
    (event: 'tab-click', item: TabItem): void;
}>();

const activeTab = ref(props.active);

// 监听外部传入的active变化
watch(
    () => props.active,
    (newVal) => {
        activeTab.value = newVal;
    }
);

function handleTabClick(item: TabItem) {
    activeTab.value = item.value;
    emit('update:active', item.value);
    emit('tab-click', item);
}
</script>

<style lang="scss" scoped>
.tabs {
    display: flex;
    border-collapse: collapse;
    > div {
        padding: 2px 8px;
        color: #333;
        cursor: pointer;
        border: 1px solid #dedede;
        font-size: 11px;
        &:first-of-type {
            border-radius: 4px 0 0 4px;
        }
        &:last-of-type {
            border-radius: 0 4px 4px 0;
        }
    }

    .tab-selected {
        color: #48a1ff;
        border-color: #48a1ff;
    }
}
</style>
