<script setup>
import { Handle, Position } from '@vue-flow/core'

defineProps({
  data: { type: Object, default: () => ({}) }
})
</script>

<template>
  <div class="virtual-group-node">
    <!-- 顶边中点 source handle（虚框在原节点下方时使用） -->
    <Handle type="source" :position="Position.Top" id="top" class="handle-auxiliary" />
    <!-- 底边中点 source handle（虚框在原节点上方时使用） -->
    <Handle type="source" :position="Position.Bottom" id="bottom" class="handle-auxiliary" />

    <span v-if="data?.label" class="group-label">{{ data.label }}</span>
  </div>
</template>

<style scoped>
.virtual-group-node {
  /* 尺寸由内联 style 注入（data.width / data.height） */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1.5px dashed #818cf8;
  border-radius: 8px;
  background: rgba(129, 140, 248, 0.04);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6px 8px 14px;
  pointer-events: all;
  cursor: move;
}

.group-label {
  font-size: 11px;
  color: #a5b4fc;
  background: rgba(15, 30, 60, 0.85);
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
}

.handle-auxiliary {
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  background: transparent !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
</style>
