<template>
	<!-- 转3-View -->
	<div class="to-3view">
		<p class="label">{{ $t('FlowCanvas._3DModel') }}</p>
		<div class="image">
			<img :src="data.url" alt="">
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive, useAttrs, inject, computed } from 'vue'
	const attrs = useAttrs()
	const stateManager = inject('stateManager') as any
	const data = reactive({
		url: computed(()=>stateManager.getSuperiorNodeImage(attrs.node?.data?.superiorID)),
		})
	const getApiData = ()=>{
		let glbUrl = null
		const superiorNode = stateManager.nodes.value.filter((item:any)=>item.id === attrs.node?.data?.superiorID)[0]
		const nodeData:any = superiorNode?.data?.data
		glbUrl = nodeData.imageProcessTasks.filter((item:any)=>item.taskId === nodeData.selectTaskId)[0]?.glbPath
		return {
			glbUrl: glbUrl,
		}
	}
	defineExpose({ data,getApiData })
</script>

<style lang="less" scoped>
	.to-3view {
		> .image {
			padding: 18px;
			border-radius: 10px;
			background-color: #f0f0f0;
			>img{
				width: 100%;
				height: auto;
			}
		}
	}
</style>
