<template>
    <ElTree class="hc-tree-node tree-line page-division-tree" 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 division" :class="node.level === 1?'level-name':''">{{ node.label }}</div>
                <div class="menu-icon" :class="data['isImportIdentificationNode'] === 0?'show':''">
                    <div class="cu-tree-node-popover-menu-icon" @click.prevent.stop="treeRelationClick($event,data,node)">关联</div>
                </div>
            </div>
        </template>
    </ElTree>
</template>

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

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

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

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

//关联按钮被点击
const treeRelationClick = (e,data,node) => {
    if (node.level !== 1) {
        e.preventDefault();
        emit('relationTap', {node, data})
    }
}
</script>

<style lang="scss" scoped>
@import "../../../../styles/app/tree.scss";
.data-custom-tree-node {
    .menu-icon {
        position: absolute;
        pointer-events: none;
        transition: opacity 0.2s;
        opacity: 0;
        right: 20px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 2px;
        padding: 2px 14px;
        .cu-tree-node-popover-menu-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--el-color-primary);
            cursor: pointer;
        }
    }
    .menu-icon.show {
        opacity: 1;
        pointer-events: all;
        cursor: pointer;
    }
}
</style>

<style lang="scss">
.hc-tree-node.page-division-tree.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label .data-custom-tree-node .label.division {
    font-size: 22px;
    font-weight: bold;
    color: var(--el-color-primary);
}
</style>
