<template>
  <view class="tab-switcher">
    <view class="tab-container">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ 'active': activeIndex === index }"
        @click="handleTabClick(index)"
      >
        <text class="tab-text" :class="textClass">{{ tab.label }}</text>
      </view>
      <!-- 底部跟随横条 -->
      <view
        class="active-indicator"
        :style="{ transform: `translateX(${activeIndex * 100}%)` }"
      ></view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Tab {
  label: string
  value: string
}

interface Props {
  tabs?: Tab[]
  modelValue?: number
}

interface Emits {
  (e: 'update:modelValue', value: number): void
  (e: 'change', value: number): void
}

// const props = withDefaults(<Props>(), {
//   tabs: () => [
//     { label: '美食', value: 'food' },
//     { label: '菜谱', value: 'recipe' }
//   ],
//   modelValue: 0,
//   textClass: 'text-40rpx'
// })
const props = defineProps({
  tabs: {
    type: Array as () => Tab[],
    default: () => [
      { label: 'Tab 1', value: 'tab1' },
      { label: 'Tab 2', value: 'tab2' }
    ]
  },
  modelValue: {
    type: Number,
    default: 0
  },
  textClass: {
    type: String,
    default: 'text-40rpx'
  }
})

const emit = defineEmits<Emits>()

const activeIndex = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

function handleTabClick(index: number) {
  activeIndex.value = index
  emit('change', index)
}
</script>

<style scoped lang="scss">
.tab-switcher {
  @apply w-full bg-white;
}

.tab-container {
  @apply relative flex items-center border-b-solid border-b-10rpx border-b-#F6F6F6;
  // @apply px-30rpx py-20rpx;
}

.tab-item {
  @apply relative flex items-center justify-center;
  @apply w-180rpx h-80rpx pb-24rpx cursor-pointer;
  @apply transition-all duration-300 ease-out;
}

.tab-text {
  @apply transition-colors duration-300;
  color: #999;
}

.tab-item.active .tab-text {
  @apply font-bold;
  color: #333;
}

.active-indicator {
  @apply absolute bottom--10rpx left-0;
  @apply w-180rpx h-10rpx;
  @apply bg-#333;
  @apply transition-transform duration-300 ease-out;
}
</style>