<template>
  <view class="statics-tab">
    <view v-for="(item, index) in tabs" :key="index" class="tab-item" :class="{ active: value === item.type }"
      @click="handleTabClick(item)">
      <text class="tab-text">{{ item.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'StaticsTab',
  props: {
    // 当前选中的tab值
    value: {
      type: String,
      default: ''
    },
    // tab选项数组
    tabs: {
      type: Array,
      default: () => []
    },
    // 激活状态的颜色
    activeColor: {
      type: String,
      default: '#1890ff'
    }
  },

  methods: {
    // 处理tab点击
    handleTabClick(item) {
      this.$emit('input', item.type);
      this.$emit('change', item.type, item);
    }
  }
};
</script>

<style lang="scss" scoped>
.statics-tab {
  display: flex;
  justify-content: flex-start;
  // gap: 5rpx;

  .tab-item {
    font-size: 22rpx;
    padding: 6rpx 11rpx;
    
    // height: 43rpx;
    // line-height: 43rpx;
    border-radius: 50rpx;
    background-color: transparent;
    transition: all 0.3s ease;
    cursor: pointer;

    .tab-text {
      font-size: 22rpx;
      color: black;
      transition: color 0.3s ease;
    }

    // 激活状态
    &.active {
      background-color: var(--active-color, #7091EB);

      .tab-text {
        color: #fff;
        font-weight: bold;
      }
    }

    // 悬停效果
    &:hover:not(.active) {
      background-color: #f5f5f5;

      .tab-text {
        color: #fff;
      }
    }

    // 激活状态样式
    &:active {
      transform: scale(0.95);
    }
  }
}
</style>