<template>
  <div class="Navs">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      :collapse="true"
      router
    >
      <el-menu-item index="/homePage">
        <i class="el-icon-menu"></i>
        <span>首页</span>
        <!-- <span slot="title">首页</span> -->
      </el-menu-item>
      <div v-for="v in navList" :key="v.id">
        <template v-if="v.children && v.children.length">
          <el-submenu :index="v.path">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">{{ v.fullName }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                :index="item.path"
                v-for="item in v.children"
                :key="item.id"
                >{{ item.fullName }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="v.path">
            <i class="el-icon-menu"></i>
            <span>{{ v.fullName }}</span>
          </el-menu-item>
        </template>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Navs",

  data() {
    return {
      navList: "",
    };
  },
  mounted() {
    // 显示"内部系统PC权限"下的页面
    let meun = this.$store.state.user.menuList.find(v => v.id == '582459649622541573').children;
    this.navList = meun;
  },
  computed: {
    // 默认激活的菜单
    activeMenu() {
      return this.$route.path;
    },
  },
};
</script>
<style scoped lang="scss">
.Navs {
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  :deep(.el-menu--collapse) {
    width: 100%;
  }
  .el-menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 30px;
    color: #fff;
    padding: 40px 0px !important;
    &.is-active {
      color: #02efff;
      background-color: #dfdada34;
    }
    span {
      height: 30px;
      width: 100%;
      overflow: unset;
      visibility: unset;
    }
    &:hover {
      background-color: #dfdada56;
    }
  }
  :deep(.el-menu) {
    background-color: transparent;
    border-right: unset;
    .el-submenu__title {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 30px;
      justify-content: center;
      color: #fff;
      padding: 40px 0px !important;
      &:hover {
        background-color: #dfdada56;
      }
    }
    i {
      color: #fff;
      font-size: 30px;
      width: 30px;
      margin: 0;
    }
    .el-submenu__icon-arrow.el-icon-arrow-right {
      display: none;
    }
  }
}
.el-menu-item-group {
  :deep(.el-menu-item-group__title) {
    display: none;
  }
}
</style>
