<script setup lang="ts">
import { rootRouteList } from '@af-mobile-client-vue3/config/routes'
import { NavBar as VanNavBar } from 'vant/es'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()

const showNavBar = computed(() => route.meta.navBar)

/**
 * Get page title
 * Located in src/locales/json
 */
const title = computed(() => {
  if (!route.meta)
    return ''

  return route.meta.i18n ? t(route.meta.i18n as string) : (route.meta.title || '')
})

/**
 * Show the left arrow
 * If route name is in rootRouteList, hide left arrow
 */
const showLeftArrow = computed(() => {
  return !(route.name && rootRouteList.includes(route.name as string))
})

// back
function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}
</script>

<template>
  <VanNavBar
    v-show="showNavBar"
    :title="title as string"
    :fixed="true"
    clickable placeholder
    :left-arrow="showLeftArrow"
    @click-left="onBack"
  />
</template>

<style scoped></style>
