<template>
    <ElTree class="hc-tree-node tree-line" :props="ElTreeProps" :data="childtreedata" highlight-current accordion node-key="id" :default-expanded-keys="TreeExpandKey" @node-click="ElTreeClick" :indent="0">
        <template #default="{ node, data }">
            <div class="data-custom-tree-node" :id="`${idPrefix}${data['id']}`">
                <!-- {{ node.label }} -->
                                    <!--树组件，节点名称-->
                    <div class="label level-name" v-if="node.level === 1">   
                        <el-checkbox class="size-xl" :label="data['primaryKeyId']" @click.stop >{{ node.label }}</el-checkbox>
                    </div>
                    <div class="label" v-else>
                        <el-checkbox class="size-xl" :label="data['primaryKeyId']" @click.stop >{{ node.label }}</el-checkbox>
                        <!-- <span v-else>{{ node.label }}</span> -->
                    </div>
                    <!--树组件，操作菜单-->
                    <div class="menu-icon" :class="node.showTreeMenu?'show':''" v-if="node.level !== 1 && menusData.length > 0">
                        <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="ElTreeLabelContextMenu($event,data,node)">
                            <HcIcon name="apps" ui="text-2xl"/>
                        </div>
                    </div>
                    <!--树组件，操作菜单 END-->
            </div>
        </template>
    </ElTree>
</template>

<script setup>
import {ref, watch, nextTick} from "vue";
const props = defineProps({
   
    autoExpandKeys: {
        type: Array,
        default: () => ([])
    },
    idPrefix: {
        type: String,
        default: 'project-tree-data-'
    },
    childtreedata:{
        type:Array,
        default: () => ([])

    }
})

//变量
const ElTreeProps = ref({label: 'title', children: 'children'})
const TreeExpandKey = ref(props.autoExpandKeys)

//监听
watch(() => [
    props.autoExpandKeys,
    props.datas,
], ([expandKeys, datas]) => {
    TreeExpandKey.value = expandKeys
    setTreeNodeClick(expandKeys)
})

nextTick(() => {
    setTreeNodeClick(props.autoExpandKeys)
})

//设置选中
const setTreeNodeClick = (keys) => {
    TreeExpandKey.value = keys
    if (keys.length > 0) {
        const byId = `${props.idPrefix}${keys[0]}`
        let timer = setInterval(() => {
            document.getElementById(byId)?.click()
            clearInterval(timer);
        }, 800);
    }
}

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

//节点被点击
const ElTreeClick = async (data,node) => {
    emit('nodeTap', {node, data, keys: [data?.id], key: data?.id})
}
</script>

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