<template>
  <div class="project-side-menu-container">
    <el-menu mode="vertical" class="project-side-menu-instance" :unique-opened="uniqueOpened" :default-active="defaultActive" @select="menuSelect"
      @open="subMenuOpen" @close="subMenuClose">
      <template v-for="(item,index) of tempMenuTree">
        <project-menu-item :menuItem="item" :key="item.nodeValue"></project-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script>
import ProjectMenuItem from "@/views/projectCostLedger/detail/components/ProjectSideMenu/ProjectMenuItem";
import { addTreeLevel, addNodeParent } from "@/utils";
export default {
  name: "projectSideMenu",
  components: {
    ProjectMenuItem
  },
  props: {
    // 菜单树形结构对象
    menuTree: {
      type: Array,
      required: false,
      default: () => ([])
    },
    menuOptions: {
      type: Object,
      default: () => ({
        nodeName: "nodeName",
        nodeValue: "id",
        children: "children",
        icon: "icon",
        suffixIcon: "suffixIcon"
      })
    },
    // 只保持打开一个菜单
    uniqueOpened: {
      type: Boolean,
      default: false
    },
    // 默认打开的菜单
    defaultActive: {
      type: String,
      default: ""
    }
  },
  watch: {
    menuTree: {
      handler(newValue) {
        this.comMenuTree = newValue ? newValue : [];
        this.initMenuTree(this.comMenuTree);
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      defaultMenuOptions: {
        nodeName: "nodeName",
        nodeValue: "id",
        children: "children",
        icon: "icon",
        suffixIcon: "suffixIcon"
      },
      tempMenuOptions: {},
      tempMenuTree: [],
      comMenuTree: this.menuTree
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {
    allDisabled() {
      return (!this.menuTree || this.menuTree?.length) ? true : false;
    }
  },
  //方法集
  methods: {
    // 事件订阅
    subMenuOpen(menuPath) {
      this.$emit("open", menuPath);
    },
    subMenuClose(menuPath) {
      this.$emit("close", menuPath);
    },
    menuSelect(menuPath) {
      this.$emit("select", menuPath);
    },
    // 初始化树形结构
    initMenuTree(array = []) {
      if (array?.length) {
        // 合并默认配置 
        const _options = this.mergeMenuOptions(JSON.parse(JSON.stringify(this.menuOptions)));
        this.tempMenuOptions = _options;
        // 映射配置
        const resultData = this.mapDataByMenuOptions(JSON.parse(JSON.stringify(this.comMenuTree)), _options);
        console.log(resultData);
        if (resultData) {
          this.tempMenuTree = resultData;
        }
      }
    },
    mergeMenuOptions(options) {
      // 默认配置
      const defaultOptions = JSON.parse(JSON.stringify(this.defaultMenuOptions));
      // 合并配置
      options = options && Object.prototype.toString.call(options) == "[object Object]" ? { ...defaultOptions, ...options } : { ...defaultOptions };

      return options;
    },
    mapDataByMenuOptions(menuList, options) {
      // 分组源数据
      const _groupData = this.groupData(menuList, options);
      // 映射过后的树
      const _mapedData = this.mapData(_groupData, options);
      // 处理层级 以及删除空children
      return this.buildTree(_mapedData);
    },
    groupData(data, options, originData = []) {
      if (data?.length) {
        const { children } = options;
        const len = data.length;
        for (let index = 0; index < len; index++) {
          const _item = data[index];
          const _newItem = JSON.parse(JSON.stringify(_item));
          originData.push({
            originData: _newItem
          });
          if (_item[children] instanceof Array && _item[children].length) {
            _newItem[children] = this.groupData(_item[children], options);
          } else {
            delete _newItem[children];
          }
        }
      }
      return originData;
    },
    mapData(data = [], mapOptions) {
      const keys = Object.keys(mapOptions);
      if (data?.length) {
        data.forEach(item => {
          // 循环key映射到 树
          keys.forEach(key => {
            const _mapKey = mapOptions[key];
            const _origin = item["originData"];
            if (Object.hasOwnProperty.call(_origin, _mapKey)) {
              item[key] = JSON.parse(JSON.stringify(_origin[_mapKey]));
            }
          });
          if (item?.children instanceof Array && item.children.length) {
            // 递归映射
            this.mapData(item?.children, mapOptions);
          }
        });
      }
      return data;
    },
    buildTree(mapedData) {
      if (mapedData?.length) {
        // 添加层级
        addTreeLevel(mapedData);
        addNodeParent(mapedData);
        return mapedData;
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.project-side-menu-container {
  position: relative;
  width: 100%;
  height: 100%;

  ::v-deep .project-side-menu-instance {
    width: 100%;
    height: 100%;
    border-right: 1px solid #eeeeee;
    overflow: auto;

    /* 重置一级二级菜单 高度行高 */
    .project-sub-menu-item {
      & > .el-submenu__title {
        height: 32px;
        line-height: 32px;

        &:hover {
          background-color: unset;
          background: linear-gradient(
            91deg,
            rgba(0, 129, 255, 0.1) 0%,
            rgba(0, 129, 255, 0) 100%
          );
        }
      }
    }
  }
}
</style>
