<template>
	<div class="flow-canvas">
		<VueFlow
			ref="vueFlow"
			:nodes="nodes"
			:edges="edges_"
			:min-zoom="0.1"
			:max-zoom="10"
			:nodes-draggable="nodesDraggable"
			:pan-on-drag="panOnDrag"
			@nodes-initialized="layoutGraph('LR')"
			@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
			@viewport-change="(e) => eventManager.handleViewportChange(e)"
			@pane-click="(e) => eventManager.handleClick(e)"
			@mousedown="(e) => eventManager.mousedown(e)"
			@mouseup="(e) => eventManager.mouseup(e)"
			@node-click="(e) => clickNode(e)"
			:class="{ 'custom-cursor': !!stateManager.cursor.value }"
			:style="{ '--custom-cursor': stateManager.cursor.value }"
		>
			<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="node">
				<node-el
					:type="v"
					:stateManager="stateManager"
					:node="node"
					:mask="
						stateManager.tool.value === TOOLS.MOVE ||
						stateManager.tool.value === TOOLS.TEXT
					"
				>
					<component
						:is="components[node.data.component]"
						:class="{ active: stateManager.activeNodeID.value === node.id }"
						:active="stateManager.activeNodeID.value === node.id"
						:node="node"
						:config="node.data"
						:sketchId="config.imgId"
						:data="node.data.data"
						v-bind="node.data"
						@delete-node="deleteNode(node.id)"
						@copy-node="copyNode($event, node.id)"
						@update-data="(v) => (node.data.data = v)"
						@bring-to-font="bringToFont(node.id)"
						@send-to-back="sendToBack(node.id)"
					/>
				</node-el>
			</template>
		</VueFlow>
	</div>
	<header-tools @export="exportFlow" @import="importFlow" :downloadData="downloadData" />
	<zoom
		:zoom="stateManager.zoom.value"
		:step="0.1"
		is-home
		@add="(e) => flowManager.setZoom(e)"
		@sub="(e) => flowManager.setZoom(e)"
		@home="() => fitView({ maxZoom: 1 })"
	/>
	<image-preview ref="imagePreviewRef" />
	<baseModal ref="threeModelRef">
		<template v-slot="{ currentData }">
			<threeModel :currentData="currentData" />
		</template>
	</baseModal>
</template>

<script setup lang="ts">
	import { VueFlow, useVueFlow } from '@vue-flow/core'
	import { computed, ref, watch, onMounted, nextTick, provide, onBeforeUnmount } from 'vue'
	import { useLayout } from '@/utils/treeDiagram'
	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
	// 组件
	import headerTools from './components/header-tools.vue'
	import zoom from '../components/zoom.vue'
	import imagePreview from '../components/image-preview.vue'
	import baseModal from '../components/base-modal.vue'
	// 工具
	import threeModel from './components/tools/threeModel/index.vue'
	// 节点
	import nodeEl from './components/node-el.vue'
	import resultImage from './components/nodes/result-image.vue'
	import card from './components/nodes/cards/index.vue'
	import text from './components/nodes/text.vue'
	import { downImgListToZip } from '../tools/tools'

	const components = {
		[NODE_COMPONENT.RESULT_IMAGE]: resultImage,
		[NODE_COMPONENT.CARD]: card,
		[NODE_COMPONENT.TEXT]: text
	}

	// 管理器
	import { StateManager } from './manager/StateManager'
	import { EventManager } from './manager/EventManager'
	import { FlowManager } from './manager/FlowManager'
	import { NodeManager } from './manager/NodeManager'
	import { ToolManager, TOOLS } from './manager/ToolManager'
	import { GenerateManager } from './manager/GenerateManager'

	const props = defineProps({
		config: {
			type: Object,
			default: () => ({})
		}
	})
	const emit = defineEmits(['exportFlow'])

	const vueFlow = ref<any>()
	const nodeTypes = ref([NODE_TYPE.INPUT, NODE_TYPE.SECONDARY, NODE_TYPE.OUTPUT, NODE_TYPE.ALONE])
	// 状态管理器
	const stateManager = new StateManager({ vueFlow,sketchId:props.config.imgId })
	provide('stateManager', stateManager)

	// 事件管理器
	const eventManager = new EventManager({ stateManager, vueFlow })
	stateManager.setManager({ eventManager })
	provide('eventManager', eventManager)

	// 流程管理器
	const flowManager = new FlowManager({ stateManager, vueFlow })
	stateManager.setManager({ flowManager })
	provide('flowManager', flowManager)

	// 节点管理器
	const nodeManager = new NodeManager({ stateManager, vueFlow })
	stateManager.setManager({ nodeManager })
	provide('nodeManager', nodeManager)

	// 工具管理器
	const toolManager = new ToolManager({ stateManager, vueFlow })
	stateManager.setManager({ toolManager })
	provide('toolManager', toolManager)

	// 生成管理器
	const generateManager = new GenerateManager({ stateManager })
	stateManager.setManager({ generateManager })
	provide('generateManager', generateManager)

	const nodes = computed(() => stateManager.nodes_.value)
	const edges = computed(() => stateManager.edges.value)
	const edges_ = computed(() => {
		return edges.value.filter((v) => v?.visible)
	})
	const nodesDraggable = computed(() => stateManager.nodesDraggable.value)
	const panOnDrag = computed(() => stateManager.panOnDrag.value)

	const { fitView } = useVueFlow()
	const { layout } = useLayout()
	const index = ref(0)
	async function layoutGraph(direction) {
		if (props.config.json.length > 0) return
		if (index.value > 0) return
		index.value++
		setTimeout(() => {
			stateManager.nodes.value = layout(
				stateManager.nodes.value,
				stateManager.edges.value,
				direction,
				{
					nodesep: nodeManager.nodesep,
					ranksep: nodeManager.ranksep
				}
			)
			nextTick(() => {
				fitView({ maxZoom: 1 })
			})
		}, 0)
	}

	/** 点击节点 */
	const clickNode = (event) => {
		let node = event.node
		// stateManager.showNodeConnections(node.id)
	}
	/** 删除节点 */
	const deleteNode = (id) => {
		nodeManager.deleteNode(id)
	}
	/** 复制节点 */
	const copyNode = (clickTaskId, id) => {
		nodeManager.copyNodeById(clickTaskId, id)
	}
	/** 节点zIndex设置最大 */
	const bringToFont = (id) => {
		stateManager.bringToFont(id)
	}
	/** 节点zIndex设置最小 */
	const sendToBack = (id) => {
		stateManager.sendToBack(id)
	}
	// 导出流程
	const getFlowJson = () => {
		return JSON.stringify(stateManager.nodes.value)
	}
	const downloadData = ref<any>({
		amount: 0,
		progress: 0,
		status: 'success',//success
	})
	const exportFlow = async () => {
		// console.log(vueFlow.value)
		// console.log(vueFlow.value.toImage)
		let arr = stateManager.nodes.value.filter((v) => v.data.type === NODE_COMPONENT.RESULT_IMAGE)
		let imgList = []
		arr.forEach((v,i) => {
			v.data.data.imageProcessTasks.forEach((item,index) => {
				let url = item.url
				let name = url?.split(".").pop().split("?").shift();
				imgList.push({url:url,name:`${v.data.type}${i}-${index == 0?'':index}.${name}`})
			})
		})
		downloadData.value.amount = imgList.length
		downloadData.value.status = 'loading'
		await downImgListToZip(imgList,(progress)=>{
			downloadData.value.progress = progress
			if(progress == downloadData.value.amount){
				downloadData.value.status = 'success'
			}
		})
		return
	}
	// 导入流程
	const importFlow = async (json) => {
		try {
			stateManager.nodes.value = []
			await nextTick()
			// const json = JSON.parse(localStorage.getItem('flow_json') || '[]')
			stateManager.nodes.value = json
			setTimeout(() => {
				nextTick(() => {
					fitView({ maxZoom: 1 })
				})
			}, 0)
		} catch (error) {
			console.log(error)
		}
	}

	const imagePreviewRef = ref<any>()
	const threeModelRef = ref<any>()
	/** 打开图片预览 */
	const openImagePreview = (url: string) => {
		imagePreviewRef.value.open(url)
	}
	/** 打开3D预览 */
	const openThreeModelPreview = (currentData) => {
		threeModelRef.value.open(currentData)
	}
	provide('openImagePreview', openImagePreview)
	provide('openThreeModelPreview', openThreeModelPreview)

	onMounted(async () => {
		// window['vueFlow'] = vueFlow
		// window['nodes'] = nodes
		eventManager.registerEvents()
		if (props.config.json.length > 0) {
			importFlow(props.config.json)
		} else {
			const timestamp = Date.now()
			nodeManager.createResultNode({
				data: {
					disableDelete: true,
					isHeader: false,
					data: {
						selectable: false,
						imageProcessTasks: [
							{
								id: props.config.imgId,
								url: props.config.url,
								status: 'RETURNED',
								taskId: timestamp + ''
							}
						],
						selectTaskId: timestamp + ''
					}
				}
			})
		}
	})
	onBeforeUnmount(() => {
		stateManager.dispose()
		eventManager.dispose()
		flowManager.dispose()
		nodeManager.dispose()
		toolManager.dispose()
	})
	defineExpose({
		getFlowJson
	})
</script>
<style lang="less">
	@import '@vue-flow/core/dist/style.css';
	@import '@vue-flow/core/dist/theme-default.css';
</style>
<style lang="less" scoped>
	.flow-canvas {
		width: 100%;
		height: 100%;
		> .vue-flow {
			width: 100%;
			height: 100%;
			&.custom-cursor {
				cursor: var(--custom-cursor, pointer);
			}
		}
	}
</style>
