<template>
  <van-nav-bar
    :title="route.meta.title"
    v-if="route.meta.navbar"
    class="app-bar-header"
    :style="notchStyle"
  />

  <router-view
    v-slot="{ Component }"
    class="app-main-content"
    :style="mainStyle"
  >
    <keep-alive v-if="route.meta.keepAlive">
      <component :is="Component" key="Layout" />
    </keep-alive>
    <component :is="Component" v-if="!route.meta.keepAlive" key="Layout" />
  </router-view>

  <van-tabbar route active-color="#4765DD" inactive-color="#C4D0FF">
    <van-tabbar-item v-for="item in tabbarOptions" :key="item.to" replace :to="item.to">
      <template #icon="props">
        <svg-icon  class="tabbar-icon" :name="item.icon" />
      </template>

      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { getNotchHeight } from "@/utils/statusBar";

const route = useRoute();
const notchStyle = ref({});
const mainStyle = ref({});

const active = ref(route.name);

const tabbarOptions = [
  {
    title: "社交",
    icon: "tabbar-im",
    to: "/im",
  },
  {
    title: "交易",
    icon: "tabbar-transaction",
    to: "/transaction",
  },
  {
    title: "钱包",
    icon: "tabbar-wallet",
    to: "/wallet",
  },
  {
    title: "DAPP",
    icon: "tabbar-dapp",
    to: "/dapp",
  },
  {
    title: "我的",
    icon: "tabbar-me",
    to: "/me",
  },
];

onBeforeMount(async () => {
  const height = await getNotchHeight();
  notchStyle.value = {
    height: `calc(46px + ${height}px)`,
  };
  if (route.meta.navbar) {
    mainStyle.value.marginTop = `0 px`;
  } else {
    mainStyle.value = {
      marginTop: `${height}px`,
    };
  }
});
</script>

<style scoped lang="less">
.app-bar-header {
  :deep(.van-nav-bar__content) {
    height: 100%;
  }
  :deep(.van-nav-bar__title) {
    height: 72%;
    display: flex;
    align-items: flex-end;
  }
}
.tabbar-icon{
  width: 25px;
  height: 25px;
}
.van-tabbar--fixed{
  padding: 10px 0 4px 0;
}
// .app-main-content{
//   height: 100%;
// }
</style>
