<script setup>
import { RouterView, useRoute } from "vue-router";
//在这个页面控制底部导航的显示和隐藏----路由嵌套也可以
import { ref, watch, provide } from "vue";
const route = useRoute();
const isShowTabBar = ref(true);
const storedTotalAmount = localStorage.getItem("cartTotalAmount");

// console.log("app:"+storedTotalAmount);
provide("cc",storedTotalAmount)
watch(route, (v) => {
  if (v.meta.isHideTabBar) {
    isShowTabBar.value = false;
  } else {
    isShowTabBar.value = true;
  }
});
</script>

<template>
  <div class="container">
    <RouterView class="main" />
    <van-tabbar route :fixed="false" v-show="isShowTabBar">
      <van-tabbar-item icon="home-o" :to="{ name: 'Index' }"
        >祭祀</van-tabbar-item
      >
	  <van-tabbar-item icon="cart-o" :badge="storedTotalAmount" :to="{ name: 'Events' }"
	    >大事纪</van-tabbar-item
	  >
      <van-tabbar-item icon="user-o" :to="{ name: 'User' }"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<style scoped></style>
