<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="dm" :default-expanded-keys="treemrData"
        @node-click="nodeClick" :data="treeData" highlight-current :current-node-key="nodeobj.id"
        :check-on-click-node="false">
        <template #default="{ node }">
          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }"> <img :src="getImgUrl('img/zzjgli.png')"
              alt=""></span>
          <span>{{ node.label }}</span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, defineProps, defineEmits, watch,watchEffect, onMounted, reactive } 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
  },
});
const endProps = {
  children: "itemList",
  value: "dm",
  label: "zdmc",
  isLeaf: "leaf"
};
const treeRef = ref(null);
const nodeobj = reactive({
  id: '100101010000'
})
const treemrData = ref([]);
const treeDataAll = ref([]);
const treeData = ref([]);
const width = ref();
const emits = defineEmits(["update:modelValue", "getdeptId", 'getdeptData', 'getnode']);
onMounted(() => { getTreeData() });
//防抖处理
watch(() => treeData.value.length, () => {
  if (treeData.value?.length > 0) {
    const root = treeData.value[0];
    expandLastLevel(root, 0);
  }
})
// 以前方法
// watchEffect(() => {
//   if (treeData.value.length > 0) {
//     const root = treeData.value[0];
//     expandLastLevel(root, 0);
//   }
// });

function expandLastLevel(node, level) {
  if (level === 0) {
    node.expanded = true;
  } else if (node.children && node.children.length > 0) {
    node.children.forEach((child) => {
      expandLastLevel(child, level - 1);
    });
  }
}
//获取部门数据
function getTreeData() {
  getApi({}, '/mosty-jcgl/danger2Baseinfo/getTree').then(async (res) => {
    if (res) {
      const addType = async (temp, type) => {
        temp.type = type
        temp.itemList.forEach(a => {
          addType(a, type)
        })
      }
      // 添加现状还是固有的类型
      res[0].itemList.forEach(item => {
        addType(item, "GYFX")
      });
      res[1].itemList.forEach(item => {
        addType(item, "XZFX")
      });
      treeData.value = res
      treemrData.value = []
      treeDataAll.value = []
      const getDm = async (array) => {
        await array.forEach(item => {
          treemrData.value.push(item.dm)
          treeDataAll.value.push(item)
          if (item.itemList.length > 0) getDm([item.itemList[0]])
        })

      }
      if (res[0]) {
        getDm([res[0]])
        let obj = treeDataAll.value[treeDataAll.value.length - 1]
        nodeobj.id = obj.dm
        emits("update:modelValue", obj.dm);
        treeRef.value.setCurrentKey(obj.dm)
        emits("getdeptData", obj);

      }
    }
  });
}
const nodeClick = (node) => {
  const id = node.dm;
  nodeobj.id = node.dm
  emits("update:modelValue", id);
  emits("getdeptData", node);
  emits("getnode", node);
};
</script>

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

.prefix {
  margin-right: 5px;
}

.depar_foot {
  overflow: auto;
}

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