<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { downloadImage } from '../../../../tools/tools'
const props = defineProps({
	config: {
		type: Object,
		default: () => ({})
	}
})
//const emit = defineEmits([
//])
let data = reactive({
})
const onDownload = () => {
	if(props?.config?.glbPath)downloadImage(props?.config?.glbPath, 'model.glb')
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="modalDetail">
		<div class="title">
			Properties Information
		</div>
		<div class="detail">
			<div class="name">
				<div class="title fs18">
					Sofa
				</div>
				<div class="fs14 c66">
					Model Name
				</div>
			</div>
			<div class="fs14 c18">
				Transform
			</div>
			<div class="flex">
				<div>
					<div class="fs14 c18">X</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.centroid?.[0].toFixed(2) || 0 }}</div>
				</div>
				<div>
					<div class="fs14 c18">Y</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.centroid?.[1].toFixed(2) || 0 }}</div>
				</div>
				<div>
					<div class="fs14 c18">Z</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.centroid?.[2].toFixed(2) || 0 }}</div>
				</div>
			</div>
			<div class="fs14 c18">
				Dimensions
			</div>
			<div class="flex">
				<div>
					<div class="fs14 c18">Height</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.size?.[0].toFixed(2) || 0 }}</div>
				</div>
				<div>
					<div class="fs14 c18">Width</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.size?.[1].toFixed(2) || 0 }}</div>
				</div>
				<div>
					<div class="fs14 c18">Depth</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.size?.[2].toFixed(2) || 0 }}</div>
				</div>
			</div>
		</div>
		<div class="download" @click="onDownload">{{ $t('threeModel.download') }}</div>
	</div>
</template>
<style lang="less" scoped>
	.modalDetail{
		width: 100%;
		height: 100%;
		position: relative;
		> .title{
			margin: 2.4rem 0;
			font-weight: 500;
			font-size: 2rem;
			line-height: 2.7rem;
			color: #000;
		}
		> .download{
			margin-left: 4.2rem;
			margin-top: 24.8rem;
			line-height: 3rem;
			width: 20rem;
			border-radius: 1.5rem;
			color: #fff;
			background-color: #ff7a51;
			font-weight: 600;
			font-style: Semibold;
			font-size: 1.2rem;
			text-align: center;
			cursor: pointer;
		}
		> .detail{
			> .name{
				> .title{
					margin-bottom: .4rem;
				}
			}
			> .flex{
				display: flex;
				> div{
					margin-right: 4.8rem;
					:last-child{
						margin-top: .2rem;
					}
					&:last-child{
						margin-right: 0;
					}
				}
			}
			> div{
				font-weight: 500;
				margin-bottom: 2.4rem;
				&:last-child{
					margin-bottom: 0rem;
				}
			}
			.fs18{
				font-size: 1.8rem;
				color: #000;
			}
			.fs12{
				font-size: 1.2rem;
			}
			.fs14{
				font-size: 1.4rem;
			}
			.c18{
				color: #181818;
			}
			.c66{
				color: #666666;
			}
		}

	}
</style>