<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([
	'captureView'
])
let data = reactive({
})
const onDownload = () => {
	if(props?.config?.glbPath)downloadImage(props?.config?.glbPath, 'model.glb')
}
const captureView = ()=>{
	emit('captureView')
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="modalDetail">
		<div class="title">{{ $t('threeModel.propertiesInformation') }}</div>
		<div class="detail">
			<div class="name">
				<div class="title fs18">{{ $t('threeModel._3DAsset') }}</div>
				<div class="fs14 c66">{{ $t('threeModel.fileFormat') }}</div>
			</div>
			<div class="fs14 c18">{{ $t('threeModel.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">{{ $t('threeModel.dimensions') }}</div>
			<div class="flex">
				<div>
					<div class="fs14 c18">{{ $t('threeModel.height') }}</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.size?.[0].toFixed(2) || 0 }}</div>
				</div>
				<div>
					<div class="fs14 c18">{{ $t('threeModel.width') }}</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.size?.[1].toFixed(2) || 0 }}</div>
				</div>
				<div>
					<div class="fs14 c18">{{ $t('threeModel.depth') }}</div>
					<div class="fs12 c66">{{ config?.glbInfoObj?.size?.[2].toFixed(2) || 0 }}</div>
				</div>
			</div>
		</div>
		<div class="captureView" @click="captureView">
			<div class="icon">
				<svgIcon name="captureView" size="12" />
			</div>
			{{ $t('threeModel.captureView') }}
		</div>
		<!-- <div class="download" @click="onDownload">{{ $t('threeModel.download') }}</div> -->
	</div>
</template>
<style lang="less" scoped>
	.modalDetail{
		width: 22rem;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		> .title{
			margin: 2.4rem 0;
			font-weight: 500;
			font-size: 2rem;
			line-height: 2.7rem;
			color: #000;
		}
		> .captureView ,
		> .download{
			transform: translateX(calc(13rem / 2));
			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;
		}
		> .captureView{
			margin-top: 6.4rem;
			display: flex;
			justify-content: center;
			gap: .7rem;
		}
		> .download{
			margin-top: 15.4rem;
		}
		> .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>