<template>
  <view class="scrollable-tabs">
    <scroll-view 
      class="tabs-scroll" 
      scroll-x="true" 
      show-scrollbar="false" 
      :scroll-into-view="'tab-' + currentIndex"
      :scroll-with-animation="true"
    >
      <view class="tabs-container">
        <view 
          v-for="(item, index) in tabs" 
          :key="index"
          :id="'tab-' + index"
          class="tab-item"
          :class="{ 'tab-active': currentIndex === index }"
          @tap="handleTabClick(index)"
        >
          {{ item }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  tabs: {
    type: Array,
    default: () => []
  },
  currentIndex: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['change'])

const handleTabClick = (index) => {
  emit('change', index)
}
</script>

<style lang="less" scoped>
.scrollable-tabs {
  width: 100%;
  
  .tabs-scroll {
    width: 100%;
    white-space: nowrap;
    
    .tabs-container {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      min-width: 100%;
      
      .tab-item {
        color: #333;
        background-color: #e9edf1;
        padding: 15rpx 20rpx;
        font-size: 22rpx;
        margin-right: 15rpx;
        border-radius: 30rpx;
        flex-shrink: 0;
        white-space: nowrap;
        transition: all 0.3s ease;
        
        &:last-child {
          margin-right: 0;
        }
        
        &.tab-active {
          color: white;
          background-color: #D3A358;
        }
      }
    }
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .scrollable-tabs {
    .tabs-scroll {
      .tabs-container {
        .tab-item {
          padding: 12rpx 16rpx;
          font-size: 20rpx;
          margin-right: 12rpx;
        }
      }
    }
  }
}
</style> 