<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-checkbox
        v-model="menuExpand"
        @change="handleCheckedTreeExpand($event)"
        >展开/折叠</el-checkbox
      >
      <el-checkbox
        v-model="menuNodeAll"
        @change="handleCheckedTreeNodeAll($event)"
        >全选/全不选</el-checkbox
      >
      <el-checkbox
        v-model="menuCheckStrictly"
        @change="handleCheckedTreeConnect($event)"
        >父子联动</el-checkbox
      >
    </div>
    <div style="border: 1px solid #eee; height: 580px">
      <el-scrollbar style="height: 100%">
        <el-tree
          v-loading="listLoading"
          ref="tree"
          :data="menuData"
          node-key="id"
          :show-checkbox="checkBoxShow"
          :check-strictly="!menuCheckStrictly"
          empty-text="加载中，请稍候"
        >
          >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <div>
              <i
                v-if="data.icon && data.icon.substr(0, 3) === 'el-'"
                :class="data.icon"
                style="margin-right: 10px"
              >
              </i>
              <svg-icon
                v-if="data.icon && data.icon.substr(0, 3) !== 'el-'"
                :iconClass="
                  data.menuType === 'FUNCTION' ? 'fun_url' : data.icon
                "
                class="icon"
                style="margin-right: 10px"
              ></svg-icon>
              <span>{{ data.remark }}</span>
            </div>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>


<script>
import { functionObj } from "@/utils/functionObj";
export default {
  props: {
    checkBoxShow: {
      //选中
      type: Boolean,
      default: false,
    },
    allMenu: {
      type: [Object, Array],
      default: () => {}, //这边是箭头函数
    },
    defaultMenu: {
      //默认选中菜单
      type: Array,
      default: [],
    },
  },
  watch: {},
  data() {
    return {
      menuExpand: false,
      menuNodeAll: false,
      menuCheckStrictly: true,
      // 菜单还是按钮
      statue: "",
      listLoading: false,
      defaultKeys: [], //tree默认展开
      menuData: [], //菜单tree
    };
  },

  created() {
    this.getNewMenuData(this.allMenu);
  },

  mounted() {},

  methods: {
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value) {
      let treeList = this.menuData;
      for (let i = 0; i < treeList.length; i++) {
        this.$refs.tree.store.nodesMap[treeList[i].id].expanded = value;
      }
    },

    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value) {
      this.$refs.tree.setCheckedNodes(value ? this.menuData : []);
    },

    // 树权限（父子联动）
    handleCheckedTreeConnect(value) {
      this.menuCheckStrictly = value ? true : false;
    },

    sortIndex(a, b) {
      return a.sort - b.sort;
    },

    getNewMenuData(datas) {
      let data = [];
      if (datas) {
        datas.forEach((item1) => {
          functionObj.forEach((item2) => {
            if (
              item1.menuId == item2.id &&
              item2.menuType.toLowerCase() == "menu"
            ) {
              // if (item2.hidden == 0) {
              item1 = {
                idd: item1.id,
                parentId: item1.parentId,
                sort: item1.sort,
                remark: item1.menuName,
                id: item2.id,
                component: item2.component,
                icon: item2.icon,
                menuType: item2.menuType,
                name: item2.name,
                redirect: item2.redirect,
                router: item2.router,
                hidden: item2.hidden,
              };
              data.push(item1);
              // }
            }
            if (
              item1.menuId == item2.id &&
              item2.menuType.toLowerCase() == "button"
            ) {
              item1 = {
                idd: item1.id,
                id: item2.id,
                menuType: item2.menuType,
                remark: item1.menuName,
                parentId: item1.parentId,
                sort: item1.sort,
              };
              data.push(item1);
            }
          });
        });
      }
      data.sort(this.sortIndex);
      if (data && data.length > 0) {
        for (let i = 0; i < this.defaultMenu.length; i++) {
          this.defaultKeys.push(this.defaultMenu[i].menuId);
        }
        let resultDate = [];
        this.setMenuDate(resultDate, data, 0);
        this.menuData = resultDate;
        // 回显选中菜单
        this.defaultKeys.forEach((v) => {
          this.$nextTick(() => {
            this.$refs.tree.setChecked(v, true, false);
          });
        });
      }
      this.listLoading = false;
    },

    setMenuDate(resultDate, data, index) {
      //获取接口数据生成tree数据
      if (data.length == 0) {
        return;
      }
      if (index == 0) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].parentId == 0) {
            resultDate.push(data[i]);
            data.splice(i, 1);
            i--;
          }
        }
      }
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < resultDate.length; j++) {
          if (data.length > 0 && resultDate[j].id == data[i].parentId) {
            if (!resultDate[j].hasOwnProperty("children")) {
              resultDate[j].children = [];
            }

            if (resultDate[j].children.length > 0) {
              find = resultDate[j].children.filter(function (key) {
                return key.id === data[i].id;
              });
            }
            let find = resultDate[j].children.filter((item) => {
              return item.id == data[i].id;
            });
            if (find.length == 0) resultDate[j].children.push(data[i]);
            // data.splice(i, 1)
            // i--
          }
          if (resultDate[j].hasOwnProperty("children")) {
            this.setMenuDate(resultDate[j].children, data, 1, i);
          }
        }
      }
      return resultDate;
    },
  },
};
</script>

<style scoped>
</style>
