<template>
  <view class="custom-tab-bar">
    <view 
      v-for="(tab, index) in tabs" 
      :key="index"
      class="tab-item"
      :class="{ active: activeIndex === index }"
      @click="handleTabClick(index)"
    >
      <image 
        class="tab-bg"
        :src="$baseUrl + (activeIndex === index ? 'contentLibrary/1001/tab-bg-cl0.png' : 'contentLibrary/1001/tab-bg-cl1.png')"
        mode="aspectFit"
      />
      <text 
        class="tab-text"
        :class="{ active: activeIndex === index }"
      >
        {{ tab.text }}
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
// const { proxy } = getCurrentInstance();
// const $baseUrl = proxy.$baseUrl;

// Props 定义
const props = defineProps({
  defaultActive: {
    type: Number,
    default: 0
  },
  tabsText: {
    type: Array,
    default: () => ['疾病护理', '脑育科普', '孕期护理']
  }
})

// Events 定义
const emit = defineEmits(['tabChange'])

// 响应式数据
const activeIndex = ref(props.defaultActive)

// Tab 配置数据
const tabs = ref([
  { text: props.tabsText[0] },
  { text: props.tabsText[1] },
  { text: props.tabsText[2] }
])

// 点击处理
const handleTabClick = (index) => {
  if (activeIndex.value === index) return
  
  activeIndex.value = index
  emit('tabChange', {
    index,
    tab: tabs.value[index]
  })
}

// 暴露方法供父组件调用
defineExpose({
  setActiveIndex: (index) => {
    if (index >= 0 && index < tabs.value.length) {
      activeIndex.value = index
    }
  }
})
</script>

<style lang="less" scoped>
@import '@/common.less';

.custom-tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  
  .tab-item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    margin: 0 10rpx;
    
    .tab-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    
    .tab-text {
      position: relative;
      z-index: 2;
      font-size: 28rpx;
      font-weight: 500;
      color: #1d1e25;
      transition: color 0.3s ease;
      
      &.active {
        color: #ffffff;
      }
    }
    
    // 点击效果
    &:active {
      opacity: 0.8;
    }
  }
}
</style>