<template>
  <div>
    <!-- 组织机构信息 -->
    <div class="treeBox">
      <el-tree v-show="prop.showtree" :data="treeData" :props="props" @node-click="handleNodeClick" :load="loadNode" lazy />
    </div>

  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, defineProps, defineEmits, ref, getCurrentInstance } from "vue";

import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["changetree", 'addData']);
const bigHeight = ref(); //整个高度
const treeData = ref([]); // 树的数据
const props = {
  children: "hasChildren",
  label: "label",
  value: "id",
  isLeaf: "leaf"
};
const params = ref({
  deptname: "",
  deptcode: "",
  parentid: ""
});
const prop = defineProps({
  showtree: {
    type: Boolean,
    default: true
  }
});
// 树节点
const handleNodeClick = (e) => {
  emits("changetree", e);
};

// 获取部门树的数据
const getTreeData = () => {
  getApi({}, "/mosty-base/sysDept/getDeptTree").then((res) => {
    treeData.value = res;
  });
};
const loadNode = (node, resolve) => {
  params.value.parentid = node.data.id;
  if (node.level === 0) {
    getTreeData();
  } else if (node.level >= 1) {
    getApi(params.value, "/mosty-base/sysDept/getDeptTree").then((res) => {
      for (let i = 0; i < res.length; i++) {
        const element = res[i];
        res[i].leaf = !res[i].hasChildren;
      }
      resolve(res);
    });
  }
};



onMounted(() => {
  getTreeData();
});
</script>

<style lang="scss" scoped>
.treeBox {
  height: 80vh;
  overflow-y: scroll;
}
</style>