<template>
  <div class="layout-container">
    <div
      class="layout_left"
      :class="{ collapsed: useSetting.collapsed ? true : false }"
    >
      <Logo :collapsed="useSetting.collapsed"></Logo>
      <!-- 展示菜单 -->
      <div class="layout_left_item">
        <a-menu
          style="padding-right: 14px; width: 100%"
          theme="light"
          :inlineCollapsed="useSetting.collapsed ? true : false"
          mode="inline"
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
        >
          <!-- :selectedKeys="selectedKeys" -->
          <Menu-item :menu-item="userStore.menuRoutes"></Menu-item>
        </a-menu>
      </div>
    </div>
    <div
      class="layout_tabbar"
      :class="{ collapsed: useSetting.collapsed ? true : false }"
    >
      <tabbar v-model:collapsed="useSetting.collapsed"></tabbar>
    </div>
    <div
      class="layout_content"
      :class="{ collapsed: useSetting.collapsed ? true : false }"
    >
      <div
        style="
          height: 40px;
          width: 100%;
          background-color: #fff;
          border-top: #ccc 1px solid;
        "
      >
        <tabsPane></tabsPane>
      </div>
      <div class="layout_content_item">
        <router-view v-slot="{ Component, route }">
          <transition appear name="fade" mode="out-in">
            <keep-alive :include="keepAliveNames">
              <component v-if="flag" :is="Component" :key="route.fullPath" />
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, nextTick } from "vue";
import Logo from "./logo/index.vue";
import MenuItem from "./menuItem/MenuItem.vue";
import tabbar from "./tabbar/index.vue";
import tabsPane from "@/components/tabsPane/index.vue";
import { useUserStore } from "@/stores/modules/userStore";
import { useUserSetting } from "@/stores/modules/setting";
import { useRoute } from "vue-router";
import api from "@/axios";
const userStore = useUserStore();
const useSetting = useUserSetting();
const route = useRoute();

const keepAliveNames = ref<string[]>([]);
const openKeys = ref([useSetting.selectedKeys]);

const flag = ref(true);
// const resp = api.get("/management/auth/myAuthRouter");
// console.log(resp, "000");

// 全局刷新效果
watch(
  () => useSetting.refresh,
  () => {
    flag.value = false;
    nextTick(() => {
      flag.value = true;
    });
  }
);

const selectedKeys = computed(() => [route.path]);
</script>
<style lang="scss" scoped>
.layout-container {
  width: 100%;
  height: 100vh;
  // display: flex;
  .layout_left {
    width: 260px;
    height: 100vh;
    // background: #001529;
    color: #fff;
    transition: all 0.3s;
    .layout_left_item {
      height: calc(100vh - 50px);
      overflow-y: auto;
    }
    &.collapsed {
      width: 65px;
    }
  }
  .layout_tabbar {
    position: fixed;
    top: 0;
    left: 260px;
    width: calc(100% - 260px);
    height: 50px;
    transition: all 0.3s;
    background: #f5f5f5;
    &.collapsed {
      width: calc(100% - 65px);
      left: 65px;
    }
  }
  .layout_content {
    position: absolute;
    width: calc(100% - 260px);
    height: calc(100vh - 50px);
    top: 50px;
    left: 260px;
    // padding: 20px;
    overflow: auto;
    transition: all 0.3s;
    background: #f5f5f5;
    &.collapsed {
      width: calc(100% - 65px);
      left: 65px;
    }
    .layout_content_item {
      padding: 20px;
    }
  }
}
.fade-enter-from {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(-30px);
}
// .fade-enter-active {
//   opacity: 0;
// }
.fade-leave-to {
  opacity: 0;
  transition: all 0.2s;
  transform: translateX(30px);
}
</style>
