<script setup lang="ts">
import { rootRouteList } from '@af-mobile-client-vue3/config/routes'
import { Tabbar as VanTabbar, TabbarItem as VanTabbarItem } from 'vant'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import 'vant/lib/tabbar-item/index.css'
import 'vant/lib/tabbar/index.css'

const active = ref(0)
const route = useRoute()

const show = computed(() => {
  return route.name && rootRouteList.includes(route.name as string)
})
</script>

<template>
  <VanTabbar v-if="show" v-model="active" placeholder route>
    <VanTabbarItem replace to="/Component/main">
      {{ '首页' }}
      <template #icon>
        <div class="i-carbon:home" />
      </template>
    </VanTabbarItem>
    <VanTabbarItem replace to="/user/my">
      {{ '我的' }}
      <template #icon>
        <div class="i-carbon:user" />
      </template>
    </VanTabbarItem>
  </VanTabbar>
</template>
