<template>
  <div class="departmentTree-box" :style="{ width: width, height: '100%' }">
    <div class="depar_hear">
      <el-input v-model="listQuery.orgName" 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" filterable />
    </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,
  getDept,
  getOrgTree,
  getAllChildDeptList
} from "@/api/user-manage";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请选择",
    type: String
  },
  multiple: {
    default: false,
    type: Boolean
  },
  filterable: {
    default: true,
    type: Boolean
  },
  modelValue: {
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  },
  deptcode: {
    type: String,
    default: ""
  }
});
const listQuery = ref({
  orgName: "",
  deptcode: "",
  parentid: ""
});
const treeRef = ref(null);
const node_had = ref([]);
const resolve_had = ref([]);
//防抖处理
const filterTextChange = debounce(inputChange, 500);
onMounted(() => { });
//获取部门数据
function getTreeData() {
  getDept(listQuery.value).then((res) => {
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    if (res.length > 0) treeData.value = res;
  });
}
//搜索查询
function inputChange(e) {
  getOrgTree(listQuery.value).then((res) => {
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    if (res.length > 0) treeData.value = res;
  });
}
//模糊搜索(根据名称)
watch(
  () => listQuery.value.orgName,
  (val) => {
    treeRef.value.filter("tree", val);
  }
);
//根据外部传入ID查询部门信息
watch(
  () => props.deptcode,
  (newVal) => {
    if (newVal) {
      listQuery.value.deptcode = newVal;
      getTreeData();
    }
  },
  { deep: true, immediate: true }
);
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) {
    getDept(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) => {
  const id = node.id;
  emits("update:modelValue", id);
};

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: overlay;
  // width: 380px;
}
</style>
