<script setup lang="ts">
import NavBar from '@af-mobile-client-vue3/components/core/NavBar/index.vue'
import Tabbar from '@af-mobile-client-vue3/components/core/Tabbar/index.vue'
import { isDark, preferredDark } from '@af-mobile-client-vue3/composables/dark'
import useRouteCacheStore from '@af-mobile-client-vue3/stores/modules/routeCache'
import { useHead } from '@unhead/vue'
import {
  ConfigProvider as VanConfigProvider,
} from 'vant/es'
import { computed, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { appDescription, appName } from './constants'

const instance = getCurrentInstance()
const route = useRoute()

// 是否使用 fullPath 作为 component key
// 配置：是否使用 fullPath 作为 router-view 的 component key
// 该配置作用为：区分keep-alive缓存组件，为true时 如果跳转相同的缓存组件但是url携带参数不同 就会进行区分。反之则会只会根据路由名称进行命中
// 普通走基座的项目无需进行设置，只有特殊的单项目部署的服务 需要固定缓存顶层组件时进行开启，例如微信-开启方式在自己项目的main.ts中增加 app.config.globalProperties.$useFullPathKey = false
const useFullPathKey = computed(() => {
  return instance?.appContext.config.globalProperties.$useFullPathKey ?? true
})

useHead({
  title: appName,
  meta: [
    {
      name: 'description',
      content: appDescription,
    },
    {
      name: 'theme-color',
      content: () => isDark.value ? '#00aba9' : '#ffffff',
    },
  ],
  link: [
    {
      rel: 'icon',
      type: 'image/svg+xml',
      href: () => preferredDark.value ? '/favicon-dark.svg' : '/favicon.svg',
    },
  ],
})

const routeCacheStore = useRouteCacheStore()

const keepAliveRouteNames = computed(() => {
  return routeCacheStore.routeCaches as string[]
})

const mode = computed(() => {
  return isDark.value ? 'dark' : 'light'
})
</script>

<template>
  <VanConfigProvider :theme="mode" theme-vars-scope="global" class="app-container">
    <NavBar />
    <router-view v-slot="{ Component }">
      <section class="app-wrapper">
        <keep-alive :include="keepAliveRouteNames" :max="5">
          <component :is="Component" :key="useFullPathKey ? route.fullPath : undefined" />
        </keep-alive>
      </section>
    </router-view>
    <Tabbar />
  </VanConfigProvider>
</template>

<style>
@import './font-style/font.css';
html,
body,
#system-app {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  font-family:
    Inter,
    'PingFang SC',
    'Microsoft YaHei UI',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    'Noto Sans',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji',
    sans-serif !important;
}
input[type='password']::-ms-reveal {
  display: none;
}
input[type='password']::-ms-clear {
  display: none;
}
</style>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  /*noinspection CssUnresolvedCustomProperty*/
  height: calc(100vh - var(--system-header-height, 0px)); /* 使用 vh 确保在移动端浏览器中也能撑满 */
  width: 100%;
}

.app-wrapper {
  width: 100%;
  position: relative;
  flex: 1;
  min-height: 0; /* 关键：允许 flex 项目收缩，防止溢出 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.app-wrapper > :deep(*) {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
