<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
const props = defineProps({
	versionDetail: {
		type: Object,
		default: () => ({
			version:'1.0.0',
			nodeCreateTime:'',
			versionSketch:'Version 1 - Sketch',
			nodeSketchTime:'2023-08-01 10:00:00',
		})
	}
})
const emit = defineEmits([
	'versionRestore',
	'versionDelete',
])
let data = reactive({
})

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="versionDetail">
		<div class="title">
			<span class="titleText">
				{{ $t('VersionTree.versionInformation') }}
			</span>
		</div>
		<div class="version">{{versionDetail.version || '1.0.0'}}</div>
		<div class="time marBott1">{{ new Date(versionDetail.nodeCreateTime * 1000).toLocaleString() }}</div>
		<div class="version gray">{{versionDetail.versionSketch || 'Version 1 - Sketch'}}</div>
		<div class="time gray">{{ new Date(versionDetail.nodeSketchTime * 1000).toLocaleString() }}</div>
	</div>
</template>
<style lang="less" scoped>
	.versionDetail{
		width: 100%;
		height: 100%;
		position: relative;
		> .title{
			line-height: 3.2rem;
			font-size: 1.4rem;
			color: #000;
			display: flex;
			justify-content: space-between;
			height: 3.2rem;
			margin-bottom: 2rem;
			> .titleText{
				opacity: .5;
				font-weight: 600;
				font-family: 'SemiBold';
			}
		}
		> .version{
			font-family: 'SemiBold';
			font-weight: 600;
			font-size: 1.4rem;
			margin-bottom: .2rem;
			line-height: 2rem;
		}
		> .marBott1{
			margin-bottom: 1.2rem;
		}
		> .time{
			font-weight: 500;
			font-size: 1.2rem;
			line-height: 2rem;
		}
		> .gray{
			color: #C1C1C1;
		}
	}
</style>