<template>
  <view class="tab-navigation">
    <scroll-view class="tab-scroll" scroll-x="true" show-scrollbar="false">
      <view class="tab-list">
        <view
          v-for="(tab, index) in switchList"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="handleTabClick(index, tab)"
        >
          <text class="tab-text">{{ tab.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义TabItem接口，匹配接口返回的switchList数据结构
interface TabItem {
  name: string
  keys: string
  route: string
}

// 定义props，接收来自父组件的switchList和activeTab
const props = defineProps({
  switchList: {
    type: Array as () => TabItem[],
    default: () => []
  },
  activeTab: {
    type: Number,
    default: 0
  }
})

const handleTabClick = (index: number, tab: TabItem) => {
  // 发射事件给父组件，让父组件控制其他组件的内容
  emit('tabChange', { index, tab })
}

// 定义事件发射器
const emit = defineEmits<{
  tabChange: [{ index: number; tab: TabItem }]
}>()
</script>

<style lang="scss" scoped>
.tab-navigation {
  .tab-scroll {
    white-space: nowrap;
    overflow: hidden; // 完全隐藏滚动条

    // 隐藏滚动条 - Uni-app 兼容方式
    ::v-deep .uni-scroll-view::-webkit-scrollbar {
      display: none;
    }

    ::v-deep .uni-scroll-view {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }
  }

  .tab-list {
    display: flex;
    gap: 50rpx;
  }

  .tab-item {
    flex-shrink: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rpx;

    &.active {
      .tab-text {
        color: #333333;
        font-weight: bold;
        position: relative;
        z-index: 2;
      }

      // 添加圆形渐变背景
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40rpx;
        height: 40rpx;
        background: linear-gradient(0deg, #0478f4 0%, rgba(4, 120, 244, 0) 100%);
        border-radius: 50%;
        z-index: 1;
      }
    }

    .tab-text {
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
      transition: color 0.3s ease;
    }
  }
}
</style>
