<template>
  <div class="menu">
    <div class="menu-content">
      <el-menu
        :default-active="$route.path"
        router
        @open="handleOpen"
        :unique-opened="true"
        @close="handleClose"
        background-color="#000"
        text-color="#fff"
      >
        <div v-for="(main, index) in menuInfo" :key="main.path">
          <template v-if="formatPermission(main)">
            <el-submenu
              :index="main.name"
              v-if="main.children && main.children.length"
            >
              <template slot="title">
                <div class="menu-content-item">
                  <i :class="['iconfont', 'menu-icon', main.icon]"></i>
                  <span>{{ main.title || main.meta.name }}</span>
                </div>
              </template>
              <el-menu-item-group>
                <div v-for="(item, id) in main.children" :key="item.path">
                  <template v-if="formatPermission(item)">
                    <el-menu-item
                      :index="`${firstPath}/${item.path}`"
                      :route="`${firstPath}/${item.path}`"
                      v-if="!(item.children && item.children.length)"
                    >
                      <div class="menu-content-item">
                        <i :class="['iconfont', 'menu-icon', item.icon]"></i>
                        <span>{{ item.meta.name }}</span>
                      </div>
                    </el-menu-item>
                    <el-submenu v-else :index="item.name">
                      <template slot="title">
                        <div class="menu-content-item">
                          <i :class="['iconfont', 'menu-icon', item.icon]"></i>
                          <span>{{ item.title || item.meta.name }}</span>
                        </div>
                      </template>
                      <el-menu-item-group>
                        <div v-for="(it, idx) in item.children" :key="it.path">
                          <el-menu-item
                            :index="`${firstPath}/${it.path}`"
                            :route="`${firstPath}/${it.path}`"
                          >
                            <div class="menu-content-item">
                              <i :class="['iconfont', 'menu-icon', it.icon]"></i>
                              <span>{{ it.meta.name }}</span>
                            </div>
                          </el-menu-item>
                        </div>
                      </el-menu-item-group>
                    </el-submenu>
                  </template>
                </div>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item
              :index="`${firstPath}/${main.path}`"
              v-else
              :route="`${firstPath}/${main.path}`"
            >
              <div class="menu-content-item menu-content-item-change">
                <i :class="['iconfont', 'menu-icon', main.icon]"></i>
                <span slot="title">{{ main.meta.name }}</span>
              </div>
            </el-menu-item>
          </template>
        </div>
        <!-- <div class="loginOut" @click="loginOut"><span>退出登录</span></div> -->
      </el-menu>
    </div>
  </div>
</template>

<script>
import { frameIn } from "@/router/routes";
import { getStorage } from "@/utils/storageUtil";
import _ from "lodash";
export default {
  name: "sgMenu",
  data() {
    return {
      menuInfo: [],
      firstPath: "/admin",
    };
  },
  mounted() {
    /*let userInfo = localStorage.getItem("userInfo");
        let roles = JSON.parse(userInfo).jurisdiction;*/
    let routers = _.cloneDeep(frameIn);
    /*this.filterAsyncRouter(routers,roles);
        let filterRouters = this.filterAsyncModuleRouter(routers);*/

    let temp = _.cloneDeep(routers)[1].children;
    /*temp.map((c) => {
            let tem = c.children;
            c.children = tem ? tem.filter((item) => !item.hidden) : [];
        });*/

    let tem = temp;
    temp = tem ? tem.filter((item) => !item.hidden) : [];

    // this.menuInfo = temp;
    this.menuInfo = this.formatMenuInfo(temp);
  },
  computed: {},
  methods: {
    formatMenuInfo(menus) {
      let newMenus = [];
      menus.forEach((m) => {
        if (m.meta.parent && m.meta.parent.name) {
          if (!this.isMenuGroup(newMenus, m.meta.parent.name)) {
            newMenus.push(
              Object.assign({}, m.meta.parent, {
                children: [],
              })
            );
          }
          for (let i = 0; i < newMenus.length; i++) {
            if (newMenus[i].name === m.meta.parent.name) {
              newMenus[i].children.push(Object.assign({}, m));
              break;
            }
          }
        } else {
          newMenus.push(Object.assign({}, m));
        }
      });

      return newMenus;
    },
    isMenuGroup(menus, name) {
      let is = false;
      menus.forEach((m) => {
        if (name === m.name) {
          is = true;
        }
      });
      return is;
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    hasPermission(roles, route) {
      if (route.meta && typeof route.meta.jurisdiction !== "undefined" && roles) {
        return roles.split(",").indexOf(route.meta.jurisdiction) !== -1;
      } else if(!roles || roles == '') {
          return false;
      }
      return true;
    },

    /**
     * 递归过滤异步路由表，返回符合用户角色权限的路由表
     *
     */
    filterAsyncRouter(frameIn, roles) {
      const accessedRouters = frameIn.filter((route) => {
        if (this.hasPermission(roles, route)) {
          if (route.children && route.children.length) {
            route.children = this.filterAsyncRouter(route.children, roles);
            // //子路由存在则本路由存在
            // return route.children && route.children.length > 0
          }
          return true;
        }
        return false;
      });
      return accessedRouters;
    },
    filterAsyncModuleRouter(frameIn) {
      return frameIn.filter((route) => {
        //存在子路由时判断子路由个数
        if (route.children && route.children.length) {
          route.children = this.filterAsyncModuleRouter(route.children);
          return true;
          // //子路由存在则本路由存在
          // return route.children && route.children.length > 0
        } else if (!route.hasOwnProperty("children")) {
          //最底层路由时直接通过
          return true;
        } else {
          return false;
        }
      });
    },
    formatPermission(route) {
      // return true;
      let userInfo = getStorage("mh_userInfo");
      let roles = JSON.parse(userInfo) ? JSON.parse(userInfo).jurisdiction : '';
      let isHasPermission = false;
      if (route.children && route.children.length > 0) {
        let hasChildrenPermission = false;
        route.children.forEach((r) => {
          if (this.hasPermission(roles, r)) {
            hasChildrenPermission = true;
          }
        });
        if (hasChildrenPermission) {
          isHasPermission = true;
        }
      } else {
        isHasPermission = this.hasPermission(roles, route);
      }

      return isHasPermission;
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.menu {
  height: 100%;
  width: 195px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #000;
  .menu-content {
    display: flex;
    height: 100%;
    background-color: #000;
    ::v-deep .el-submenu__title {
      width: 195px;
    }
    .menu-content-item {
      .iconfont {
        margin-right: 10px;
      }
    }
    .menu-content-item-change {
      width: 195px;
      display: flex;
    }
    .loginOut {
      position: fixed;
      left: 68px;
      bottom: 30px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      &:hover {
        color: #ccc;
      }
    }
  }

  .menu-icon {
    color: #F5F5F5;
  }
}
</style>
