<!--
 * @Author: Billy
 * @Date: 2020-09-10 09:12:00
 * @LastEditors: Billy
 * @LastEditTime: 2022-03-07 14:32:23
 * @Description: 首页框架
-->
<template>
  <div class="home">
    <el-container>
      <el-header
        v-if="DEFAULT_HOME_LAYOUT === 'top-bottom'"
        :height="HEADER_THICKNESS + 'px'"
      >
        <Header
          :arrangeMode="'horizontal'"
          :menuDefaultActive="activeHeaderMenuItemId"
        />
      </el-header>
      <el-aside
        v-else-if="DEFAULT_HOME_LAYOUT === 'left-right'"
        :width="HEADER_THICKNESS + 'px'"
      >
        <Header
          :arrangeMode="'vertical'"
          :menuDefaultActive="activeHeaderMenuItemId"
        />
      </el-aside>

      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
    </el-container>
  </div>
</template>

<script>
import Header from "../components/Home/Header.vue";
import { DEFAULT_HOME_LAYOUT, HEADER_THICKNESS } from "../const.js";

export default {
  name: "Home",
  components: {
    Header,
  },
  data() {
    return {
      DEFAULT_HOME_LAYOUT,
      HEADER_THICKNESS,
      activeTab: "0",
    };
  },
  computed: {
    // 当前应该被选中(高亮)的菜单栏的按钮的id
    activeHeaderMenuItemId: function () {
      const routerName = this.$route.name;
      return routerName;
    },
  },
  updated() {},
  mounted() {},
};
</script>

<style lang="scss">
.home {
  height: 100%;
}
</style>

<style lang="scss" scoped>
@import "../scss/_variables";
.el-container {
  height: 100%;
  // 上下布局时
  .el-header {
    padding: 0;
    box-sizing: content-box;
    border-bottom: solid 1px #e6e6e6;
  }
  // 左右布局时
  .el-aside {
    border-right: solid 1px #e6e6e6;
    // &.right {
    //   border-right: none;
    //   border-left: solid 1px #e6e6e6;
    // }
  }
}
</style>