<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import threeGlb from '@/assets/images/three/sample.glb'

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

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

const modelRef = ref(null)
onMounted(()=>{
	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" :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{
			width: 22rem;
			height: 100%;
		}
	}
</style>