<template>
	<div class="card">
		<div class="header">
			<svg-icon
				v-if="!currentComponent?.hideIcon"
				:name="currentComponent?.type"
				color="#fff"
				size="16"
				size-unit="px"
			/>
			<span>{{ 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>Generate</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 SurfaceEdit from './surface-edit.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 ToVideo from './to-video.vue'
	// import AddPrint from './add-print.vue'
	// import ToCAD from './to-cad.vue'
	const components = [
		{
			tier: NODE_DATATIER.CARDS_SELECT,
			type: NODE_DATATYPE.CARDS_SELECT,
			title: 'Advanced Tools',
			component: CardsSelect,
			hideFooter: true,
			hideIcon: true
		},
		{
			tier: NODE_DATATIER.TO_REAL_STYLE,
			type: NODE_DATATYPE.TO_REAL_STYLE,
			title: 'To Real Style',
			component: ToRealStyle
		},
		{
			tier: NODE_DATATIER.SURFACE_EDIT,
			type: NODE_DATATYPE.SURFACE_EDIT,
			title: 'Surface Edit',
			component: SurfaceEdit
		},
		{
			tier: NODE_DATATIER.SCENE_COMPOSITION,
			type: NODE_DATATYPE.SCENE_COMPOSITION,
			title: 'Scene Composition',
			component: SceneComposition
		},
		{
			tier: NODE_DATATIER.COLOR_PALETTE,
			type: NODE_DATATYPE.COLOR_PALETTE,
			title: 'Color Palette',
			component: ColorPalette
		},
		{
			tier: NODE_DATATIER.TO_3D_MODEL,
			type: NODE_DATATYPE.TO_3D_MODEL,
			title: 'To 3D Model',
			component: To3DModel
		},
		{
			tier: NODE_DATATIER.TO_3VIEW,
			type: NODE_DATATYPE.TO_3VIEW,
			title: 'To 3-View',
			component: To3View
		}
	]
	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'
		},
		data: {
			type: Object,
			default: () => ({})
		}
	})
	const attrs = useAttrs()
	const currentComponent = computed(() => {
		return components.find((item) => item.type === props.type)
	})
	const componentRef = ref(null)
	const onGenerateClick = () => {
		const data = componentRef.value.data
		const subordNode = stateManager.getSubordNodeByID(attrs.node.id)
		emit('update-data', data)
		if (!subordNode) {
			nodeManager.createResultNode({
				data: {
					superiorID: attrs.node.id,
					tier: currentComponent.value.tier,
					data: {
						url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
					}
				}
			})
		} else {
			subordNode.data.data.url =
				'https://s3-alpha-sig.figma.com/img/8ce2/f1a4/12b93da90e5f17109e7430f14837fd14?Expires=1773619200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=kmLsTFtXJqfvuxj6husWlDkRDMOIRDjzUUjb7zh79GkBKihUHc0f59k5OAImHTPdaiEREUCCpn~8sQ-si5lenuauJpApCmAU~NsxjfQhuh9m5O~GiHenr2fKu0DIJ75-oCE3859fyxoSFXQgZ9PRmeb98kikMR6uRX9nI5TPUHgKO8ZgkhDBTW~iyaDT~1ybnoK7elPa6T2VzfO-bpIyY-MZ71VRq3RxwmZRxduqHEb3Dh-jjrHyh2SoQsHmUjSJOf-uYilfvpGUResZAjAq8ZVLEjvhzKC2bmCNZIp3RmhYO8ctU7pd5t91J6Xaa6jBLtGfMxbqIm652EC79K0RoA__'
			setTimeout(() => stateManager.recordState())
		}
	}
	//删除功能卡片
	const onDeleteClick = ()=>{
		stateManager.deleteNode(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;
				}
			}
		}
	}
</style>
