<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import threeGlb from '@/assets/images/three/sample.glb'
import { uploadImage } from '@/api/upload'
import { base64Tofile } from '@/components/Canvas/tools/tools'
import { ElMessage } from 'element-plus'

import model from './model.vue'
import detail from './detail.vue'

const props = defineProps({
	currentData: {
		type: Object,
		default: () => ({})
	}
})
const emit = defineEmits([
	'captureView'
])
let data = reactive({
})

const modelRef = ref(null)
const captureView = async ()=>{
	let url = modelRef.value.captureView()

	const file = base64Tofile(url, 'canvas.png')
	const formData = new FormData()
	formData.append('file', file)
	const minioUrl = await uploadImage(formData, true)
	ElMessage.warning('Your new view has been captured.')	
	emit('captureView', {
		minioUrl,
		nodeId: props?.currentData?.nodeId,
		nodeType: props?.currentData?.nodeType,
		superiorGenerateImg: props?.currentData?.superiorGenerateImg,
	})
}
onMounted(()=>{
	// modelRef.value.open(threeGlb)
	if(props?.currentData?.glbPath)modelRef.value.open(props?.currentData?.glbPath)
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="three-model">
		<div class="modelBox">
			<model ref="modelRef" />
		</div>
		<div class="detailBox">
			<detail ref="detailRef" @captureView="captureView" :config="currentData" />
		</div>
	</div>
</template>
<style lang="less" scoped>
	.three-model{
		width: 100%;
		height: 100%;
		position: relative;
		padding: 6.7rem 13rem;
		display: flex;
		justify-content: space-between;
		> .modelBox{
			height: 100%;
			width: 65.5rem;
		}
		> .detailBox{
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
		}
	}
</style>