<template>
  <el-container
    style="background-color: #e8e8e8; margin: 0; padding-bottom: 8px"
  >
    <el-header style="padding: 0">
      <headerCom></headerCom>
    </el-header>
    <!-- <div style="height: 8px"></div> -->
    <el-container>
      <el-aside width="240px" style="background-color: white">
        <sideMenu></sideMenu>
      </el-aside>
      <div style="width: 2px"></div>
      <el-main class="m-app-main">
        <tagViews></tagViews>
        <div style="height: 2px"></div>
        <keep-alive>
          <component v-bind:is="activeComponentName"></component>
        </keep-alive>
        <!-- <business v-if="activeComponentName === 'Business'"></business>
        <review v-if="activeComponentName === 'Review'"></review> -->
        <toolbars></toolbars>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import headerCom from "./Header";
import sideMenu from "./SideMenu";
import tagViews from "./components/TagsView";
import business from "../Business";
import review from "../Review";
import toolbars from "~/components/Toolbars";

export default {
  name: "Layout",
  components: { headerCom, sideMenu, tagViews, business, review, toolbars },
  computed: {
    activeComponentName() {
      return this.$route.path.startsWith("/review") ? "review" : "business"
    }
  }
};
</script>

<style>
.m-app-main {
  background-color: var(--bgcolor);
  padding: 0;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  margin-right: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.el-aside {
  height: 100%;
  transition: width 300ms;
  /* overflow: hidden; */
  overflow: unset;
  padding-bottom: 68px;
  box-sizing: border-box;
}
</style>