<template>
  <el-container class="layout">
    <el-aside
      width="auto"
      class="asside"
    >
      <MenuBar />
    </el-aside>
    <el-container>
      <el-header class="header">
        <Header />
      </el-header>
      <el-main class="main">
        <Tabs style="padding: 0px 20px" />
        <div v-loadings="getPageLoading">
          <router-view v-slot="{ Component, route }">
            <keep-alive ref="keepAliveRef">
              <component
                :is="Component"
                :key="route.name"
              />
            </keep-alive>
            <!-- <keep-alive>
              <component
                :is="Component"
                v-if="isKeepAlive($route.name, tabsList)"
                :key="$route.name"
              />
            </keep-alive>
            <component
              :is="Component"
              v-if="!isKeepAlive($route.name, tabsList)"
              :key="$route.name"
            /> -->
          </router-view>
          <!-- <keep-alive>
            <router-view />
          </keep-alive> -->
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import { ref, computed, watchEffect, KeepAlive } from "vue";
//setup语法糖中，引入的组件可以直接使用，无需再通过components进行注册
import Header from "@/layout/header/Header.vue";
import { useAppStore } from "@/store/app";
import MenuBar from "./menu/MenuBar.vue";
import Tabs from "./tabs/Tabs.vue";
import { tabStore } from "@/store/tabs";

const userStore = useAppStore();
const getPageLoading = computed(() => userStore.getPageLoading);
const tabsstore = tabStore();
// 获取tabs数据
const tabsList = computed(() => {
  return tabsstore.getTabs
})
const keepAliveRef = ref()
//获取tabs数据
const tabsText = computed(() => {
  return tabsstore.getDeleteTable
})
watchEffect(() => {
  // 监听判断是否包含缓存数据
  if (tabsList.value.length > 0 && keepAliveRef.value && keepAliveRef.value.$) {
    const cacheList = keepAliveRef.value.$.__v_cache
    tabsText.value && cacheList.delete(tabsText.value);
    // cacheList.forEach((value, key) => {
    //   // 判断缓存有数据删除的对应缓存
    //   if (tabsText.value === key) {
    //     cacheList.delete(tabsText.value);
    //     tabsstore.deleteCurrentTabel("")
    //   }
    // });
    // 默认超过20tab标签删除第一个缓存
    if (cacheList.size >= 20) {
      const firstKey = cacheList.keys().next().value;
      cacheList.delete(firstKey);
    }
  }
})
</script>
<style lang="scss" scoped>
.layout {
  height: 100%;
  .asside {
    background-color: #304156;
  }
  .header {
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
    // background-color: blueviolet;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main {
    position: relative;
    padding-top: 0px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
</style>
