<template>
  <div class="aside-menu">
    <el-aside :width="menuShow ? '100%' : '0px'" class="aside-container">
      <el-scrollbar class="editScroll">
        <el-menu ref="sidemenu" :default-active="activeIndex" class="el-menu-vertical" unique-opened @select="handleSelect">
          <!-- @select="handleSelect" -->
          <div v-for="menu in menuConfig.children" :key="menu.alias || menu.href" active-text-color="#000" class="menu-item-side">
            <el-submenu v-if="menu.children && menu.children.length > 0" :index="menu.alias" :title="$router.currentRoute.name" class="firstLevel">
              <template slot="title">
                <svg-icon :icon-class="menu.menuIcon ? menu.menuIcon : ''" icon-style="icon header-icon" />
                <span class="firstLevelTitle">{{ menu.name }}</span>
              </template>
              <el-menu-item v-for="submMenu in menu.children" :key="submMenu.alias" :index="submMenu.alias" :title="submMenu.alias" class="subLevel">
                <template slot="title">
                  <svg-icon :icon-class="submMenu.menuIcon ? submMenu.menuIcon : ''" icon-style="icon header-icon" />
                  <span class="subLevelTitle">{{ submMenu.name }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="menu.alias">
              <svg-icon :icon-class="menu.menuIcon ? menu.menuIcon : ''" icon-style="icon header-icon" />
              <span slot="title" class="firstLevelTitle">{{ menu.name }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  props: {
    menuShow: {
      type: Boolean,
      default: true,
    },
    menuConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentSubMenu: [],
      linkMenus: [],
      activeIndex: this.$router.currentRoute.meta?.activeMenu || this.$router.currentRoute.name,
    };
  },
  watch: {
    // 监听路由，如果为首页等非菜单页面，取消菜单选中项
    $route(to, from) {
      const { name, meta } = to;
      const active = meta?.activeMenu || name;
      this.activeIndex = active;
    },
    menuConfig: {
      immediate: true,
      handler(data) {
        if (data?.id) {
          this.linkMenus = this.getChild(this.menuConfig);
          // this.activeIndex = this.linkMenus[0].alias
        }
      },
    },
  },
  computed: {
    ...mapState({
      frontMenus: (state) => {
        return state.menu.frontMenus;
      },
    }),
  },
  created() {
    // console.log(123123, this.$router.currentRoute)
  },
  methods: {
    getChild(item, res = []) {
      const arr = item.children;
      for (let i = 0; i < arr.length; i++) {
        const item_ = arr[i];
        if (item_.children?.length) {
          this.getChild(item_, res);
        } else {
          res.push(item_);
        }
      }
      return res;
    },
    // 菜单的收折
    handleMenuCollapse() {
      this.$emit('update:menuShow', !this.menuShow);
    },
    handleSelect(index, indexPath) {
      const cur_route = this.linkMenus.find((o) => {
        return o.alias === index;
      });

      if (cur_route && !!cur_route.href) {
        window.open(cur_route.href, '_blank');
        return;
      }

      this.$router.push(`/bizPlat/${this.menuConfig.alias}/${indexPath.join('/')}`);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.aside-container {
  height: 100%;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.aside-menu {
  height: 100% !important;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 12px 0 rgba($color: #000000, $alpha: 0.1);
}

.el-menu-vertical {
  height: 100% !important;

  .header-icon {
    margin-right: 10px;
    font-size: 16px;
    vertical-align: middle;
    margin-top: -1px;
  }
}

::v-deep .el-submenu__title {
  padding: 0 20px !important;
  height: 50px;
  line-height: 50px;
}

::v-deep .el-menu-item {
  padding: 0 20px !important;
  height: 50px;
  line-height: 50px;
  font-size: $--menu-text-size !important;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: $--biz-main-color;
    transform: scaleY(0.0001);
    opacity: 0;
    transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  &.is-active::after {
    transform: scaleY(1);
    opacity: 1;
    transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  svg {
    font-size: 15px !important;
    color: $--biz-text-color;
  }
  span {
    font-size: $--menu-text-size !important;
    color: $--biz-text-color;
  }
}

::v-deep .el-submenu .el-menu-item {
  padding: 0 40px !important;
  height: 55px;
  line-height: 55px;
}

::v-deep .el-menu {
  border-right: none;
  background-color: #fff;
}

::v-deep .firstLevelTitle {
  font-size: $--menu-text-size !important;
  color: $--biz-text-color !important;
}

.firstLevel .header-icon {
  font-size: 18px;
  margin-top: -4px;
}

.subLevel .header-icon {
  font-size: 16px;
  margin-top: -4px;
}

.el-submenu__title *,
.el-menu-item * {
  vertical-align: baseline;
}

.aside-container ::v-deep .el-submenu__title:hover {
  background: transparent;

  svg,
  .firstLevelTitle {
    color: $--biz-main-color !important;
  }
}

.aside-container ::v-deep .el-menu-item.is-active {
  background-color: #e6f7ff !important;
  // background-color: transparent;
  svg,
  span,
  .el-submenu__title {
    color: $--biz-main-color !important;
  }
}

.aside-container ::v-deep .el-menu-item:hover {
  background: transparent;

  svg,
  .subLevelTitle {
    color: $--biz-main-color !important;
  }
}

.editScroll {
  height: 100% !important;
  overflow-x: hidden;
}

::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.menu-item-side{
    min-width: 210px; 
    max-width: 210px;
}
</style>
