<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import VersionDetail from './versionDetail.vue'
import ChatDetail from './chatDetail.vue'
import { useProjectStore, useVersionTreeStore } from '@/stores'
import { getChatNodeDetail, getNodeAncestors } from '@/api/versitonTree'

//const props = defineProps({
//})
const emit = defineEmits([
])

const projectStore = useProjectStore()
const versiontreeStore = useVersionTreeStore()

const detailData = ref({
	chatEndDetail:computed(()=>{
		return versiontreeStore.state.nodeDetail
	}),
	loading:false,
})

watch(()=>projectStore.state.nodeId, (newVal, oldVal) => {
	if(newVal){
		detailData.value.loading = true
		let nodeSketchTime = ''
		getChatNodeDetail({
			projectId: projectStore.state.id,
			id: newVal
		}).then((res:any) => {
			let userEndChat = {
				content:'',
				createTime:'',
				image_url:'',
			}
			let generateEndChat = {
				content:'',
				createTime:'',
				image_url:'',
			}
			res.dialogue.forEach(item => {
				if(item.role == 'user'){
					if(item.content){
						userEndChat.content += item.content
						userEndChat.createTime = item.createTime
					}
				}else if(item.role == "assistant"){
					if(item.content){
						generateEndChat.content += item.content
						generateEndChat.createTime = item.createTime
						if(item.image_url){
							generateEndChat.image_url = item.createTime
							nodeSketchTime = item.createTime
						}
					}
				}
			})
			versiontreeStore.setNodeDetail({
				nodeSketchTime,
				nodeCreateTime:res.createTime,
				userEndChat,
				generateEndChat
			})
			detailData.value.loading = false
		})

		// getNodeAncestors({
		// 	projectId: projectStore.state.id,
		// 	id: newVal
		// }).then(res => {
		// 	console.log(res)
		// })
	}
},{ immediate: true })
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
// const {} = toRefs(data);
</script>
<template>
	<div class="detailBox">
		<div class="versionDetail">
			<VersionDetail 
				:versionDetail="detailData.chatEndDetail"
			></VersionDetail>
		</div>
		<div class="useInput">
			<ChatDetail type="user" :chatDetail="detailData.chatEndDetail.userEndChat"></ChatDetail>
		</div>
		<div class="systemInput">
			<ChatDetail type="robot" :chatDetail="detailData.chatEndDetail.generateEndChat"></ChatDetail>
		</div>
		<div class="loading" v-if="detailData.loading" v-loading="true"></div>
	</div>
</template>
<style lang="less" scoped>
	.detailBox{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		> .loading{
			position: absolute;
			z-index: 999999999;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		> .versionDetail,> .useInput,> .systemInput{
			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>