<!--
 * 分类标签组件
 * @author AI
 * @date 2026-03-06
 -->
<template>
  <view class="category-tabs">
    <view 
      v-for="(item, index) in categories" 
      :key="index" 
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="handleTabClick(index)"
    >
      <text class="tab-text">{{ item }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CategoryTabs',
  props: {
    categories: {
      type: Array,
      default: () => ['焦虑抑郁', '婚姻关系', '原生家庭', '职业困扰', '成长迷茫']
    },
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: this.current
    }
  },
  watch: {
    current(val) {
      this.currentIndex = val
    }
  },
  methods: {
    handleTabClick(index) {
      this.currentIndex = index
      this.$emit('change', index, this.categories[index])
    }
  }
}
</script>

<style lang="scss" scoped>
.category-tabs {
  display: flex;
  gap: 17rpx;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  
  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
  
  .tab-item {
    flex-shrink: 0;
    padding: 8rpx 16rpx;
    background-color: #f4f4f5;
    border-radius: 8rpx;
    
    .tab-text {
      font-size: 24rpx;
      color: #a1a1aa;
      white-space: nowrap;
    }
    
    &.active {
      background-color: #fff;
      
      .tab-text {
        color: #70553e;
      }
    }
  }
}
</style>
