<template>
  <!-- 在根div上添加style绑定，将JS变量传递给CSS变量 -->
  <div class="common-layout" :style="{ '--headerHeight': headerHeight, '--asideWidth': asideWidth }">
    <el-container class="layout-container">
      <!-- 顶部Header -->
      <el-header class="layout-header">
        <keep-alive>
           <Header></Header>
        </keep-alive>
        
        <!-- <slot name="header">
          <div class="header-content">
            <Header></Header>
          </div>
        </slot> -->
      </el-header>
      <el-container class="main-content-wrapper"> 
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-container>
     
    </el-container>
  </div>
</template>

<script setup>
// 使用Composition API
import { onBeforeUnmount, onMounted, ref } from 'vue'
import Header from '@/pages/header/index.vue'

const headerHeight = ref('40px')
const asideWidth = ref('350px')

// onBeforeUnmount(() => {
//   console.log('组件即将卸载');
// })
// onMounted(() => {
//   console.log('组件已挂载');
// })


</script>


<style scoped>
*{
  margin: 0;
  padding: 0;
}
.common-layout {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.common-layout .layout-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.common-layout .layout-header {
  height: var(--headerHeight);
  /* background-color: rgb(0, 0, 0); */
  color: white;
  display: flex;
  align-items: center;
  /* padding: 0 20px; */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); */
  /* z-index: 10; */
}

.common-layout .layout-header .header-content {
  width: 100%;
}

.common-layout .main-content-wrapper {
  flex: 1;
  overflow: hidden;
}

.common-layout .fixed-aside {
  width: var(--asideWidth);
  /* background-color: #868686; */
  padding: 20px;
  box-sizing: border-box;
  overflow-y: hidden;
  transition: width 0.3s;
}

.common-layout .fixed-aside.left-aside {
  order: 1;
}

.common-layout .fixed-aside.right-aside {
  order: 3;
}

.common-layout .main-container {
  flex: 1;
  order: 2;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.common-layout .main-container .content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: hidden;
}

.common-layout .main-footer {
  /* background-color: #868686; */
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 15px;
  margin: 10px;
  border-radius: 4px;
}

.common-layout .main-footer .footer-content {
  padding: 10px 0;
  border-bottom: 1px solid #a0a0a0;
}

.common-layout .main-footer .footer-content:last-child {
  border-bottom: none;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .common-layout .fixed-aside {
    width: 350px !important;
  }
}

@media (max-width: 800px) {
  .common-layout .main-footer {
    display: none;
  }
}

@media (max-width: 768px) {
  .common-layout .fixed-aside {
    width: 350px !important;
     /* display: none; */
  }
}
</style>