<template>
  <el-container id="components-layout-demo-custom-trigger">
    <el-aside class="sider-com" :trigger="null" collapsible :style="{ width: collapsed ? '64px' : '200px' }">
      <el-scrollbar>
        <div class="logo">
          <div class="logo-box"></div>
        </div>
        <side-menu :collapsed="collapsed"></side-menu>
      </el-scrollbar>
    </el-aside>
    <el-container :style="{ paddingLeft: collapsed ? '64px' : '200px' }" direction="vertical">
      <div :style="{
        position: 'fixed',
        width: collapsed ? 'calc(100% - 64px)' : 'calc(100% - 200px)',
        zIndex: '1000',
      }">
        <header-com v-model:collapsed="collapsed"></header-com>
        <tags-com-vue></tags-com-vue>
      </div>

      <el-main :style="{
        padding: '100px 24px 24px 24px',
        background: '#ebebeb',
        width: '100%',
        height: '100vh',
        overflow: 'hidden',
        boxSizing: 'border-box',
      }">
        <el-scrollbar :height="elMainHeight + 'px'"
          style="width: 100%; overflow: hidden; border-top: 1px solid #f7f7f7">
          <router-view v-slot="{ Component }" v-if="isRouterAlive">
            <keep-alive :include="tagList">
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { getCurrentInstance, nextTick, provide, ref, computed } from "vue";
import sideMenu from "@/Components/common/sideMenuCom.vue";
import headerCom from "@/Components/common/headerCom.vue";
import tagsComVue from "@/Components/common/tagsCom.vue";
import templateHooks from "../Hooks/templateHooks";
const collapsed = ref(false);
const $common = getCurrentInstance().appContext.config.globalProperties.$common;
const elMainHeight = ref($common.comElMainHeight());
const isRouterAlive = ref(true);
const { $route, $store } = templateHooks()
const tagList = computed(() => {
  return $store.state.tagList.join(',')
})
const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  });
};

provide("reload", reload);

</script>

<style lang="scss" scoped>
.logo {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  border-right: solid 1px #eef1f6;

  .logo-box {
    height: 40px;
    box-sizing: border-box;
    background: grey;
  }
}

.sider-com {
  overflow: auto;
  height: 100vh;
  position: fixed;
  left: 0;
  background: #000;
}
</style>
