<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: () => ({})
	}
})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="versionDetail">
		<div class="title">
			<span class="titleText">
				{{ $t('VersionTree.versionInformation') }}
			</span>
			<span class="icon"><svg-icon name="more" size="25" /></span>
		</div>
		<div class="version">{{versionDetail.version}}</div>
		<div class="time marBott1">{{versionDetail.versionTime}}</div>
		<div class="version gray">{{versionDetail.versionSketch}}</div>
		<div class="time gray">{{versionDetail.versionSketchTime}}</div>
	</div>
</template>
<style lang="less" scoped>
	.versionDetail{
		width: 100%;
		height: 100%;
		position: relative;
		> .title{
			line-height: 2rem;
			font-size: 1.4rem;
			color: #000;
			display: flex;
			justify-content: space-between;
			height: 2rem;
			margin-bottom: 2.8rem;
			> .titleText{
				opacity: .5;
				font-weight: 600;
				font-family: 'SemiBold';
			}
			> .icon{
				color: #5a5a5a;
			}
		}
		> .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>