<script setup>
import { useI18n } from 'vue-i18n'

useHead({
  title: useI18n().t('appSetting.appName'),
  meta: [
    { name: 'description', content: useI18n().t('appSetting.appDescription') },
    { name: 'keywords', content: useI18n().t('appSetting.appKeyWords') },
  ],
})
const mode = computed(() => {
  return ''
})

// 添加路由中间件来处理过渡方向
const router = useRouter()
const route = useRoute()
const slideDirection = ref('slide-left')

// 记录路由历史
const routeHistory = ref([])

router.beforeEach((to, from) => {
  // 记录路由历史
  routeHistory.value.push(from.path)
  
  // 如果是返回操作（在历史记录中找到目标路由）
  if (routeHistory.value.includes(to.path)) {
    slideDirection.value = 'slide-right'
    // 清除历史记录到返回的位置
    const index = routeHistory.value.indexOf(to.path)
    routeHistory.value = routeHistory.value.slice(0, index)
  } else {
    slideDirection.value = 'slide-left'
  }
})

// 提供过渡名称给页面组件
provide('slideDirection', slideDirection)
</script>

<template>
  <VanConfigProvider theme="light">
    <NuxtLoadingIndicator
      color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
    <NuxtLayout>
      <NuxtPage :transition="{
        name: slideDirection
      }" />
    </NuxtLayout>
  </VanConfigProvider>
</template>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  width: 100%;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}
:root{
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}
</style>