<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef, nextTick } from "vue";
import { useI18n } from 'vue-i18n'

import gsap from 'gsap';
import * as THREE from 'three';
import { ThreeManager } from './threeTool'

//const props = defineProps({
//})
//const emit = defineEmits([
//])

const threeDom = ref()//threeDom元素
//加载进度
const load = ref({
	state:false,
	progress:0
})
let threeModel = null

const setModel = async (url:any)=>{
	await threeModel.setModel(url,load)
}
const open = (url)=>{
	load.value.state = true
	nextTick(async ()=>{
		threeModel = new ThreeManager(threeDom.value)
		await threeModel.setHDRI()
		await setModel(url)
		load.value.state = false
		threeModel.operation()
	})
	
}

const captureView = ()=>{
	return threeModel.exportAsImage()
}

onMounted(()=>{
})
onUnmounted(()=>{
	console.log('onUnmounted')
	threeModel.disposeModel()
	threeModel = null
})
defineExpose({open,captureView})
</script>
<template>
	<div class="modelBox">
		<div class="model" ref="threeDom">
		</div>
		<div class="icon" v-show="!load.state">
			<SvgIcon name="threeLogo" size="40" size-unit="px" />
		</div>
		<div class="load" v-show="load.state">
			<i class="fi fi-rr-cubes"></i>
			<div class="text">
				<img src="@/assets/images/threeLoading.png" alt="">
				{{ $t('threeModel.loading') }}
			</div>
			<div class="loadBox">
				<div class="schedule" :style="{width:load.progress+'%'}"></div>
			</div>
		</div>
	</div>
	
</template>
<style lang="less" scoped>
	.modelBox{
		width: 100%;
		height: 100%;
		position: relative;
		>.model{
			width: 100%;
			height: 100%;
			position: relative;
			background-color: #f5f5f5;
			border-radius: 1rem;
			border: 1px solid #D9D9D9;
			overflow: hidden;
		}
		> .icon{
			position: absolute;
			bottom: 2.4rem;
			right: 2.4rem;
		}
		> .load{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: #e6e6e6;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #fff;
			> .text{
				font-weight: 500;
				font-size: 1.8rem;
				line-height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #747474;
				> img{
					margin-right: 1rem;
				}
			}
			> i{
				font-size: 3rem;
			}
			> .loadBox{
				width: 26rem;
				height: 1rem;
				border-radius: 3.3rem;
				background: #fff;
				overflow: hidden;
				margin-top: 1.2rem;
				> .schedule{
					height: 100%;
					border-radius: 3.3rem;
					background: #848484;
				}
			}
		}
	}
	
</style>