<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import type { Node, Edge } from '@vue-flow/core'  
import { VueFlow } from '@vue-flow/core'
import SpecialEdge from './speciaiEdge.vue'
import SpecialNode from './speciaiNode.vue'
const props = defineProps({
	item: {
		type: Object,
		default: () => ({})
	}
})
//const emit = defineEmits([
//])
let data = reactive({
})

const nodes = ref<Node[]>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 0 } },
  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', type: 'custom', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', type: 'custom', label: 'Node 3', position: { x: 400, y: 200 } },
])

const edges = ref<Edge[]>([
  { id: 'e1-2', source: '1', target: '2', type: 'custom' },
  { id: 'e1-3', source: '1', target: '3', animated: true },
  { id: 'e1-4', source: '1', target: '4', },
])


onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="view2">
		<VueFlow :nodes="nodes" :edges="edges">
			<!-- bind your custom node type to a c omponent by using slots, slot names are always `node-<type>` -->
			<template #node-custom="nodeProps">
				<SpecialNode v-bind="nodeProps" />
			</template>

			<!-- <template #edge-custom="edgeProps">
				<SpecialEdge v-bind="edgeProps" />
			</template> -->
		</VueFlow>
	</div>
</template>
<style lang="less">
@import "@vue-flow/core/dist/style.css";
@import "@vue-flow/core/dist/theme-default.css";
</style>
<style lang="less" scoped>
	.view2{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
</style>