<template>
  <div class="departmentTree-box" :style="{ width: width, height: '100%', }">
    <div class="depar_foot">
      <el-tree ref="treeRef" class="filter-tree" :props="endProps" node-key="id" default-expand-all="true"
         @node-click="nodeClick" :data="treeData" />
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
const props = defineProps({
  multiple: {
    default: false,
    type: Boolean
  },
  filterable: {
    default: true,
    type: Boolean
  },
  modelValue: {
    type: String
  },
  deptid: {
    type: String,
    default: ""
  }
});
const treeRef = ref(null);
const treeData = ref([]);
const emits = defineEmits(["update:modelValue", 'clickUser']);
const endProps = {
  children: "children",
  value: "id",
  label: "label",
  isLeaf: "leaf"
};
// 初始化
onMounted(() => {
  getTreeData()
});
//获取部门数据
function getTreeData() {
  getApi({ deptid: props.deptid }, '/mosty-jcgl/identify/getUserTree').then((res) => {
    if (res) {
      treeData.value = res
      if (res && res.length > 0) {
        if (res[0].children && res[0].children.length > 0) {
          emits("clickUser", res[0].children[0].id);
          emits("update:modelValue", res[0].children[0].id);
        }
      }
    }
  });
}
const nodeClick = (node) => {
  const id = node.id;
  emits("clickUser", id);
  emits("update:modelValue", id);
};
</script>

<style lang="scss" scoped>
.depar_hear {
  height: 32px;
}

.depar_foot {
  height: 100%;
  overflow: overlay;
}

.departmentTree-box {
  height: 80vh;
}
</style>
