<template>
  <view class="tabbar-container" v-if="showTabbar">
    <u-tabbar
      :value="currentPath"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :border="true"
      :activeColor="activeColor"
      :inactiveColor="inactiveColor"
      :bgColor="bgColor"
      @change="handleTabbarChange"
    >
      <u-tabbar-item
        v-for="(item, index) in tabbarList"
        :key="index"
        :name="item.pagePath"
        :text="item.text"
      >
        <template #active-icon>
          <view class="custom-icon active">
            <u-icon 
              :name="item.activeIcon || item.icon" 
              size="24"
              :color="activeColor"
            />
          </view>
        </template>
        <template #inactive-icon>
          <view class="custom-icon">
            <u-icon 
              :name="item.icon" 
              size="24"
              :color="inactiveColor"
            />
          </view>
        </template>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
  path: {
    type: String,
    default: ''
  }
})

// 底部导航配置
const tabbarList = ref([
  {
    pagePath: '/pages/index/menu',
    text: '菜单',
    icon: 'home',
    activeIcon: 'home-fill'
  },
  {
    pagePath: '/pages/index/user',
    text: '我的',
    icon: 'account',
    activeIcon: 'account-fill'
  }
])

// 颜色配置
const activeColor = '#0055A2'
const inactiveColor = '#999999'
const bgColor = '#ffffff'

// 当前路径
const currentPath = computed(() => {
  return props.path || getCurrentPath()
})

// 是否显示tabbar
const showTabbar = computed(() => {
  const currentRoute = getCurrentPath()
  return tabbarList.value.some(item => item.pagePath === currentRoute)
})

// 获取当前页面路径
const getCurrentPath = () => {
  const pages = getCurrentPages()
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1]
    return '/' + currentPage.route
  }
  return ''
}

// 处理tabbar切换
const handleTabbarChange = (name) => {
  if (name !== currentPath.value) {
    uni.switchTab({
      url: name,
      fail: (error) => {
        console.error('switchTab failed:', error)
        // 如果switchTab失败，使用普通跳转
        uni.navigateTo({
          url: name,
          fail: (navError) => {
            console.error('navigateTo failed:', navError)
          }
        })
      }
    })
  }
}

onMounted(() => {
  // 隐藏原生tabBar
  uni.hideTabBar({
    animation: false
  })
})
</script>

<style lang="scss" scoped>
.tabbar-container {
  position: relative;
  z-index: 999;
}

.custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: transform 0.2s ease;
  
  &.active {
    transform: scale(1.1);
  }
}

:deep(.u-tabbar) {
  background-color: #ffffff;
  border-top: 1px solid #ebedf0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  
  .u-tabbar-item {
    padding: 4px 0 8px;
    
    &__text {
      font-size: 10px;
      margin-top: 4px;
      font-weight: 500;
      line-height: 1.2;
    }
    
    &__icon {
      margin-bottom: 0;
    }
  }
}

// 为不同主题色适配
:deep(.u-tabbar .u-tabbar-item--active .u-tabbar-item__text) {
  color: #0055A2;
  font-weight: 600;
}
</style>