<template>
	<!-- 画布编辑印花 -->
	<div class="fast-mode">
		<p class="label">{{ $t('FlowCanvas.output') }}</p>
		<div class="imgBox">
			<img :src="data.url" alt="">
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive, inject, useAttrs, computed } from 'vue'
	import myEvent from '@/utils/myEvent'
	import { getCurrentTime } from '../../../../tools/tools.ts'
	import { NODE_DATATIER } from '../../../tools/index.d'
	import { updateVersionSketchUrlApi } from '@/api/flow-canvas'
	const attrs = useAttrs()
	const stateManager = inject('stateManager') as any
	const nodeManager = inject('nodeManager') as any
	const eventManager = inject('eventManager') as any
	const data = reactive({
		url: computed(()=>stateManager.getSuperiorNodeImage(attrs.node?.data?.superiorID)),
	})
	const getApiData = ()=>{
		return {
		}
	}
	const opCanvas = (tier)=>{
		const superiorNodeUrl = stateManager.getSuperiorNodeImage(attrs?.node?.data?.superiorID || null)
		if (!superiorNodeUrl) console.log('superiorNodeUrl 找不到原始图片')
		const data = { 
			url:superiorNodeUrl,
			canvasId: attrs?.node?.data?.canvasId || null,
			sketchId: stateManager.sketchId.value,
			onWorkbench:(options)=>{
				let taskId = Date.now()
				let workbenchData = {
					createTime: getCurrentTime(),
					status: 'RETURNED',
					taskId: taskId + '',
					...options,
				}
				const subordNodes = stateManager.getSubordNodes(attrs.node.id)

				nodeManager.createResultNode({
					data: {
						superiorID: attrs.node.id,
						superiorNodeType: attrs.node?.data?.type,
						createIndexPosition: 0 + subordNodes.length,
						tier,
						isActive: subordNodes.length == 0,
						data: {
							imageProcessTasks:[workbenchData],
							selectTaskId:taskId + '',
						}
					}
				})
				//更新VersionNode的sketchIDAndUrl中指定key的URL值
				updateVersionSketchUrlApi({
					sketchId: stateManager.sketchId.value,
					newUrl: options.url,
				}).then(()=>{
					//更新VersionNode的versionImgUpdataList中指定key的URL值
					let initialNode = stateManager.getInitialNode()
					initialNode.data.versionImgUpdataList.push(options.url)
				})
			},
		}
		eventManager.removeEvents()
		myEvent.emit('openDepthCanvas', data)
	}
	defineExpose({ data, getApiData, opCanvas })
</script>

<style lang="less" scoped>
	.fast-mode {
		margin-bottom: 40px;
		> .imgBox{
			width: 217px;
			height: 217px;
			padding: 7.5px;
			> img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
</style>
