<template>
  <div class="project-side-menu-container">
    <el-menu mode="vertical" class="project-side-menu-instance">
      <project-menu-item></project-menu-item>
    </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"
      })
    }
  },
  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: {
    // 初始化树形结构
    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);
      }
    },
    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 _mapedData = this.mapData(menuList, options);
      // 处理层级 以及删除空children
      this.buildTree(_mapedData);
    },
    mapData(data = [], mapOptions) {
      const keys = Object.keys(mapOptions);
      if (data?.length) {
        data.forEach(item => {
          // 循环key映射到 树
          keys.forEach(key => {
            const mapKey = mapOptions[key];
            if (Object.hasOwnProperty.call(item, mapKey)) {
              item[key] = item[mapKey];
            }
          });
          if (item?.children) {
            // 递归映射
            this.mapData(item?.children, mapOptions);
          }
        });
      }
      return data;
    },
    buildTree(mapedData) {
      if (mapedData?.length) {
        // 添加层级
        addTreeLevel(mapedData);
        addNodeParent(mapedData);
        console.log(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;

    /* 重置一级二级菜单 高度行高 */
    /* .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>
