<!--
 * @Author: Devin
 * @Date: 2023-01-13 10:33:54
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:51:40
 * @Description: 容器
-->
<template>
  <div class="common-container">
    <el-container>
      <el-header>
        <el-scrollbar>
          <slot name="header"></slot>
        </el-scrollbar>
      </el-header>
      <el-container>
        <el-aside
          :class="
            isCollapse ? '__aside-collapse-left' : '__aside-collapse-right'
          "
          :width="asideWidth"
        >
          <slot name="menu"></slot>
        </el-aside>
        <el-main>
          <slot name="content"></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

defineProps({
  asideWidth: {
    type: String,
    default: () => '240px'
  },
  isCollapse: {
    type: Boolean,
    default: false
  }
});
</script>

<script lang="ts">
export default {
  name: 'CommonContainer'
};
</script>

<style scoped lang="scss">
.common-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-header {
    padding: 0;
  }
  .el-aside {
    height: 100%;
  }
  .__aside-collapse-left {
    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
  }
  .__aside-collapse-right {
    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
  }
  .el-container {
    height: 100%;
  }
}
</style>