<template>
  <div class="departmentTree-box" :style="{ width: width, height: '100%' }">
    <div class="depar_hear">
      <el-input
        v-model="listQuery.deptname"
        v-if="filterable"
        clearable
        :debounce="500"
        @input="filterTextChange"
        placeholder="请输入筛选条件"
      />
    </div>
    <div class="depar_foot">
      <el-tree
        ref="treeRef"
        class="filter-tree"
        :props="endProps"
        lazy
        :load="loadNode"
        @node-click="nodeClick"
        :filter-node-method="filterNode"
        :data="treeData"
      />
    </div>
  </div>
</template>

<script setup>
import { debounce } from "lodash";
import { getItem } from "@/utils/storage";
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, watch, computed, onMounted } from "vue";
import { selectDeptPage, getAllChildDeptList } from "@/api/user-manage";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择",
    type: String
  },
  multiple: {
    default: false,
    type: Boolean
  },
  filterable: {
    default: false,
    type: Boolean
  },
  modelValue: {
    type: Number
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  },
  isBmId:{
    type:Boolean,
    default:false
  }
});
const listQuery = ref({
  deptname: "",
  deptcode: "",
  parentid: ""
});
const treeRef = ref(null);
const node_had = ref([]);
const resolve_had = ref([]);
//防抖处理
const filterTextChange = debounce(inputChange, 500);
onMounted(() => {});
//获取部门数据
function getTreeData() {
  selectDeptPage(listQuery.value).then((res) => {
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    treeData.value = res;
  });
}
//搜索查询
function inputChange(e) {
  selectDeptPage(listQuery.value).then((res) => {
    treeData.value = res;
  });
}

watch(
  () => listQuery.value.deptname,
  (val) => {
    treeRef.value.filter("tree", val);
  }
);
const endProps = {
  children: "childDeptList",
  value: "id",
  label: "orgName",
  isLeaf: "leaf"
};
const treeData = ref([]);
//懒加载方法
async function loadNode(node, resolve) {
  listQuery.value.parentid = node.data.id;
  if (node.level === 0) {
    node_had.value = node;
    resolve_had.value = resolve;
    getTreeData();
  }
  if (node.level >= 1) {
    selectDeptPage(listQuery.value).then((res) => {
      for (let i = 0; i < res.length; i++) {
        res[i].leaf = !res[i].hasChildren;
      }
      resolve(res);
    });
  }
}
const filterNode = (value, data) => {
  if (!value) return true;
  return data.orgName.includes(value);
};

const nodeClick = (node) => {
  if(props.isBmId){
    emits("update:modelValue", node.id);
  }else{
    emits("update:modelValue", node.orgCode);
  }
};

const emits = defineEmits(["update:modelValue"]);
const handleChange = (e) => {
  if (props.multiple === true) {
    const data = e.map((item) => {
      return item[item.length - 1];
    });
    emits("update:modelValue", data);
  } else {
    const data = e[0];
    emits("update:modelValue", data);
  }
};
</script>

<style lang="scss" scoped>
.depar_hear {
  height: 32px;
}
.depar_foot {
  height: calc(100% - 32px);
  overflow: auto;
  width: 280px;
  width: 100%;
  min-width: 300px;
}
.departmentTree-box {
  overflow: auto;
}
</style>
