<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-expanded-keys="defaultExpandedKeys" @node-click="nodeClick" lazy :load="loadNode"
        :filter-node-method="filterNode" :data="treeData" highlight-current>
        <template #default="{ node }">
          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }">
            <SvgIcon :icon="'article-ranking'" style=" color: var(--el-color-primary) !important;"></SvgIcon>
          </span>
          <span>{{ node.label }}</span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import SvgIcon from "@/components/SvgIcon/index.vue";
import { ref, defineProps, defineEmits, watch, onMounted, onBeforeUnmount } from "vue";
import {
  getDept,
} 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: ""
  },
  // 查询层级 01.查询所有层级(默认) 02.查询所有省、市公司 03.查询所有省、市、县公司
  searchType: {
    type: String,
    default: ""
  }
});
const listQuery = ref({
  deptcode: "",
  parentid: "",
  searchType: props.searchType

});
const treeRef = ref(null);
const node_had = ref([]);
const resolve_had = ref([]);
const defaultExpandedKeys = ref([])
const treemrData = ref(null);
const emits = defineEmits(["update:modelValue", "getdeptId", "getdeptData"]);
//防抖处理
// const filterTextChange = debounce(inputChange, 500);
onMounted(() => { });
onBeforeUnmount(() => {
  clearTimeout(treemrData.value)
  treemrData.value = null
})
//获取部门数据
const getTreeData = () => {
  getDept(listQuery.value).then((res) => {
    if (res.length == 1) {
      res.forEach((element) => {

        // treemrData.value = setTimeout(() => { treeRef.value.setCurrentKey(element.id) }, 200)
        treemrData.value = [element.id]
        defaultExpandedKeys.value = [element.id]
        emits("getdeptData", element);
      });
    }
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    if (res.length > 0) treeData.value = res;
  })


};

//根据外部传入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) => {
  if (node.hasChildren == true) {

  }
  const id = node.id;
  emits("update:modelValue", id);
  emits("getdeptId", id);
  emits("getdeptData", node);
};

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;
}

.prefix {
  margin-right: 5px;
}

.depar_foot {
  // height: calc(100% - 8px);
  height: 100%;
  overflow-y: overlay;
  // width: 380px;
}

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