<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="treemrData" @node-click="nodeClick" :data="treeData">
                <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, watchEffect, computed, onMounted } from "vue";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
const props = defineProps({
    multiple: {
        default: false,
        type: Boolean
    },
    filterable: {
        default: true,
        type: Boolean
    },
    modelValue: {
        type: String
    },

});
const treeRef = ref(null);
const treemrData = ref([]);
const treeData = ref([]);
const lasttree = ref([]);
const emits = defineEmits(["update:modelValue", "getdeptId", 'getdeptData', 'getnode']);
//防抖处理
// const filterTextChange = debounce(inputChange, 500);
watchEffect(() => {
    if (treeData.value.length > 0) {
        const root = treeData.value[0];
        expandLastLevel(root, 0);
        const lastLevel = getLastLevel(root);
        emits("getdeptData", lasttree.value[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 getLastLevel(node) {
    let lastLevel = [];
    if (node.children && node.children.length > 0) {
        node.children.forEach((child) => {
            const childLastLevel = getLastLevel(child);
            if (childLastLevel.length > 0) {
                lastLevel = childLastLevel;
            } else {
                lastLevel.push(child);
            }
        });
    } else {
        lastLevel.push(node);
        lasttree.value.push(node);
    }
    return lastLevel;
}


onMounted(() => { getTreeData() });
//获取部门数据
function getTreeData() {
    getApi({}, '/mosty-jcgl/checklibOrg/getXcTree').then((res) => {
        if (res) {
            treeData.value = res
            res.forEach(element => {
                treemrData.value.push(element.id)
                emits("getdeptData", element);
                element.children.forEach(it => {
                    treemrData.value.push(it.id)
                })

            })
        }
    });
}



const endProps = {
    children: "children",
    value: "id",
    label: "label",
    isLeaf: "leaf"
};


const nodeClick = (node) => {
    const id = node.id;
    emits("update:modelValue", id);
    emits("getdeptId", id);
    emits("getnode", node);
};


</script>

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

.prefix {
    margin-right: 5px;
}

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

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