<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>
      <SystemMenus/>
    </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 {ref} from "vue";
import LayoutHeader from "@/components/layout/header/LayoutHeader.vue";
import SystemMenus from "@/components/layout/SystemMenus.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>
