<template>
  <div :class="{ 'basic-flow': true, dark }">
    <div style="height: 500px; width: 100%;">
      <VueFlow
          :nodes="nodes"
          :class="{ 'dark': dark }"
          @nodeClick="handleNodeClick"
          @nodeDoubleClick="handleNodeDoubleClick"
          @nodeDragStart="handleNodeDragStart"
          @nodeDragStop="handleNodeDragStop"
      >
      </VueFlow>
    </div>
  </div>
</template>

<script setup lang="ts">
import { type Node, VueFlow, useVueFlow } from '@vue-flow/core';
import { ref } from 'vue';
import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';

const { onConnect, addEdges } = useVueFlow();

onConnect((connection) => {
  addEdges(connection);
});

const dark = ref(false);
const nodes = ref<Node[]>([
  { id: '1', position: { x: 250, y: 5 }, data: { label: 'Node 1' } },
  { id: '2', position: { x: 100, y: 100 }, data: { label: 'Node 2' } },
  { id: '3', type: 'output', position: { x: 400, y: 200 }, data: { label: 'Node 3' } },
  { id: '4', position: { x: 400, y: 300 }, data: { label: 'Node 4', hello: 'world' } },
]);

// 处理节点点击事件
const handleNodeClick = (event: MouseEvent | TouchEvent, node: Node) => {
  console.log('Node clicked:', node);
};

// 处理节点双击事件
const handleNodeDoubleClick = (event: MouseEvent | TouchEvent, node: Node) => {
  console.log('Node double-clicked:', node);
};

// 处理节点拖动开始事件
const handleNodeDragStart = (event: MouseEvent | TouchEvent, node: Node) => {
  console.log('Node drag started:', node);
};

// 处理节点拖动停止事件
const handleNodeDragStop = (event: MouseEvent | TouchEvent, node: Node) => {
  console.log('Node drag stopped:', node);
};
</script>