<!--
 * @Author: Billy
 * @Date: 2021-12-29 17:24:10
 * @LastEditors: Billy
 * @LastEditTime: 2022-01-07 17:16:12
 * @Description: 请输入
-->
<template>
  <div class="back">
    <el-container>
      <el-header
        v-if="DEFAULT_BACK_LAYOUT === 'top-bottom'"
        :height="HEADER_THICKNESS + 'px'"
      >
        <Header :arrangeMode="'horizontal'" />
      </el-header>
      <el-aside
        v-else-if="DEFAULT_BACK_LAYOUT === 'left-right'"
        :width="HEADER_THICKNESS + 'px'"
      >
        <Header :arrangeMode="'vertical'" />
      </el-aside>
      <el-container>
        <el-aside width="200px">
          <!-- <Menu
            :menuItems="backMenuItems"
            :arrangeMode="'vertical'"
            :displayMode="'both'"
            :defaultActive="menuDefaultActive"
            @select="handleMenuSelect"
          /> -->
          <Menu2
            :menuItems="backMenuItems"
            :defaultActive="menuDefaultActive"
          />
        </el-aside>
        <el-main>
          <div class="main">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import MenuBiz from "../biz/Back/_Menu.js";
import Header from "../components/Back/Header.vue";
// import Menu from "../components/Back/Menu(backup).vue";
import Menu2 from "../components/Back/Menu.vue";
// import TreeHelper from "../util/TreeHelper.js";
import { DEFAULT_BACK_LAYOUT, HEADER_THICKNESS } from "../const.js";

export default {
  name: "Back",
  components: {
    Header,
    // Menu,
    Menu2,
  },
  data() {
    return {
      DEFAULT_BACK_LAYOUT,
      HEADER_THICKNESS,
      backMenuItems: [], // 后台菜单栏的信息数组
    };
  },
  computed: {
    menuDefaultActive: function () {
      const _routerName = this.$route.name;
      // let index = this.backMenuItems.findIndex(
      //   (item) => item.routerName && item.routerName === _routerName
      // );
      return _routerName;
    },
  },
  async beforeMount() {
    this.backMenuItems = await MenuBiz.getBackMenuItems();
  },
  methods: {
    // 处理导航菜单选择事件
    handleMenuSelect(item, index) {
      let routerName;
      // switch (index) {
      //   case 1:
      //     routerName = "Test";
      //     break;
      //   case 2:
      //     routerName = "Test2";
      //     break;
      // }
      routerName = item.routerName;
      if (routerName) this.$safePush({ name: routerName });
    },
  },
};
</script>

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

<style lang="scss" scoped>
@import "~@/scss/_variables.scss";
.el-container {
  height: 100%;
  // 上下布局时
  .el-header {
    // height: $header-thin + px !important;
    padding: 0;
    box-sizing: content-box;
    border-bottom: solid 1px #e6e6e6;
  }
  // 左右布局时
  .el-aside {
    // width: $header-thin + px !important;
    border-right: solid 1px #e6e6e6;
  }
  .el-container {
    .el-main {
      height: 100%;
      padding: 16px;
      background-color: $theme-background-light;
      .main {
        background-color: #fff;
        height: 100%;
        border-radius: 8px;
      }
    }
  }
}
</style>