<template>
  <div class="app-container">
    <!-- 设置页面背景（列表页） -->
    <NoteListPage v-show="showBackgroundPage" class="background-page" />

    <!-- 普通页面过渡效果（不包括设置页面） -->
    <template v-if="!isSettingsRoute">
      <router-view v-slot="{ Component, route }">
        <transition :name="transitionName">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </template>

    <!-- 设置页面 -->
    <transition 
      name="settings-slide"
      v-show="isSettingsRoute" 
      appear>
      <SettingsPage class="setting-page" />
    </transition>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import '@/common/base.css'

// 导入页面组件
import NoteListPage from './pages/NoteListPage.vue'
import SettingsPage from './pages/SettingsPage.vue'

const route = useRoute()
const transitionName = ref('slide-left')

// 计算是否为设置页面路由
const isSettingsRoute = computed(() => {
  return route.path === '/settings'
})

// 计算是否需要显示背景页面（仅在设置页面时显示）
const showBackgroundPage = computed(() => {
  return route.path === '/settings'
})

// 监听路由变化，动态设置过渡动画方向
watch(
  () => route.path,
  (toPath, fromPath) => {
    // 特殊处理：从编辑页返回列表页的情况
    if ((fromPath.startsWith('/editor') || fromPath.startsWith('/notes/')) && toPath === '/notes') {
      transitionName.value = 'slide-right'
      return
    }
    
    // 判断导航方向
    const toDepth = toPath.split('/').length
    const fromDepth = fromPath.split('/').length
    
    // 如果是进入更深的页面（如从列表页进入编辑页），使用左滑动画
    if (toDepth > fromDepth) {
      transitionName.value = 'slide-left'
    } 
    // 如果是返回上层页面（如从编辑页返回列表页），使用右滑动画
    else if (toDepth < fromDepth) {
      transitionName.value = 'slide-right'
    }
    // 同级页面切换使用默认的左滑动画
    else {
      transitionName.value = 'slide-left'
    }
  }
)

// 无额外处理函数
</script>

<style lang="less" scoped>
.app-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5; // 设置默认背景色，防止闪烁
}

// 背景页面样式
.background-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.setting-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

// 左滑进入（从右到左）
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

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

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

.slide-left-enter-to,
.slide-left-leave-from {
  transform: translateX(0);
}

// 右滑进入（从左到右）
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

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

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

.slide-right-enter-to,
.slide-right-leave-from {
  transform: translateX(0);
}

// 设置页面滑入滑出效果
.settings-slide-enter-active,
.settings-slide-leave-active {
  transition: transform 0.3s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

.settings-slide-enter-from {
  transform: translateY(100%);
}

.settings-slide-leave-to {
  transform: translateY(100%);
}

.settings-slide-enter-to,
.settings-slide-leave-from {
  transform: translateY(0);
}
</style>
