<template>
  <view class="tab-bar">
    <view class="tab-bar-row">
      <view class="tab-bar-col" @click="toUrl('/')">
        <view>
          <uni-icons v-if="nowPath === '/'" type="home-filled" size="30" color="#499495"></uni-icons>
          <uni-icons v-else type="home" size="30" color="#7f7f7f"></uni-icons>
        </view>
        <view :class="nowPath === '/' ? 'active' : ''">首页</view>
      </view>
      <view class="tab-bar-col" @click="toUrl('/pages/main/bgcx/bgcx')">
        <view>
          <uni-icons v-if="nowPath === '/pages/main/bgcx/bgcx'" type="wallet-filled" size="30" color="#499495"></uni-icons>
          <uni-icons v-else type="wallet" size="30" color="#7f7f7f"></uni-icons>
        </view>
        <view :class="nowPath === '/pages/main/bgcx/bgcx' ? 'active' : ''">报告查询</view>
      </view>
      <view class="tab-bar-col" @click="toUrl('/pages/main/order/order')">
        <view>
          <uni-icons v-if="nowPath === '/pages/main/order/order'" type="person-filled" size="30" color="#499495"></uni-icons>
          <uni-icons v-else type="person" size="30" color="#7f7f7f"></uni-icons>
        </view>
        <view :class="nowPath === '/pages/main/order/order' ? 'active' : ''">我的订单</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted, watch } from 'vue';
import { 
		onShow,onLoad
	} from '@dcloudio/uni-app'

let nowPath = ref('/');

const route = useRoute();

onShow(()=>{
	setTimeout(()=>{
				 document.title = '健康管理中心';
	},300)
})
// 初始化 nowPath
onMounted(() => {
  nowPath.value = route.path 
});

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    console.log('路由路径已更新:', newPath);
    nowPath.value = newPath.replace(/\/$/, ''); // 移除尾随斜杠
  }
);

// 跳转方法
const toUrl = (url) => {
  
    uni.redirectTo({ url }); // 非 TabBar 页面使用 navigateTo
 
};
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  height: 110rpx;
  z-index: 999;
}
.tab-bar-row {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 40rpx;
}
.tab-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #6f6f6f;
  font-size: 22rpx;
}
.active {
  color: #499495;
}
</style>