<template>
	<!-- 转3D模型 -->
	<div class="to-3d-model">
		<p class="label">{{ $t('FlowCanvas.image') }}</p>
		<div class="image">
			<img :src="data.url" alt="">
		</div>
		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
		<my-select v-model="data.mode" :list="modeList" />
	</div>
</template>

<script setup lang="ts">
	import { reactive, inject, useAttrs, computed,ref } from 'vue'
	import uploadFile from '../../tools/upload-file.vue'
	import mySelect from '../../tools/my-select.vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const attrs = useAttrs()
	const stateManager = inject('stateManager') as any
	const data = reactive({
		url: stateManager.getSuperiorNodeImage(attrs.node?.data?.superiorID),
		mode: 'Normal',
	})
	const modeList = ref([
		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
		{ value: 'Normal', label: t('FlowCanvas.normalMode') }
	])
	const getApiData = ()=>{
		return {
			imageUrls: [data.url],
			mode: data.mode,
		}
	}
	defineExpose({ data,getApiData })
</script>

<style lang="less" scoped>
	.to-3d-model {
		> .image {
			padding: 6px;
			border-radius: 10px;
			background-color: #f0f0f0;
			>img{
				width: 100%;
				height: auto;
				max-height: 87px;
				object-fit: contain;
			}
		}
	}
</style>
