<template lang="html">
  <div id="menus">
    <el-row :style="`background:${backColor}`">
      <div class="w_1200">
        <el-col :span="24" class="menu">
          <el-menu :default-active="activeIndex" mode="horizontal" background-color="#850000" text-color="#fff" active-text-color="#fff" :router="true">
            <template v-for="(item, index) in menu">
              <el-submenu v-if="item.children.length > 0" :index="`${index}`" :key="index">
                <template slot="title">
                  {{ item.name }}
                </template>
                <el-menu-item v-for="(sub, subIndex) in item.children" :key="subIndex" :index="sub.path">{{ sub.name }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="item.path" :key="index">{{ item.name }}</el-menu-item>
            </template>
          </el-menu>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
export default {
  name: 'menus',
  components: {},
  data: () => ({
    activeIndex: '1',
    menu: [],
    backColor: '#850000',
  }),
  created() {
    this.loadMenu();
  },
  methods: {
    ...mapActions(['menuOperation']),
    async loadMenu() {
      let menu = sessionStorage.getItem('menu');
      if (menu) {
        this.$set(this, `menu`, JSON.parse(menu));
        return;
      } else this.getMenu();
    },
    async getMenu() {
      let result = await this.menuOperation({ type: 'list', data: { site: this.$site } });
      if (`${result.errcode}` === '0') {
        let allMenu = result.data;
        let fMenu = [];
        let otherMenu = [];
        allMenu.map(item => {
          if (item.parent_id) {
            otherMenu.push(item);
          } else {
            item.children = [];
            fMenu.push(item);
          }
        });
        //先整合非一级菜单的数据
        let newArr = otherMenu.map(item => {
          let index = _.findIndex(otherMenu, menuItem => menuItem.id === item.parent_id);
          if (index > -1) {
            //若此数据为otherMenu中某项的子项,则将此项推进该项的children中,且不需要返回
            if (!otherMenu[index].children) otherMenu[index].children = [];
            otherMenu[index].children.push(item);
          } else {
            //若不是otherMenu中某项的子项,则返回
            return item;
          }
        });
        newArr = newArr.filter(fil => fil !== undefined);
        newArr.map(item => {
          let index = _.findIndex(fMenu, menuItem => menuItem.id === item.parent_id);
          if (index > -1) fMenu[index].children.push(item);
        });
        this.$set(this, `menu`, fMenu);
        sessionStorage.setItem('menu', JSON.stringify(fMenu));
      }
      this.$set(this, 'site', result.data);
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.menu {
  position: relative;
  height: 40px;
}
/deep/.el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
  width: 110px;
  text-align: center;
}
.el-submenu {
  width: 110px;
  text-align: center;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: none;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 40px;
  line-height: 40px;
}
/deep/.el-menu--popup {
  min-width: 110px !important;
}
/deep/.el-menu--popup-bottom-start {
  margin-top: 0px;
}
/deep/.menu .el-menu.el-menu--horizontal {
  border-bottom: none;
}
/deep/.el-menu--horizontal > .el-menu-item.is-active {
  color: #fff;
  border-bottom: none;
}
</style>
