<template>
  <div class="aside-menu">
    <ul class="aside-menu__wrapper">
      <template v-for="item in tabData">
        <li
          v-if="item.isShow == 1"
          :class="['tab-left-list-cell p-l-14', {'active-tab': item.uri === activeTab}]"
          :key="item.id"
          @click="selectTab(item)"
        >
          <!-- <i class="my-icon" :class="['iconfont', item.icon, !!item.onlyIconActive ? 'iconActive' : '']"></i> -->
          {{ item.menuName }}
          <i v-if="item.nodeChildren && item.nodeChildren.length" :class="[item.collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
        </li>
        <ul class="child-tab-left-list" :key="`${item.id}-sub`" v-show="item.collapsFlag">
          <template v-for="childitem in item.nodeChildren">
            <li
              v-if="childitem.isShow == 1"
              :class="['tab-left-list-cell p-l-40', {'active-tab': childitem.uri == activeTab}]"
              :key="childitem.id"
              @click="selectTab(childitem)"
            >
              {{ childitem.menuName }}
              <i v-if="childitem.nodeChildren && childitem.nodeChildren.length" :class="[childitem.collapsFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
            </li>
            <ul class="third-tab-left-list" :key="`${childitem.id}-sub`" v-show="childitem.collapsFlag">
              <template v-for="thirditem in childitem.nodeChildren">
                <li
                  v-if="thirditem.isShow == 1"
                  :class="['tab-left-list-cell p-l-60', {'active-tab': thirditem.uri === activeTab }]"
                  :key="thirditem.id"
                  @click="selectTab(thirditem)"
                >
                  {{ thirditem.menuName }}
                </li>
              </template>
            </ul>
          </template>
        </ul>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'aside-menu',
  props: {
    menu: Array
  },
  data() {
    return {
      activeTab: '',
      tabData: []
    };
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler(path) {
        this.activeTab = path;
      }
    },
    menu: {
      immediate: true,
      handler(menu) {
        let that = this;
        let menuTree = menu.filter(item => item.code === 'haoban_operation')[0] || {};
        this.tabData = setCollapsFlag(menuTree.nodeChildren || []);
        function setCollapsFlag(arr) {
          arr = arr.slice();
          return arr.map(item => {
            that.$set(item, 'collapsFlag', true)
            if (item.nodeChildren && item.nodeChildren.length > 0) {
              item.nodeChildren = setCollapsFlag(item.nodeChildren);
            }
            return item;
          })
        }
      }
    }
  },

  methods: {
    selectTab(item) {
      if (Array.isArray(item.nodeChildren) && item.nodeChildren.length > 0)  {
        item.collapsFlag = !item.collapsFlag;
      } else {
        this.$router.push({path: item.uri});
      }
    },
  }
};
</script>
<style lang="less" scoped>
.aside-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 20px;
  z-index: 1;
  padding-top: 84px;
  width: 200px;
  height: 100%;
  .aside-menu__wrapper {
    padding: 20px 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    box-shadow: 3px 0 4px 0 rgba(214, 224, 240, 0.3);
  }
  .tab-left-list-cell {
    position: relative;
    margin-top: 15px;
    height: 30px;
    font-size: 14px;
    color: #303133;
    text-align: left;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    .iconActive {
      color: @blue;
    }
    &:hover {
      color: #606266;
      background: rgba(24, 144, 255, 0.06);
      i {
        color: @blue;
      }
    }
    &.active-tab {
      color: @gray02;
      background: rgba(24, 144, 255, 0.06);
      &::before {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: @blue;
        z-index: 1;
      }
      i {
        color: @blue;
      }
    }
    .my-icon {
      font-size: 17px;
      color: #000;
      padding-right: 8px;
      width: 25px;
      display: inline-block;
      box-sizing: border-box;
    }
  }
  .child-tab-left-list {
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    li {
      position: relative;
      text-align: left;
      height: 30px;
      line-height: 30px;
      white-space: nowrap;
      overflow: hidden;
      cursor: pointer;

      &:hover {
        background: rgba(24, 144, 255, 0.06);
        i {
          color: @blue;
        }
      }
      &.active-tab {
        background: rgba(24, 144, 255, 0.06);
        &::before {
          content: ' ';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background: @blue;
          z-index: 1;
        }
        i {
          color: @blue;
        }
      }
    }
  }
}
.p-l-14 {
  padding-left: 14px;
}
.p-l-40 {
  padding-left: 40px;
}
.p-l-60 {
  padding-left: 60px;
}
</style>
