<!--
 * @Date: 2026-01-29 20:33:23
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-29 21:18:33
 * @FilePath: /manulife-weapp/src/components/TabBar.vue
 * @Description: 通用底部导航栏组件，用于页面底部固定导航栏，展示页面标题。
-->
<template>
  <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
    <view class="flex items-center justify-around py-[32rpx]">
      <view
        class="flex-1 flex flex-col items-center justify-center"
        v-for="(item, index) in tabs"
        :key="index"
        @tap="handleTabClick(item)"
      >
        <IconFont
          :name="item.icon"
          :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
          size="24"
        />
        <text
          class="text-[20rpx] mt-[8rpx]"
          :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
        >{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import IconFont from '@/components/IconFont.vue'
import { useGo } from '@/hooks/useGo'
import Taro from '@tarojs/taro'

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

const go = useGo()

const tabs = shallowRef([
  {
    key: 'home',
    label: '首页',
    icon: 'Home',
    path: '/pages/index/index'
  },
  {
    key: 'ai',
    label: 'AI答疑',
    icon: 'Service',
    path: '/pages/ai/index'
  },
  {
    key: 'me',
    label: '我的',
    icon: 'My',
    path: '/pages/mine/index'
  }
])

const handleTabClick = (item) => {
  if (item.key === props.current) return

  if (item.key === 'home') {
    go(item.path)
  } else if (item.key === 'me') {
     // Check if 'me' page exists, otherwise show toast or just go
     // For now, assuming me page might not exist or we just navigate
     // go(item.path)
     // Based on existing logic in index.vue:
     // Taro.redirectTo({ url: '/pages/me/index' });
     // But wait, standard tab bar usually uses switchTab or redirectTo.
     // Since this is a custom tab bar, we use useGo (which uses navigateTo usually).
     // Ideally for tab switching we might want reLaunch or redirectTo to avoid stack buildup.
     // However, useGo defaults to navigateTo.
     // Let's use reLaunch to simulate tab switching behavior if it's a "tab bar"

     // Actually, let's look at index.vue logic:
     // if (item.key === 'me') Taro.redirectTo({ url: '/pages/me/index' });
     // if (item.key === 'ai') Taro.showToast({ title: '功能开发中', icon: 'none' });

     // I will replicate this logic for now but make it more generic if possible.
     // Since 'me' and 'ai' might not be fully implemented, I will stick to what I know.
     // But 'onboarding' and 'signing' pages use this tab bar too.

     // If we are on 'onboarding' (which is seemingly a sub-page but has a tab bar),
     // clicking 'Home' should probably go back to Home.

     Taro.reLaunch({ url: item.path })
  } else if (item.key === 'ai') {
     Taro.showToast({
      title: '功能开发中',
      icon: 'none'
    })
  }
}
</script>