<template>
	<div class="card">
		<div class="header">
			<svg-icon
				v-if="attrs.node?.data?.secondaryMenu?.icon || !currentComponent?.hideIcon"
				:name="attrs.node?.data?.secondaryMenu?.icon || currentComponent?.type.split('_')[0]"
				color="#fff"
				size="16"
				size-unit="px"
			/>
			<span>{{ attrs.node?.data?.secondaryMenu?.title ||currentComponent?.title }}</span>
			<div class="delete-icon" @click="onDeleteClick">
				<SvgIcon name="flowDelete" size="16" size-unit="px" color="#fff" />
			</div>
		</div>
		<div class="body" @mousedown.stop>
			<component :is="currentComponent?.component" ref="componentRef" v-bind="attrs" />
		</div>
		<div class="footer" @mousedown.stop v-if="!currentComponent?.hideFooter">
			<button @click="onGenerateClick">
				<svg-icon name="xingxing" size="16" size-unit="px" />
				<span>{{ $t('FlowCanvas.generate') }}</span>
			</button>
		</div>
		<div class="footer canvasEdit" @mousedown.stop v-if="currentComponent?.showCanvasEdit">
			<button @click="currentComponent?.on()">
				<svg-icon name="xingxing" size="16" size-unit="px" />
				<span>{{ $t('FlowCanvas.edit') }}</span>
			</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { NODE_DATATYPE, NODE_DATATIER } from '../../../tools/index.d'
	import { computed, ref, useAttrs, onMounted, inject, watch } from 'vue'
	import CardsSelect from './cards-select.vue'
	import ToRealStyle from './to-real-style.vue'
	import ToRealVariants from './to-real-variants.vue'
	import SurfaceEdit from './surface-edit.vue'
	import FastMode from './fast-mode.vue'
	import SceneComposition from './scene-composition.vue'
	import ColorPalette from './color-palette.vue'
	import To3View from './to-3view.vue'
	import To3DModel from './to-3d-model.vue'
	import { useI18n } from 'vue-i18n'
	import { ElMessageBox } from 'element-plus'

	import { toRealStyleApi, toColorPaletteApi, toSceneCompositionApi, sketchAddPrintApi, sketchToThreeApi, threeToThreeViewsApi, toRealVariantsApi } from '@/api/flow-canvas'

	// import ToVideo from './to-video.vue'
	// import AddPrint from './add-print.vue'
	// import ToCAD from './to-cad.vue'
	const { t } = useI18n()
	const attrs = useAttrs()
	const componentRef = ref(null)
	const components = [
		{
			tier: NODE_DATATIER.CARDS_SELECT,
			type: NODE_DATATYPE.CARDS_SELECT,
			title: t('FlowCanvas.selectCardsTitle'),
			component: CardsSelect,
			hideFooter: true,
			hideIcon: true,
		},
		{
			tier: NODE_DATATIER.TO_REAL_STYLE,
			type: NODE_DATATYPE.TO_REAL_STYLE,
			title: t('FlowCanvas.toRealStyleTitle'),
			component: ToRealStyle,
			api: toRealStyleApi
		},
		{
			tier: NODE_DATATIER.TO_REAL_VARIANTS,
			type: NODE_DATATYPE.TO_REAL_VARIANTS,
			title: t('FlowCanvas.toRealVariantsTitle'),
			component: ToRealVariants,
			api: toRealVariantsApi
		},
		{
			tier: NODE_DATATIER.Fast_MODE,
			type: NODE_DATATYPE.Fast_MODE,
			title: t('FlowCanvas.surfaceEditTitle'),
			component: SurfaceEdit,
			api: sketchAddPrintApi
		},
		{
			tier: NODE_DATATIER.CANVAS_MODE,
			type: NODE_DATATYPE.CANVAS_MODE,
			title: t('FlowCanvas.surfaceEditCanvasTitle'),
			component: FastMode,
			hideFooter: true,
			showCanvasEdit: true,
			on: ()=>{
				componentRef.value?.opCanvas(0)
			}
		},
		{
			tier: NODE_DATATIER.Fast_MODE_,
			type: NODE_DATATYPE.Fast_MODE_,
			title: t('FlowCanvas.surfaceEditTitle'),
			component: SurfaceEdit,
			api: sketchAddPrintApi
		},
		{
			tier: NODE_DATATIER.CANVAS_MODE_,
			type: NODE_DATATYPE.CANVAS_MODE_,
			title: t('FlowCanvas.surfaceEditCanvasTitle'),
			component: FastMode,
			hideFooter: true,
			showCanvasEdit: true,
			on: ()=>{
				componentRef.value?.opCanvas(1)
			}
		},
		{
			tier: NODE_DATATIER.SCENE_COMPOSITION,
			type: NODE_DATATYPE.SCENE_COMPOSITION,
			title: t('FlowCanvas.sceneCompositionTitle'),
			component: SceneComposition,
			api: toSceneCompositionApi
		},
		{
			tier: NODE_DATATIER.COLOR_PALETTE,
			type: NODE_DATATYPE.COLOR_PALETTE,
			title: t('FlowCanvas.colorPaletteTitle'),
			component: ColorPalette,
			api: toColorPaletteApi
		},
		{
			tier: NODE_DATATIER.TO_3D_MODEL,
			type: NODE_DATATYPE.TO_3D_MODEL,
			title: t('FlowCanvas.to3DModelTitle'),
			component: To3DModel,
			api:sketchToThreeApi
		},
		{
			tier: NODE_DATATIER.TO_3VIEW,
			type: NODE_DATATYPE.TO_3VIEW,
			title: t('FlowCanvas.to3ViewTitle'),
			component: To3View,
			api:threeToThreeViewsApi
		}
	]
	const nodeManager = inject('nodeManager') as any
	const stateManager = inject('stateManager') as any
	const emit = defineEmits(['update-data'])
	const props = defineProps({
		type: {
			type: String as () =>
				| 'cards-select'
				| 'to-real-style'
				| 'surface-edit'
				| 'scene-composition'
				| 'color-palette'
				| 'to-3d-model'
				| 'to-3view',
			default: 'to-real-style'
		},
		sketchId: {
			type: String,
			default: ''
		},
		data: {
			type: Object,
			default: () => ({})
		}
	})
	const currentComponent = computed(() => {
		return components.find((item) => item.type === props.type)
	})
	
	const onGenerateClick = async () => {
		const data = componentRef.value?.getApiData?.() || {}
		const subordNodes = stateManager.getSubordNodes(attrs.node.id)
		const maxPosition = subordNodes.length == 0?0:(subordNodes[subordNodes.length - 1].data.createIndexPosition + 1)
		const superiorNodeUrl =  stateManager.getSuperiorNodeImage(attrs.node.data.superiorID)
		if(!superiorNodeUrl)return console.log('superiorNodeUrl 找不到原始图片')
		emit('update-data', componentRef.value?.data)
		const apiData = {
			sketchId: props.sketchId,
			imageUrl: superiorNodeUrl,
			...data,
		}
		const taskList = await currentComponent.value.api(apiData).then((rv)=>{
			return rv
		}) || []
		// const taskList = [{taskId:'123'}]
		// if (!subordNode) {
		
		//如果是添加印花的结果就作为一级节点可以再次选择添加印花或者生成真实图
		let typeList = [
			NODE_DATATYPE.Fast_MODE,
			NODE_DATATYPE.CANVAS_MODE,
			NODE_DATATYPE.SCENE_COMPOSITION,
			NODE_DATATYPE.COLOR_PALETTE,
			NODE_DATATYPE.Fast_MODE_,
			NODE_DATATYPE.CANVAS_MODE_,
		]
		let tritList = [
			NODE_DATATIER.Fast_MODE,
			NODE_DATATIER.CANVAS_MODE,
			NODE_DATATIER.SCENE_COMPOSITION,
			NODE_DATATIER.COLOR_PALETTE,
			NODE_DATATIER.Fast_MODE_,
			NODE_DATATIER.CANVAS_MODE_,
		]
		let tier = (tritList.includes(currentComponent.value.tier) && typeList.includes(currentComponent.value.type))?currentComponent.value.tier - 1:currentComponent.value.tier
		if(NODE_DATATYPE.TO_REAL_STYLE == currentComponent.value.type && false){
			//一个结果节点里面多个子节点
			let imageProcessTasks = taskList
			nodeManager.createResultNode({
				data: {
					superiorID: attrs.node.id,
					superiorNodeType: attrs.node?.data?.type,
					createIndexPosition: subordNodes.length,
					tier: tier,
					isActive: subordNodes.length == 0,
					data: {
						imageProcessTasks,
						selectTaskId:imageProcessTasks[0].taskId,
					}
				}
			})
		}else{
			taskList.forEach((item,index) => {
				nodeManager.createResultNode({
					data: {
						superiorID: attrs.node.id,
						superiorNodeType: attrs.node?.data?.type,
						superiorGenerateImg: superiorNodeUrl || null,
						createIndexPosition: index + maxPosition,
						tier: tier,
						isActive: index == 0 && subordNodes.length == 0,
						data: {
							imageProcessTasks:[item],
							selectTaskId:item.taskId,
						}
					}
				})
			})
		}
	}
	//删除功能卡片
	const onDeleteClick = async ()=>{
		console.log(stateManager.nodes)
		stateManager.deleteSubordinateAllNodes(attrs.node.id,{ isElMessageBox: true })
	}
	const setDate = () => {
		for (const key in props.data) {
			if (componentRef.value?.data?.hasOwnProperty(key)) {
				componentRef.value.data[key] = props.data[key]
			}
		}
	}
	watch(
		() => props.data,
		(newVal) => {
			setDate()
		}
	)
	onMounted(() => {
		setDate()
	})
</script>

<style lang="less" scoped>
	.card {
		width: 244px;
		height: auto;
		--border-radius: 16px;
		border-radius: var(--border-radius);
		background-color: #fff;
		box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		&.active {
			box-shadow: 0 15px 21px 0 rgba(0, 0, 0, 0.05), 0 0 0 2px #fae5d8;
		}
		> .header {
			border-radius: var(--border-radius) var(--border-radius) 0 0;
			height: 50px;
			background: #ff7a51;
			display: flex;
			align-items: center;
			padding: 0 16px;
			position: relative;
			user-select: none;
			> .delete-icon {
				margin-left: auto;
				cursor: pointer;
			}
			> .c-svg {
				width: auto;
				height: auto;
				margin-right: 6px;
			}
			> span {
				font-family: Semibold;
				font-size: 16px;
				color: #fff;
			}
		}
		> .body {
			cursor: initial;
			padding: 16px 13px;
			&:deep(> *) {
				width: 100%;
				> * {
					margin-bottom: var(--cards-item-margin-bottom, 10px);
					&:last-child {
						margin-bottom: 0;
					}
				}
				> .label {
					font-size: 12px;
					font-family: Medium;
					color: #000;
				}
			}
		}
		> .footer {
			cursor: initial;
			display: flex;
			flex-direction: row-reverse;
			padding: 0 13px;
			padding-bottom: 16px;
			> button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 110px;
				height: 28px;
				border-radius: 5px;
				background-color: #fffcf4;
				border: 1px solid #ffcf90;
				font-size: 12px;
				font-family: SemiBold;
				cursor: pointer;
				
				&:active {
					opacity: 0.5;
				}
				> .c-svg {
					width: auto;
					height: auto;
					margin-right: 4px;
				}
			}
			&.canvasEdit{
				> button{
					margin: 0 8px;
					width: 201px;
				}
			}
		}
	}
</style>
