<script setup>
import { onMounted, computed } from 'vue'
import Tabbar from './tabbar/index.vue'
import Menu from '@/layout/menu/index.vue'
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter();
const cachedComponents = computed(() =>
  router.getRoutes().filter((r) => r.meta.KeepAlive).map((r) => r.name)
);

onMounted(() => {
  console.log(cachedComponents.value)
  window._AMapSecurityConfig = {
        securityJsCode: "0166bce681642b0e1643544fe0411b9e",
    };
})

</script>

<template>
  <div class="layout_container">
    <el-container>
      <el-header>
        <Tabbar />
      </el-header>
      <el-container>
        <el-aside>
          <Menu />
        </el-aside>
        <el-main :class="{ noPadding: route.meta.noPadding }">
          <router-view v-slot="{ Component }">
            <Transition name="fade" mode="out-in" enter-from-class="fade-enter">
              <keep-alive :include="cachedComponents">
                <component :is="Component" />
              </keep-alive>
              <!-- <component v-else :is="Component" /> -->
            </Transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.el-header {
  padding: 0;
  height: $navbar-height;
}

.el-aside {
  width: $base-menu-width;
  height: calc(100vh - $navbar-height);
  
  overflow: initial;
  // overflow-y: hidden;
}

.el-main {
  height: calc(100vh - $navbar-height);
  background-color: var(--layout-main-bg-color);
  // min-width: 1250px;
  padding: 0;
}
.noPadding{
  padding: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease-out;
}

.fade-enter {
  opacity: 0;
  transform: translateX(-50px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(50px);
}
</style>
