<template>
  <a-layout class="main-content">
    <a-layout-sider :collapsed="collapsed" theme="light" :trigger="null" collapsible>
      <div v-if="!collapsed" class="title flex-center">
        <div>超级后台</div>
      </div>
      <div v-else class="logo flex-center">
        <img src="@/assets/vue.svg" title="超级后台" alt="xx" />
      </div>
      <!--  -->
      <!-- <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
        <a-menu-item key="1">
          <router-link to="/index">
            <pie-chart-outlined />
            <span>首页</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/register/index">
            <pie-chart-outlined />
            <span>注册</span>
          </router-link>
        </a-menu-item>
      </a-menu> -->
      <!-- 动态生成菜单项 -->
      <a-menu v-model:selectedKeys="selectedKeys" theme="light" mode="inline">
        <template v-for="route in menuRoutes">
          <!--  -->
          <a-menu-item v-if="route.name === 'dashboard'">
            <router-link :to="`${route.children[0].path}`">
              <pie-chart-outlined />
              <span>{{ route.meta?.title }}</span>
            </router-link>
          </a-menu-item>
          <a-sub-menu v-if="route.children && route.children.length && route?.name !== 'dashboard'" :key="route.path">
            <template #title>
              <pie-chart-outlined />
              <span>{{ route.meta?.title }}</span>
            </template>
            <a-menu-item v-for="child in route.children" :key="child.path">
              <router-link :to="`${route.path}${child.path}`">{{ child.meta?.title }}</router-link>
            </a-menu-item>
          </a-sub-menu>
          <!--  -->
          <a-menu-item v-if="!route.children">
            <router-link :to="route.path">
              <pie-chart-outlined />
              <span>{{ route.meta?.title }}</span>
            </router-link>
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="layout-header">
        <layout-header v-model:collapsed="collapsed" />
      </a-layout-header>
      <a-layout-content class="layout-content">
        <router-view v-slot="{ Component, route }">
          <transition appear name="fade-transform" mode="out-in">
            <keep-alive :include="keepAliveNames">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive>
          </transition>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import LayoutHeader from '@/components/layout/header/LayoutHeader.vue'
import { computed } from 'vue'
// import Sliber from '@/components/layout/sliber/sliber.vue'
import { staticRouter } from '@/router/staticRouters'
import { useRoute } from 'vue-router'
const route = useRoute()

// 当前选中的菜单项
// const selectedKeys = computed(() => route.path)

const selectedKeys = computed(() => [route.path])
// 过滤出需要在菜单中显示的路由
const menuRoutes = computed(() => staticRouter.filter((route) => route.meta && route.meta.title))

// 示例：动态控制缓存页面的名称
// const keepAliveNames = ref(['index'])

import { ref } from 'vue'
// 控制菜单折叠
const collapsed = ref<boolean>(false)

const keepAliveNames = ref<string[]>([])
</script>

<style scoped lang="scss">
.main-content {
  width: 100vw;
  height: 100vh;

  .layout-header {
    background: #ffffff;
    padding: 0;
  }

  .layout-content {
    margin: 10px;
    padding: 4px;
    background: #f5f7fd;
    min-height: 280px;
    border-radius: 5px;
    overflow: auto;
  }
}

.title {
  height: 32px;
  width: 168px;
  transition: width 2ms linear 2ms;
  margin: 16px;
  color: black;
  font-weight: bold;
  font-size: 20px;
}

.logo {
  margin: 16px;

  img {
    width: 50px;
    height: 50px;
  }
}

.site-layout .site-layout-background {
  background: #ffffff;
}
</style>