<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import VersionDetail from './versionDetail.vue'
import ChatHistory from './chatHistory.vue'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const detailData = ref({
	id:1,
	versionDetail:{
		version:'1.0.0',
		versionTime:'2023-08-01 10:00:00',
		versionSketch:'Version 1 - Sketch',
		versionSketchTime:'2023-08-01 10:00:00',
	},
	userChatHistory:{

	}
	

})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
// const {} = toRefs(data);
</script>
<template>
	<div class="detailBox">
		<div class="versionDetail">
			<VersionDetail :versionDetail="detailData.versionDetail"></VersionDetail>
		</div>
		<div class="useInput">
			<ChatHistory type="user"></ChatHistory>
		</div>
		<div class="systemInput">
			<ChatHistory type="robot"></ChatHistory>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.detailBox{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		> div{
			border-radius: var(--border-radius, 1rem);
			border: 1px solid #D9D9D9;
			background-color: #f7f7f7;
			margin-bottom: 3.6rem;
			padding: 1.5rem 1.4rem;
			width: 100%;
			&.versionDetail{
				height: 21rem;
			}
			&.useInput{
				height: 21.5rem;
			}
			&.systemInput{
				flex: 1;
			}
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>