<template>
	<!-- 画布编辑印花 -->
	<div class="fast-mode">
		<p class="label">Output</p>
		<div class="imgBox">
			<img :src="data.url" alt="">
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive, inject, useAttrs } from 'vue'
	import myEvent from '@/utils/myEvent'
	import { getCurrentTime } from '../../../../tools/tools.ts'
	import { NODE_DATATIER } from '../../../tools/index.d'
	const attrs = useAttrs()
	const data = reactive({
		url: attrs.node?.data?.originalImage,
	})
	const stateManager = inject('stateManager') as any
	const nodeManager = inject('nodeManager') as any
	const eventManager = inject('eventManager') as any
	const getApiData = ()=>{
		return {
		}
	}
	const opCanvas = ()=>{
		const data = { 
			url:attrs?.node?.data?.originalImage,
			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: NODE_DATATIER.RESULT_IMAGE,
						isActive: subordNodes.length == 0,
						data: {
							imageProcessTasks:[workbenchData],
							selectTaskId:taskId + '',
						}
					}
				})
			},
		}
		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>
