<!-- components/TabBar.vue -->
<template>
  <view v-if="shouldShowTabBar" class="tab-bar-wrapper">
    <view class="tab-bar">
      <view
        v-for="(tab, index) in tabs"
        :key="tab.path"
        :class="['tab-item', { active: currentActiveIndex === index }]"
        hover-class="tab-item--hover"
        @tap.stop="onTabTap(index)"
      >
        <!-- 判断是否使用字体图标（我的页面用字体，其他用图片） -->
        <text 
          v-if="tab.useFontIcon"
          :class="['iconfont', tab.icon]"
          class="tab-icon-font"
    			:style="{ fontSize: tab.fontSize}"
        ></text>
        <text class="tab-label">{{ tab.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import {
  PAGE,
  TAB_ROUTES,
  getCurrentRoutePath,
  getTabIndexByRoute
} from '@/common/constants/routes.js'

const props = defineProps({
  active: { type: Number, default: -1 },
  activeTab: { type: Number, default: -1 }
})

const emit = defineEmits(['update:active', 'tab-change'])

const currentActiveIndex = ref(-1)
const shouldShowTabBar = ref(true)

const HIDE_TABBAR_PAGES = [
  'pages/memberInfo/courseList',
  'pages/memberInfo/courseDetail',
  'pages/memberInfo/booking',
  'pages/memberInfo/bodyTestReport',
  'pages/groupCourse/list',
  'pages/groupCourse/detail',
  'pages/checkIn/checkIn',
  'pages/memberInfo/myCourses',
  'pages/memberInfo/coupons',
  'pages/memberInfo/points',
  'pages/memberInfo/pointsMall',
  'pages/memberInfo/referral',
  'pages/memberInfo/userInfo',
]

function getActiveIndexFromRoute() {
  const routePath = getCurrentRoutePath()
  const index = getTabIndexByRoute(routePath)
  return index >= 0 ? index : 0
}

function syncActiveState() {
  const routeIndex = getActiveIndexFromRoute()
  if (routeIndex >= 0) {
    currentActiveIndex.value = routeIndex
    return
  }
  if (props.active >= 0) {
    currentActiveIndex.value = props.active
  } else if (props.activeTab >= 0) {
    currentActiveIndex.value = props.activeTab
  } else {
    currentActiveIndex.value = 0
  }
}

function checkShouldShow() {
  let routePath = getCurrentRoutePath()
  if (routePath.startsWith('/')) {
    routePath = routePath.slice(1)
  }
  if (routePath.includes('?')) {
    routePath = routePath.split('?')[0]
  }
  const shouldHide = HIDE_TABBAR_PAGES.includes(routePath)
  shouldShowTabBar.value = !shouldHide
}

let routeWatcher = null
let appRouteCallback = null
let isNavigating = false

onMounted(() => {
  syncActiveState()
  checkShouldShow()
  // #ifndef MP-WEIXIN
  // H5和其他平台使用轮询监听路由变化
  routeWatcher = setInterval(() => {
    // 导航期间不更新状态，避免覆盖用户点击的索引
    if (isNavigating) return
    const newIndex = getActiveIndexFromRoute()
    if (newIndex !== currentActiveIndex.value) {
      currentActiveIndex.value = newIndex
    }
    checkShouldShow()
  }, 200)
  // #endif
  // #ifdef MP-WEIXIN
  if (typeof uni.onAppRoute === 'function') {
    appRouteCallback = () => {
      setTimeout(() => {
        syncActiveState()
        checkShouldShow()
      }, 100)
    }
    uni.onAppRoute(appRouteCallback)
  }
  // #endif
})

onBeforeUnmount(() => {
  // #ifndef MP-WEIXIN
  // H5和其他平台清理定时器
  if (routeWatcher) { 
    clearInterval(routeWatcher) 
    routeWatcher = null
  }
  // #endif
  // #ifdef MP-WEIXIN
  if (appRouteCallback && typeof uni.offAppRoute === 'function') {
    uni.offAppRoute(appRouteCallback)
    appRouteCallback = null
  }
  // #endif
})

watch(() => props.active, () => {
  const routeIndex = getActiveIndexFromRoute()
  if (routeIndex !== currentActiveIndex.value) { syncActiveState() }
})

// tabs 配置：只有"我的"用字体图标
const tabs = [
  {
    path: PAGE.INDEX,
    icon: 'icon-home',
    label: '首页',
    useFontIcon: true,
	fontSize:"36rpx"
  },
  {
    path: PAGE.COURSE,
    icon: 'icon-course',
    label: '课程',
    useFontIcon: true,
	fontSize:"36rpx"
  },
  {
    path: PAGE.MEMBER,
    icon: 'icon-profile', 
    label: '我的',
    useFontIcon: true,
	fontSize:"36rpx"
  }
]

let isSwitching = false

function onTabTap(index) {
  if (isSwitching) return
  const targetPath = TAB_ROUTES[index]
  const currentPath = TAB_ROUTES[currentActiveIndex.value]
  if (targetPath === currentPath) return
  console.log('Tab 点击:', index, targetPath)
  // 立即更新状态
  currentActiveIndex.value = index
  emit('update:active', index)
  emit('tab-change', index)
  // 设置导航标志，阻止轮询覆盖状态
  isNavigating = true
  uni.showLoading({ title: '加载中...', mask: true })
  isSwitching = true
  uni.switchTab({
    url: targetPath,
    success: () => { console.log('switchTab 成功:', targetPath) },
    fail: (err) => {
      console.error('switchTab 失败:', err)
      uni.reLaunch({ url: targetPath })
    },
    complete: () => {
      uni.hideLoading()
      setTimeout(() => {
        isSwitching = false
        isNavigating = false
        // #ifdef MP-WEIXIN
        syncActiveState()
        // #endif
        checkShouldShow()
      }, 100)
    }
  })
}
</script>

<style lang="scss" scoped>
// 引入字体图标 CSS（定义 @font-face）
@import '/common/style/tabbar_icon/tabbar.css';

// 固定容器 - 确保TabBar始终在屏幕底部
.tab-bar-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}

.tab-bar-wrapper .tab-bar {
  pointer-events: auto;
}

.tab-bar {
  height: 120rpx;
  background: white;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 24rpx var(--tabbar-shadow);
  border-radius: 32rpx 32rpx 0 0;
  /* 防闪烁优化 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  transition: all 0.1s ease;
}

.tab-item:active {
  transform: scale(0.95);
}

// 图片图标样式
.tab-icon {
  width: 40rpx;
  height: 40rpx;
}

// 字体图标样式
.tab-icon-font {
  font-size: 44rpx;
  line-height: 1;
}

// 字体图标颜色控制（根据选中状态）
.tab-item .iconfont {
  color: rgba(150, 150, 165, 1);
}

.tab-item.active .iconfont {
  color: rgba(130, 220, 130, 0.9);
}

.tab-label {
  font-size: 22rpx;
  color: rgba(150, 150, 165, 1);
}

.tab-item.active .tab-label {
  color: rgba(130, 220, 130, 0.9);
  font-weight: 600;
}
</style>
