<!--
  <open-doc-left :currentTab="currentTab" @changeDoc="changeDoc"></open-doc-left>
  import openDocLeft from '@/components/open-doc-left.vue';
-->
<template>
  <div class="document-left-body border-box">
    <ul class="document-ul">
      <template v-for="(item, index) in menuData">
        <li :key="index + 'level1'">
          <div :class="['li-cell flex flex-space-between', activeId == item.menuId ? 'active-menu' : '']" @click="changeMenu(item)">
            <span class="li-cell-name">{{ item.menuName }}</span>
            <span v-if="item.children && item.children.length" :class="['li-cell-icon font_family icon-arrow_right', item.expanded ? 'rotate-icon' : '']"></span>
            <span v-if="!item.children || !item.children.length" class="li-cell-icon icon-round"></span>
          </div>
          <ul v-if="item.children && item.children.length && item.expanded">
            <template v-for="(levelTwo, two) in item.children">
              <li :key="two + 'level1'">
                <div :class="['li-cell flex flex-space-between', activeId == levelTwo.menuId ? 'active-menu' : '']" @click="changeMenu(levelTwo)">
                  <span class="p-l-15 li-cell-name border-box">{{ levelTwo.menuName }}</span>
                  <span v-if="levelTwo.children && levelTwo.children.length" :class="['li-cell-icon font_family icon-arrow_right', levelTwo.expanded ? 'rotate-icon' : '']"></span>
                  <span v-if="!levelTwo.children || !levelTwo.children.length" class="li-cell-icon icon-round"></span>
                </div>
                <ul v-if="levelTwo.children && levelTwo.children.length && levelTwo.expanded">
                  <template v-for="(levelThree, three) in levelTwo.children">
                    <li :key="three + 'level1'">
                      <div :class="['li-cell flex flex-space-between', activeId == levelThree.menuId ? 'active-menu' : '']" @click="changeMenu(levelThree)">
                        <span class="li-cell-name border-box p-l-30">{{ levelThree.menuName }}</span>
                        <span v-if="levelThree.children && levelThree.children.length" :class="['li-cell-icon font_family icon-arrow_right', levelThree.expanded ? 'rotate-icon' : '']"></span>
                        <span v-if="!levelThree.children || !levelThree.children.length" class="li-cell-icon icon-round"></span>
                      </div>
                      <ul v-if="levelThree.children && levelThree.children.length && levelThree.expanded">
                        <template v-for="(levelFour, four) in levelThree.children">
                          <li :key="four + 'level1'">
                            <div :class="['li-cell flex flex-space-between', activeId == levelFour.menuId ? 'active-menu' : '']" @click="changeMenu(levelFour)">
                              <span class="li-cell-name border-box p-l-45">{{ levelFour.menuName }}</span>
                              <span class="li-cell-icon icon-round"></span>
                            </div>
                          </li>
                        </template>
                      </ul>
                    </li>
                  </template>
                </ul>
              </li>
            </template>
          </ul>
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
import { getMenu } from '@/api/document';
import errMsg from '@/assets/js/error';
export default {
  props: {
    currentTab: {
      type: [String, Number],
      default() {
        return '2';
      }
    }
  },
  data() {
    return {
      parentId: this.currentTab, // 1：解决方案，2：开发者接入
      activeId: '',
      menuData: [
        /* {
          level: 1,
          memo: '嗷呜',
          menuId: '44498258223366144',
          menuName: '第四个关联了api128',
          operator: '10',
          operatorName: '蘑菇',
          parentId: '1',
          relationData: '',
          seq: 0,
          subType: 1,
          updateFlag: 1,
          expanded: false, // 新增展开
          children: []
        } */
      ]
    };
  },
  methods: {
    /**
     * 菜单切换
     */
    changeMenu(item) {
      const that = this;
      // 注意：这里要判断是否有子级，是否展开，是否关联
      that.activeId = item.menuId;
      // 如果有子级,展开或者折叠显示
      if (item.children && item.children.length) {
        item.expanded = !item.expanded;
        that.$emit('changeDoc', {});
      } else {
        // 没有子级先加载看看是否有子级
        that.$emit('changeDoc', item);
      }
    },
    getMenuData(parentId, node) {
      const that = this;
      let para = {
        parentId: parentId
      };
      getMenu(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            if (!!resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.expanded = false;
                if (ele.children && ele.children.length) {
                  ele.children.forEach(child => {
                    child.expanded = false;
                    if (child.children && child.children.length) {
                      child.children.forEach(key => {
                        key.expanded = false;
                      });
                    }
                  });
                }
              });
            }
            /* if (node) {
              node.children = resData.result || [];
              that.$forceUpdate();
              return false;
            }
            // 没有子级，返回当前菜单数据
            if (node && !resData.result.length) {
              that.$emit('changeDoc', node);
              return false;
            } */
            that.menuData = resData.result || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    currentTab(newData, oldData) {
      this.parentId = newData;
      this.getMenuData(newData);
    }
  },
  mounted() {
    const that = this;
    that.parentId = that.$route.query.currentTab || '2';
    that.activeId = that.$route.query.menuId || '';
    that.getMenuData(that.parentId);
  }
};
</script>
<style lang="less" scoped>
.p-l-30 {
  padding-left: 30px;
}
.p-l-45 {
  padding-left: 45px;
}
.document-left-body {
  position: relative;
  padding: 10px 40px 0 40px;
  height: 100%;
  overflow: hidden;
  .document-ul {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .li-cell {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #142655;
      cursor: pointer;
      .icon-round {
        display: inline-block;
        width: 3px;
        height: 3px;
        border: 1px solid #cacfd6;
        align-self: center;
        border-radius: 50%;
      }
      .li-cell-name {
        width: 206px;
        min-width: 206px;
        max-width: 206px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .li-cell-icon {
        font-size: 12px;
      }
      &:hover {
        .li-cell-name {
          color: #4c70e8;
        }
        .li-cell-icon {
          color: #4c70e8;
          &.icon-round {
            border-color: #4c70e8;
          }
        }
      }
      &.active-menu {
        .li-cell-name {
          color: #4c70e8;
        }
        .li-cell-icon {
          color: #4c70e8;
          &.icon-round {
            border-color: #4c70e8;
          }
        }
      }
      .icon-arrow_right {
        display: inline-block;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s;
        &.rotate-icon {
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>
