<!--标签切换组件-->
<template>
  <view class="tab-switcher">
    <view 
      v-for="(tab, index) in tabs" 
      :key="tab.id"
      :class="['tab-item', { 'selected-tab': activeTabId === tab.id }]"
      @click="switchTab(tab.id, index)"
    >
      <text :class="['tab-text', { 'selected-text': activeTabId === tab.id }]">{{ tab.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TabSwitcher',
  props: {
    tabs: {
      type: Array,
      required: true,
      default: () => []
    },
    activeTabId: {
      type: [String, Number],
      required: true
    }
  },
  methods: {
    switchTab(tabId, index) {
      if (tabId !== this.activeTabId) {
        this.$emit('tab-change', { tabId, index, tab: this.tabs[index] })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tab-switcher {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20rpx 0;
  background-color: white;
  border-radius: 0 0 20rpx 20rpx;
}

.tab-item {
  padding: 15rpx 20rpx;
  border-radius: 10rpx;
  transition: all 0.3s ease;
  
  &.selected-tab {
    background-color: rgba(41, 211, 180, 0.1);
  }
}

.tab-text {
  font-size: 26rpx;
  color: #666;
  font-weight: normal;
  transition: all 0.3s ease;
  
  &.selected-text {
    color: #29d3b4;
    font-weight: bold;
  }
}
</style>