<template>
  <view class="zzx-tabs-box" :style="{ backgroundColor: bgColor }">
    <view 
      v-for="(item, index) in menus" 
      :key="index" 
      class="menu-item"
      :class="[
        { 'disabled': disabledItems[index] },
        `type-${type}`
      ]"
      :style="{ 
        color: getTextColor(index),
        pointerEvents: disabledItems[index] ? 'none' : 'auto'
      }"
      @click="handleClick(index)"
    >
      <!-- 默认插槽 -->
      <slot name="item" :item="item" :index="index">
        {{ item }}
      </slot>
    </view>
    
    <!-- 滑动指示器 -->
    <view 
      class="slider" 
      :class="`type-${type}`"
      :style="{
        width: sliderWidth,
        backgroundColor: activeBgColor,
        transform: `translateX(${sliderPosition})`,
        ...sliderStyle
      }"
    ></view>
  </view>
</template>

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

type MenuType = 'slider' | 'underline';

const props = defineProps({
  menus: {            //菜单数组
    type: Array,
    default: () => ['菜单1', '菜单2']
  },
  activeBgColor: {    //选中的背景色
    type: String,
    default: '#4095E5'
  },
  activeColor: {     //选中的字体颜色
    type: String,
    default: '#ffffff'
  },
  color: {          //未选中字体颜色
    type: String,
    default: '#333333'
  },
  bgColor: {        //父盒子背景色
    type: String,
    default: '#ffffff'
  },
  type: {           //选中的类型（按钮/线条）
    type: String as () => MenuType,
    default: 'slider',
    validator: (v: string) => ['slider', 'underline'].includes(v)
  },
  disabled: {       //是否禁用
    type: Array as () => boolean[],
    default: () => []
  }
});

const emit = defineEmits(['change']);

const currentIndex = ref(0);
const itemWidth = 100 / props.menus.length;

// 计算禁用状态
const disabledItems = computed(() => [
  ...props.disabled,
  ...Array(props.menus.length - props.disabled.length).fill(false)
]);

// 样式计算
const sliderWidth = computed(() => `${itemWidth}%`);
const sliderPosition = computed(() => `${currentIndex.value * 100}%`);

// 不同类型样式配置
const sliderStyle = computed(() => {
  const styles = {
    slider: { height: '70rpx', borderRadius: '50rpx' },
    underline: { height: '4rpx', top: '62rpx', borderRadius: '0' }
  };
  return styles[props.type] || {};
});

// 文字颜色计算
const getTextColor = (index: number) => {
  if (disabledItems.value[index]) return '#cccccc';
  return currentIndex.value === index ? props.activeColor : props.color;
};

// 点击处理
const handleClick = (index: number) => {
  if (disabledItems.value[index]) return;
  
  currentIndex.value = index;
  emit('change', index);
};
</script>

<style scoped lang="less">
.zzx-tabs-box {
  position: relative;
  display: flex;
  height: 70rpx;
  padding: 6rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  overflow: hidden;

  .menu-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1;
    transition: color 0.3s;

    &.type-underline {
      font-weight: 500;
    }

    &.disabled {
      cursor: not-allowed;
      opacity: 0.7;
    }
  }

  .slider {
    position: absolute;
    transition: transform 0.3s ease-in-out;
    left: 0;
    top: 6rpx;

    &.type-underline {
      transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
    }
  }
}
</style>