<template>
  <div class="hb-layout">
    <main-menu :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''"></main-menu>
    <aside-menu :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>
    <div class="hb-layout-content">
      <bread-menu v-if="activedMenu.length > 3" :menu-list="activedMenu.slice(2)"></bread-menu>
      <div class="hb-layout-pager" :style="{ height: activedMenu.length > 3 ? `calc(100% - 30px)` : '100%' }">
        <slot>
          <!-- <div style="width: 1300px;height: 1000px;border:1px solid red"></div>
          页面内容 -->
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import { getRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
import MainMenu from './main-menu.vue';
import AsideMenu from './aside-menu.vue';
import BreadMenu from './bread-menu.vue';
export default {
  name: 'DmHbLayout',
  components: { MainMenu, AsideMenu, BreadMenu },
  data() {
    return {
      breadShow: true,
      // 菜单树数据
      menuList: [],
      // 菜单平铺数据
      flatMenuList: [],
      // 侧边栏菜单数据
      asideMenu: [],
      // 激活的菜单
      activedMenu: []
    };
  },
  created() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      getRequest('/haoban-manage3-web/get-haoban-menu', { requestProject: 'haoban-manage-web' }).then(res => {
        const { errorCode, result } = res.data || [];
        if (errorCode != 1) {
          errorMsg.errorMsg(res.data);
          return;
        }
        if (!Array.isArray(result)) return;
        this.menuList = result;
        this.flatMenuList = this.getFlatMenuList(result);
        this.activedMenu = this.getActivedMenu(this.getMenuByPath(this.$route.path.slice(1)));
      });
    },
    getFlatMenuList(menuList) {
      return menuList.reduce((list, el) => {
        if (Array.isArray(el.childList)) {
          list = list.concat(this.getFlatMenuList(el.childList));
        }
        list.push(el);
        return list;
      }, []);
    },
    getActivedMenu(menu) {
      if (!menu.menuCode) return [];
      let result = [menu];
      const parentMenu = this.flatMenuList.find(el => el.menuCode == menu.parentCode) || {};
      if (parentMenu.menuCode) {
        result = [...this.getActivedMenu(parentMenu), ...result];
      }
      return result;
    },
    getMenuByPath(path) {
      return this.flatMenuList.find(el => el.menuUrl == path) || {};
    }
  }
};
</script>

<style lang="scss" scoped>
.hb-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-width: 1440px;
  height: 100vh;
  background: #f2f3f5;
  box-sizing: border-box;
  overflow: hidden;
  overflow-x: auto;
  .hb-layout-content {
    padding: 20px 0 0 16px;
    width: calc(100% - 190px);
    height: calc(100vh - 60px);
    box-sizing: border-box;
    .hb-layout-pager {
      height: 100%;
      background: #fff;
      overflow: auto;
      box-sizing: border-box;
    }
  }
}
</style>
