<template>
    <div class="module_tab">
        <div class="tab_item" :class="state.tabActive === item.value ? 'tab_active' : ''" :key="item.value"
            v-for="item in tabList" @click="TabChange(item)">
            {{ item.title }}
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// 1. 定义 tab 项类型
interface TabItem {
    title: string
    value: string | number
    [key: string]: unknown
}

// 2. 定义 Props + 完整类型 + 默认值
const props = defineProps({
    tabList: {
        type: Array as () => TabItem[],
        default: () => []
    }
})

// 3. 定义 emit 并做 TS 类型约束
const emit = defineEmits<{
    TabChange: (value: string | number) => void
}>()

// 4. 响应式状态
const state = reactive({
    tabActive: '0' as string | number
})

// 5. tab 切换方法 + 入参类型
const TabChange = (item: Object) => {
    state.tabActive = item.value;
    emit('TabChange', item)
}
</script>

<style lang="scss" scoped>
.module_tab {
    flex: 1;
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    position: relative;

    .tab_item {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        cursor: pointer;
        padding-bottom: 6px;
    }

    .tab_active {
        font-weight: 600;
        font-size: 14px;
        color: #2E64FA;
        cursor: pointer;
        border-bottom: 2px solid #2E64FA;
    }
}
</style>