<template>
    <ElTree class="hc-tree-node tree-line" ref="ElTreeRef" :props="ElTreeProps" :data="datas" highlight-current accordion node-key="primaryKeyId" :indent="0" @node-click="ElTreeClick">
        <template #default="{ node, data }">
            <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
                <div class="label" :class="node.level === 1?'level-name':''">{{ node.label }}</div>
            </div>
        </template>
    </ElTree>
</template>

<script setup>
import { ref } from "vue";
//参数
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([])
    },
    idPrefix: {
        type: String,
        default: 'division-tree-data-'
    }
})

//变量
const ElTreeRef = ref(null)
const ElTreeProps = ref({
    label: 'fullName',
    children: 'children'
})

//事件
const emit = defineEmits(['nodeTap'])

//节点被点击
const ElTreeClick = async (data,node) => {
    emit('nodeTap', {node, data})
}
</script>

<style lang="scss" scoped>
//@import "../../../../styles/app/tree.scss";
</style>
