<template>
	<div class="canvas">
		<!-- <div class="canvas-main" ref="canvasMain" @mousedown="onMouseDown" @wheel="onMouseWheel">
			<div
				class="canvas-content"
				:style="{
					top: `${data.y}px`,
					left: `${data.x}px`,
					transform: `scale(${data.scale})`
				}"
			>
				<card type="to-real-style" />
				<card type="scene-composition" />
				<card type="color-palette" />
				<card type="to-video" />
				<card type="to-3d-model" />
				<card type="to-cad" />
				<card type="add-print" />
				<card type="edit-material" />
			</div>
		</div> -->

		<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="" :nodes-draggable="true">
			<template #node-InputNode="nodeProps">
				<inputNode v-bind="nodeProps" >
					<template v-slot:content>{{ nodeProps.type }}
						<card type="to-real-style" />
					</template> 	
				</inputNode>
			</template>
			<template #node-SecondaryNode="nodeProps">
				<secondaryNode v-bind="nodeProps" >
					<template v-slot:content>
						<card type="scene-composition" />
					</template> 
				</secondaryNode>
			</template>
		</VueFlow>
	</div>
</template>

<script setup lang="ts">
	import card from './components/cards/index.vue'
	import { useLayout } from '@/utils/treeDiagram'
	import { VueFlow, useVueFlow } from '@vue-flow/core'
	import { computed, ref, markRaw, onMounted, reactive, nextTick } from 'vue'
	import { useGlobalStore } from '@/stores'
	import secondaryNode from './components/node/secondaryNode.vue'
	import inputNode from './components/node/InputNode.vue'
	const globalStore = useGlobalStore()
	const data = reactive({
		x: 100,
		y: 200,
		scale: 1
	})
	const canvasMain = ref<HTMLDivElement>()
	const onMouseDown = (e: MouseEvent) => {
		if (e.button !== 1) return
		const ox = data.x
		const oy = data.y
		const X = e.clientX
		const Y = e.clientY
		const onMouseMove = (e: MouseEvent) => {
			const dx = e.clientX - X
			const dy = e.clientY - Y
			data.x = ox + dx
			data.y = oy + dy
		}
		const onMouseUp = (e: MouseEvent) => {
			document.removeEventListener('mousemove', onMouseMove)
			document.removeEventListener('mouseup', onMouseUp)
		}
		document.addEventListener('mousemove', onMouseMove)
		document.addEventListener('mouseup', onMouseUp)
	}
	const onMouseWheel = (e: WheelEvent) => {
		var delta = e.deltaY
		var scale = data.scale - delta / 1000
		if (scale < 0.2) scale = 0.2
		if (scale > 10) scale = 10
		data.scale = scale
	}
	const position = { x: 0, y: 0 }

	const nodes = ref<Node[]>([
		  { id: '1', type: 'InputNode', label: 'Node 1', class: 'custom-node start', position },
		  { id: '2', type: 'SecondaryNode', class: 'custom-node', data: { id: '主 1' }, position },
	])
	const edges = ref<Edge[]>([
		  { id: 'e1-3', source: '1', target: '2', type: 'smoothstep', },
	])
	const { fitView } = useVueFlow()
	const { layout } = useLayout()
	async function layoutGraph(direction) {
		setTimeout(() => {
			nodes.value = layout(nodes.value, edges.value, direction)
			console.log(nodes.value)
			nextTick(() => {
				fitView()
			})
		}, 0)
	}

	onMounted(() => {
		globalStore.setHomeLeftNavCollapse(true)
	})
</script>
<style lang="less">
@import "@vue-flow/core/dist/style.css";
@import "@vue-flow/core/dist/theme-default.css";
</style>
<style lang="less" scoped>
	.canvas {
		// overflow-y: auto;
		// display: flex;
		// flex-wrap: wrap;
		// align-content: flex-start;
		// align-items: flex-start;
		// padding: 2rem;
		// gap: 2rem;
		background-color: #fcf8f1;
		position: relative;
		overflow: hidden;
		> .canvas-main {
			width: 100%;
			height: 100%;
			position: relative;
			> .canvas-content {
				position: absolute;
				width: auto;
				height: auto;
				display: flex;
				align-items: flex-start;
				gap: 5rem;
				transform-origin: top left;
			}
		}
		> .vue-flow{
			width: 100%;
			height: 100%;
		}
	}
</style>
