<!-- components/customTabs.vue -->
<template>
    <view class="tabs-container">
        <view class="tabs-scorll">
            <view class="tabs-header">
                <view v-for="(tab, index) in tabs" :key="index" 
                    :class="['tab-item', { 'active': modelValue === index }]"
                    @click="switchTab(index)"
                >
                    {{ tab }}
                </view>
            </view>
        </view>
        <slot></slot>
    </view>
</template>
<script setup>
defineProps({
    tabs: {
        type: Array,
        default: () => []
    },
    modelValue: {
        type: Number,
        default: 0
    }
})

const emit = defineEmits(['update:modelValue'])

const switchTab = (index) => {
    emit('update:modelValue', index)
}
</script>
<style scoped>
.tabs-header {
    display: flex;
    height: 80rpx;
    background: #fff;
    border-bottom: 1rpx solid #eee;
}

.tab-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
}

.tab-item.active {
    color: #007AFF;
    position: relative;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background-color: #007AFF;
}
</style>