<template>
	<div class="node-el" :class="{ center: posCenter, mask: mask }">
		<Handle
			v-for="handle in handles[type] || []"
			:key="handle.id"
			:type="handle.type"
			:id="handle.id"
			:position="handle.position"
			:connectable="false"
		/>
		<div class="item" @mousedown="(e) => stateManager.setActiveNodeID(node.id)">
			<slot></slot>
		</div>
		<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
			<svg-icon name="add" size="14" size-unit="px" />
		</div>
		<div class="mask" v-show="mask"></div>
	</div>
</template>
<script lang="ts" setup>
	import { Handle, Position } from '@vue-flow/core'
	import { NODE_DATATYPE, NODE_DATATIER, NODE_TYPE } from '../tools/index.d'
	import { computed, ref, inject } from 'vue'
	const handles = ref({
		[NODE_TYPE.INPUT]: [{ id: 'Right', type: 'source', position: Position.Right }],
		[NODE_TYPE.SECONDARY]: [
			{ id: 'Left', type: 'target', position: Position.Left },
			{ id: 'Right', type: 'source', position: Position.Right }
		],
		[NODE_TYPE.OUTPUT]: [{ id: 'Left', type: 'target', position: Position.Left }],
		[NODE_TYPE.ALONE]: []
	})
	const props = defineProps({
		type: {
			type: String,
			default: 'InputNode'
		},
		node: {
			type: Object,
			required: true
		},
		stateManager: {
			type: Object,
			required: true
		},
		mask: {
			type: Boolean,
			default: false
		}
	})
	const stateManager = inject('stateManager') as any
	const nodes = computed(() => props.stateManager.nodes.value)
	const isSubord = computed(() => nodes.value.some((v) => v.data.superiorID === props.node.id))
	const tier = computed(() => Number(props.node?.data?.tier || 0))
	//只有3d模型才有三级菜单,目前三级菜单内容少直接禁用按钮
	const isAdd3d = computed(() => (tier.value === 2 && props.node?.data?.superiorNodeType === NODE_DATATYPE.TO_3D_MODEL) || tier.value != 2)
	const isReturned = computed(() => {
		return (
			props.node.data.type == NODE_DATATYPE.RESULT_IMAGE &&
			props.node.data.data.imageProcessTasks[0].status == 'RETURNED'
		)
	})
	const isAdd = computed(
		() =>
			!isSubord.value &&
			NODE_DATATYPE.RESULT_IMAGE === props.node.data.type &&
			!(tier.value === NODE_DATATIER.TO_3VIEW) &&
			isReturned.value && 
			isAdd3d.value
	)
	const onAdd = () => {
		const tier_ = tier.value + 1
		// 从data中获取originalImage
		let nodeData = props.node?.data?.data.imageProcessTasks.filter(
			(v) => v.taskId === props.node?.data?.data.selectTaskId
		)
		const originalImage = nodeData[0]?.url
		if (!originalImage) console.log('originalImage 找不到原始图片')
		props.stateManager.nodeManager.createCardsSelect({
			data: { tier: tier_, superiorID: props.node.id, originalImage }
		})
	}
	const posCenter = computed(() => {
		const arr = [NODE_DATATYPE.RESULT_IMAGE]
		return arr.includes(props.node?.data?.type)
	})
</script>

<style lang="less" scoped>
	.node-el {
		position: relative;
		--top: 50px;
		&.mask *,
		&.mask {
			pointer-events: none;
		}
		.vue-flow__handle {
			width: 12px;
			height: 12px;
			top: var(--top);
			z-index: 10;
			background: #b5b5b5;
			border: 1px solid #ffffff;
		}
		> .item {
			position: relative;
		}
		> .add {
			position: absolute;
			width: 32px;
			height: 32px;
			border: 2px solid #fff;
			top: var(--top);
			right: -16px;
			transform: translateY(-50%);
			background-color: #ed8936;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 25px;
			box-shadow: 0 8px 20px 0 #71809633;
			cursor: pointer;
			z-index: 20;
		}
		&.center {
			--top: 50%;
		}
		> .mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 100;
		}
	}
</style>
