<!--
 * @Author: micky
 * @Date: 2024-08-11 19:30:09
 * @LastEditors: micky
 * @LastEditTime: 2024-10-31 19:56:15
 * @FilePath: \chargingpile-uniapp\src\components\widgets\top-tab\top-tab.vue
-->
<template>
    <view class="h-[90rpx] flex pt-3 top-tab">
        <view
            v-for="(item, index) in tabList"
            :key="index"
            :style="itemStyle"
            class="item"
            :class="item.value == activeTab ? 'active' : ''"
            @click="changTab(item.value)"
        >
            {{ item.label }}
        </view>
    </view>
</template>

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

interface Item {
    label: string
    value: number
}
const emits = defineEmits(['update:modelValue', 'changeTab'])
const props = withDefaults(
    defineProps<{
        modelValue: number
        tabList: Item[]
    }>(),
    {
        tabList: []
    }
)
const itemStyle = computed(() => {
    return {
        width: 100 / props.tabList.length + '%'
    }
})
const activeTab = ref(props.tabList[0]?.value)
const changTab = (key: number) => {
    activeTab.value = key
    emits('update:modelValue', activeTab.value)
    emits('changeTab', key)
}
</script>
<style scoped lang="scss">
.top-tab {
    @apply relative;
    .item {
        @apply text-center relative;
        &.active::after {
            content: '';
            @apply absolute bottom-1 left-[50%] w-[64rpx] h-[8rpx] bg-[#0E66FB] rounded-sm;
            transform: translateX(-50%);
        }
    }
}
</style>
