<template>
    <div class="wrap">
        <PageHeader :title="headerTitle" :show-back="!showBack" />
        <router-view v-slot="{ Component }" class="app body" :class="{ 'is-tab': routeIsTab }">
            <transition v-if="!globalLoading" :name="transitionName" @before-enter="handleBeforeEnter" @after-enter="handleAfterEnter">
                <keep-alive :include="cacheComponents">
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
        <CustomTabbar v-if="routeIsTab" />
        <div v-if="globalLoading" class="global-loading">
            <van-loading type="spinner" size="32px" color="var(--main-yellow)" />
        </div>
        <div v-if="routerLoading" class="router-loading">
            <van-loading type="spinner" size="32px" color="var(--main-yellow)" />
        </div>
        <div v-if="requestLoading" class="request-loading">
            <van-loading type="spinner" size="32px" color="var(--main-yellow)" />
            <span class="loading-text">{{ t('common.loading') }}</span>
        </div>
        <div v-if="fullScreenLoading" class="full-screen-loading">
            <van-loading type="spinner" size="32px" color="var(--main-yellow)" />
            <span class="loading-text">{{ t('common.loading') }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import CustomTabbar from './components/CustomTabbar.vue'
import PageHeader from './components/PageHeader.vue'
import { useI18n } from 'vue-i18n'
defineOptions({
    name: 'AppRoot',
})
const { t } = useI18n()
const { route, globalStore } = useGlobal()
const { globalLoading, routerLoading, requestLoading, fullScreenLoading, theme } = storeToRefs(globalStore)
// setTimeout(() => {
//     globalStore.setGlobalLoading(false)
// }, 200)
const cacheComponents = $ref('HomeRouter,ListsRouter,AboutRouter')
let transitionName = $ref('fade')
let metaIndex = $ref<number>(route.meta.index as number)

watch(
    () => route.fullPath,
    () => {
        const newMetaIndex = route.meta.index as number
        if (!metaIndex || newMetaIndex === metaIndex) {
            transitionName = 'fade'
        } else if (newMetaIndex > metaIndex) {
            transitionName = 'slide-left'
        } else {
            transitionName = 'slide-right'
        }
        metaIndex = newMetaIndex
    },
)
const routeIsTab = computed(() => {
    return ['/', '/cards', '/finance', '/mine'].includes(route.path)
})
const showBack = computed(() => {
    return ['/', '/cards', '/finance', '/mine', '/login'].includes(route.path)
})
function handleBeforeEnter() {
    globalStore.$patch({ isPageSwitching: true })
}
function handleAfterEnter() {
    globalStore.$patch({ isPageSwitching: false })
}
function slashToDash(str: string) {
    return str.replace(/\//g, '-')
}
const headerTitle = computed(() => {
    const path = route.path
    let key = path === '/' ? 'wallet' : path.slice(1)
    key = slashToDash(key)
    return t(`${key}.title`) || ''
})
onMounted(() => {
    document.documentElement.classList.toggle('dark', theme.value === 'dark')
})
</script>

<style scoped lang="scss">
.wrap {
    min-height: 100vh;
    background: var(--main-bg);
    color: var(--main-yellow);
    font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
.page {
    padding: 32px 16px 120px 16px;
    box-sizing: border-box;
    min-height: 100vh;
    background: var(--main-bg);
}
.page-shadow{
    box-shadow: 0px 0px 4px rgba(134, 134, 133, 0.25);
}
.request-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(0, 0, 0, 1);
    padding: 12px;
}
</style>
