<template>
  <div class="menu-tree">
    <ul class="first-menu">
      <li class="no-data" v-if="menuList.length == 0">暂无数据</li>
      <li :class="['first-menu-item', { active: el.menuId == activeMenuId }]" v-for="el in menuList" :key="el.menuId" @click="onMenuChange(el)">
        <el-checkbox
          v-if="isApp"
          :value="appIds.some(item => item.appId == el.project && item.openFlag == 1)"
          @change="val => onAppOpenChange(el.project, val)"></el-checkbox>
          {{ el.menuName }}
      </li>
    </ul>
    <div class="all-menu">
        <!-- check-strictly -->
      <el-tree
        :data="treeData"
        show-checkbox
        default-expand-all
        node-key="menuId"
        ref="menuList"
        :expand-on-click-node="false"
        :check-on-click-node="true"
        :props="{ label: 'menuName' }"
        :default-checked-keys="checkedId[activeMenuId]"
        @node-click="onNodeClick"
        @check="onNodeClick">
      </el-tree>
    </div>
  </div>
</template>

<script>
// 菜单添加开启关闭配置与回显
export default {
  name: 'MenuTree',
  props: {
    menuList: Array,
    checkedId: Object,
    appIds: Array,
    isApp: Boolean
  },
  data() {
    return {
      activeMenuId: '',
      treeData: []
    };
  },
  methods: {
    /**
     * @description: 左侧一级节点改变时，切换右侧的树数据
     * @param {Object} menuData
     * @author: 无尘
     */
    onMenuChange(menuData) {
      this.activeMenuId = menuData ? menuData.menuId : '';
      this.treeData = menuData ? [ menuData ] : [];
    },
    /**
     * @description: 点击树节点
     * @author: 无尘
     */
    onNodeClick() {
      this.onChange(this.$refs.menuList.getCheckedKeys());
    },
    /**
     * @description: 获取指定菜单及其所有子菜单的id
     * @param {Array} menuList
     * @returns {Array}
     * @author: 无尘
     */
    getAllMenuId(menuList) {
      let result = [];
      menuList.forEach(el => {
        result.push(el.menuId);
        if (Array.isArray(el.children)) {
          result = result.concat(this.getAllMenuId(el.children));
        }
      });
      return result;
    },
    /**
     * @description: emit更新后的菜单id
     * @param {Array} menuIds
     * @author: 无尘
     */
    onChange(menuIds) {
      const activeChecked = {};
      activeChecked[this.activeMenuId] = menuIds;
      this.$emit('change', Object.assign({}, this.checkedId, activeChecked));
    },
    onAppOpenChange(appId, openFlag) {
      const appIds = this.appIds.map(el => {
        const item = Object.assign({}, el);
        if (item.appId == appId) {
          item.openFlag = Number(openFlag);
        }
        return item;
      });
      this.$emit('app-open-change', appIds);
    }
  },
  watch: {
    checkedId: {
      deep: true,
      handler(checked) {
        this.$refs.menuList.setCheckedKeys(checked[this.activeMenuId] || []);
      },
    },
    menuList: {
      immediate: true,
      handler(menuList) {
        this.onMenuChange(menuList[0]);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.menu-tree {
  width: 510px;
  min-height: 460px;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  border: 1px solid #E4E7ED;
  .first-menu {
    flex-shrink: 0;
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #F5F7FA;
    .first-menu-item {
      padding: 0 10px 0 20px;
      width: 100%;
      height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: @gray02;
      line-height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      &:hover, &.active {
        background-color: #fff;
      }
    }
    .no-data {
      padding-top: 20px;
      text-align: center;
      font-size: 14px;
      color: @gray03;
      line-height: 60px;
    }
  }
  .all-menu {
    padding: 20px 0 0 20px;
    width: calc(100% - 140px);
    /deep/.el-checkbox.is-disabled + .el-tree-node__label {
      color: @gray03;
    }
  }
}
</style>
