<template>
	<div v-if="visible" class="crew-context-menu" :style="{ left: x + 'px', top: y + 'px' }">
		<template v-if="targetNode">
			<div class="menu-item" @click="emit('set-master', targetNode.data.agentId)">
				<el-icon><Star /></el-icon> 设为主 Agent
			</div>
			<div class="menu-item" @click="emit('remove-node', targetNode.data.agentId)">
				<el-icon><Delete /></el-icon> 移出集群
			</div>
		</template>
		<template v-if="targetEdge">
			<div class="menu-item" @click="emit('delete-edge', targetEdge.id)">
				<el-icon><Delete /></el-icon> 删除连线
			</div>
		</template>
		<div class="menu-item" @click="emit('auto-layout')">
			<el-icon><Grid /></el-icon> 自动布局
		</div>
		<div class="menu-item" @click="emit('fit-view')">
			<el-icon><FullScreen /></el-icon> 适应画布
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Star, Delete, Grid, FullScreen } from "@element-plus/icons-vue";

defineProps<{
	visible: boolean;
	x: number;
	y: number;
	targetNode?: any;
	targetEdge?: any;
}>();

const emit = defineEmits<{
	(e: "set-master", agentId: number): void;
	(e: "remove-node", agentId: number): void;
	(e: "delete-edge", edgeId: string): void;
	(e: "auto-layout"): void;
	(e: "fit-view"): void;
	(e: "close"): void;
}>();
</script>

<style scoped lang="scss">
.crew-context-menu {
	position: fixed;
	z-index: 1000;
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 4px 0;
	min-width: 160px;
}
.menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.2s;
	&:hover {
		background: #ecf5ff;
		color: #409eff;
	}
}
</style>
