<template>
    <div>
        <!-- 有子节点的菜单项 -->
        <a-sub-menu v-if="node.children && node.children.length" :key="String(node.value)"
            @click.stop="toggleOpen(node)">
            <template #title>
                <div class="menu-title clickable" @click.stop="toggleOpen(node)">
                    <span class="menu-title-wrapper">
                        <a-dropdown trigger="contextmenu">
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item @click.stop="onAddChild(node)">添加子级</a-menu-item>
                                    <a-menu-item @click.stop="onEdit(node)">编辑</a-menu-item>
                                    <a-menu-item @click.stop="onDelete(node)">删除</a-menu-item>
                                </a-menu>
                            </template>
                            <span class="menu-title-text">{{ node.label }}</span>
                        </a-dropdown>
                    </span>
                </div>
            </template>

            <!-- 递归渲染子节点 -->
            <menu-item-node v-for="child in node.children" :key="String(child.value)" :node="child"
                @select="$emit('select', $event)" @edit="$emit('edit', $event)" @delete="$emit('delete', $event)"
                @add-child="$emit('add-child', $event)" />
        </a-sub-menu>

        <!-- 没有子节点的菜单项 -->
        <a-menu-item v-else :key="node.value">
            <div class="menu-item clickable" @click.stop="onSelectNode(node)">
                <span class="menu-title-wrapper">
                    <a-dropdown trigger="contextmenu">
                        <template #overlay>
                            <a-menu>
                                <a-menu-item @click.stop="onAddChild(node)">添加子级</a-menu-item>
                                <a-menu-item @click.stop="onEdit(node)">编辑</a-menu-item>
                                <a-menu-item @click.stop="onDelete(node)">删除</a-menu-item>
                            </a-menu>
                        </template>
                        <span class="ellipsis" :title="node.label">{{ node.label }}</span>
                    </a-dropdown>
                </span>
            </div>
        </a-menu-item>
    </div>
</template>

<script>
export default {
    name: "MenuItemNode",
    props: {
        node: { type: Object, required: true },
    },
    methods: {
        stop(e) { e && e.stopPropagation && e.stopPropagation(); },
        toggleOpen(node) {
            // 通知父组件控制 openKeys
            this.$emit('select', { __isTitle: true, node });
        },
        onSelectNode(node) {
            this.$emit('select', { __isTitle: false, node });
        },
        onEdit(node) { this.$emit('edit', node); },
        onDelete(node) { this.$emit('delete', node); },
        onAddChild(node) { this.$emit('add-child', node); },
    },
};
</script>

<style scoped>
.menu-title,
.menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 0;
}

.clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.menu-title-wrapper {
    flex: 1;
    overflow: hidden;
}

.menu-title-text,
.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.more-trigger {
    display: inline-block;
    padding: 0 8px;
    cursor: pointer;
    color: #999;
    font-size: 14px;
}
</style>
