<template>
  <div class="app-page">
    <div class="app-page__sidebar">
      <app-sidebar v-model:collapse="isCollapse" />
    </div>
    <div class="app-page__wrapper">
      <div class="app-page__header">
        <app-header>
          <template #left>
            <i class="icon-fold-expand" title="折叠/展开" @click="isCollapse = !isCollapse">
              <span :class="isCollapse ? 'g-icon--expand' : 'g-icon--fold'"></span>
            </i>
          </template>
        </app-header>
      </div>
      <div class="app-page__main">
        <div class="app-page__navbar" v-if="state.historyStacks.length">
          <app-navbar />
        </div>
        <div id="appPageTeleport" class="app-page__container app-page__teleport"></div>
        <div class="app-page__container">
          <router-view v-slot="{ Component, route }">
            <transition name="view" mode="out-in">
              <!--组件缓存-->
              <!-- <keep-alive :exclude="state.excludeViews"> -->
                <component :is="handleComponent(Component, route)" :key="route.fullPath" />
              <!-- </keep-alive> -->
            </transition>
          </router-view>
        </div>
      </div>
      <div class="app-page__footer">
        <app-footer />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RouteRecordNormalized, RouteRecordName } from 'vue-router'
import { useGlobalStore } from '@/stores'
import historyRouter from '../../../router/historyRouter'
import AppHeader from '../header/index.vue'
import AppFooter from '../footer/index.vue'
import AppNavbar from '../navbar/index.vue'
import AppSidebar from '../sidebar/index.vue'

const { state } = historyRouter;
const globalStore = useGlobalStore()
const isCollapse = ref(globalStore.isMobile);

// 手动给组件添加 name 属性，处理缓存 exclude 无效的问题
const handleComponent = (component: Record<'type', { name: RouteRecordName | undefined }>, route: RouteRecordNormalized) => {
  if (component) {
    component.type.name = route.name;
  }
  return component;
}
</script>

<style lang="less">
@import './index.less';
</style>