<template>
	<view class="chat-container" @touchend="handleTouchEnd">
		<!-- 顶部的背景 -->
		<ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
		
		<view class="chat-content">
			<!-- 顶部自定义导航栏 -->
			<view class="nav-bar-container" :style="{
			    paddingTop: statusBarHeight + 'px',
			  }">
			  <ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
			</view>
			
			<!-- 消息列表（可滚动区域） -->
			<scroll-view
			  :scroll-top="scrollTop"
			  scroll-y
			  :scroll-with-animation="true"
			  class="area-msg-list"
			>
			<!-- welcome栏 -->
			<ChatTopWelcome class="chat-container-top-bannar" 
			:initPageImages="mainPageDataModel.initPageImages"
			:welcomeContent="mainPageDataModel.welcomeContent">
			</ChatTopWelcome>
			
			  <view class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">				  
				  <template v-if="item.msgType === MessageRole.AI">
						<ChatCardAI class="message-item-ai" :text="item.msg">
							<template #content v-if="item.toolCall">								
								<QuickBookingComponent v-if="item.toolCall.componentName === CompName.quickBookingCard"/>
								<DiscoveryCardComponent v-else-if="item.toolCall.componentName === CompName.discoveryCard"/>
								<CreateServiceOrder v-else-if="item.toolCall.componentName === CompName.createWorkOrderCard"/>
							</template>
							<template #footer >
								<!-- 这个是底部 -->
								<AttachListComponent v-if="item.question" :question="item.question" @replySent="handleReply"/>
							</template>
						</ChatCardAI>			  
				  </template>
				  
				  <template v-else-if="item.msgType === MessageRole.ME">
					  <ChatCardMine class="message-item-mine" :text="item.msg">
					  </ChatCardMine>  
				  </template>
				  
				  <template v-else>
					  <ChatCardOther class="message-item-other" :text="item.msg">
						  <ChatMoreTips @replySent="handleReply" :itemList="mainPageDataModel.guideWords"/>

						  <ActivityListComponent v-if="mainPageDataModel.activityList.length > 0" :activityList="mainPageDataModel.activityList"/>
				
						  <RecommendPostsComponent v-if="mainPageDataModel.recommendTheme.length > 0" :recommendThemeList="mainPageDataModel.recommendTheme" />
					  </ChatCardOther>
				  </template>	 
			  </view>
			  
			</scroll-view>
				
			<!-- 输入框区域 -->
			<view class="footer-area">
				<ChatQuickAccess @replySent="handleReplyInstruct"/>
				<ChatInputArea
					v-model="inputMessage"
				    :holdKeyboard="holdKeyboard"
				    @send="sendMessageAction"
				    @noHideKeyboard="handleNoHideKeyboard"
				  />
			</view>
		</view>
	</view>
</template>

<script setup >
	import { onMounted, nextTick } from 'vue'
	import { ref } from 'vue'
	import { defineEmits } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { SCROLL_TO_BOTTOM, RECOMMEND_POSTS_TITLE } from '@/constant/constant' 
	import { MessageRole, MessageType, CompName } from '../../model/ChatModel';

	import ChatTopWelcome from './ChatTopWelcome.vue';
	import ChatTopBgImg from './ChatTopBgImg.vue';
	import ChatTopNavBar from './ChatTopNavBar.vue';
	import ChatCardAI from './ChatCardAI.vue';
	import ChatCardMine from './ChatCardMine.vue';
	import ChatCardOther from './ChatCardOther.vue';
	import ChatQuickAccess from './ChatQuickAccess.vue';
	import ChatMoreTips from './ChatMoreTips.vue';
	import ChatInputArea from './ChatInputArea.vue'
	import CommandWrapper from '@/components/CommandWrapper/index.vue'
	
	import QuickBookingComponent from '../module/booking/QuickBookingComponent.vue'
	import DiscoveryCardComponent from '../module/discovery/DiscoveryCardComponent.vue';
	import ActivityListComponent from '../module/banner/ActivityListComponent.vue';
	import RecommendPostsComponent from '../module/recommend/RecommendPostsComponent.vue';
	import AttachListComponent from '../module/attach/AttachListComponent.vue';
	
	import CreateServiceOrder from '@/components/CreateServiceOrder/index.vue'
	
	import { agentChatStream } from '@/request/api/AgentChatStream';
	import { mainPageData } from '@/request/api/MainPageDataApi';
	import { conversationMsgList, recentConversation } from '@/request/api/ConversationApi';

	
		
	/// 导航栏相关
	const statusBarHeight = ref(20);
	
	const timer = ref(null)
	/// focus时，点击页面的时候不收起键盘
	const holdKeyboard = ref(false) 
	/// 是否在键盘弹出，点击界面时关闭键盘
	const holdKeyboardFlag = ref(true) 
	
	///（控制滚动位置）
	const scrollTop = ref(99999);
	
	/// 会话列表
	const chatMsgList = ref([])
	/// 输入口的输入消息
	const inputMessage = ref('')
	
	/// 从个渠道获取如二维，没有的时候就返回首页的数据
	const sceneId = ref('')
	/// agentId 首页接口中获取
	const agentId = ref('1')
	/// 会话ID 历史数据接口中获取
	const conversationId = ref('')
	/// 首页的数据
	const mainPageDataModel = ref({})

	// 会话进行中标志
	let isSessionActive = false; 
	/// 指令
	let commonType = ''
	
	
	// 打开抽屉
	const emits = defineEmits(['openDrawer'])
	const openDrawer = () => {
		emits('openDrawer')
		console.log('=============打开抽屉')
	}

	const handleTouchEnd = () => {
		// #ifdef MP-WEIXIN
		clearTimeout(timer.value)
		timer.value = setTimeout(() => {
			// 键盘弹出时点击界面则关闭键盘
			if (handleNoHideKeyboard) {
				uni.hideKeyboard()
			}
			holdKeyboardFlag.value = true
		}, 50)
		// #endif
	}
	
	// 点击输入框、发送按钮时，不收键盘
	const handleNoHideKeyboard = () => {
	  // #ifdef MP-WEIXIN
	  holdKeyboardFlag.value = false
	  // #endif
	}

	/// 滚动到底部
	const scrollToBottom = () => {
	    nextTick(() => {
			nextTick(() => {
				scrollTop.value += 9999;
			});
		});
	}
	/// 延迟在滚到底
	const setTimeoutScrollToBottom = () => {
	    setTimeout(() => {
	    	scrollToBottom()
	    }, 100)
	}
	
	/// 发送普通消息
	const handleReply = (text) => {
	  sendMessage(text)
	  setTimeoutScrollToBottom()
	};

	/// 是发送指令
	const handleReplyInstruct = (item) => {
		if(item.type === 'MyOrder') {
			/// 订单
			uni.navigateTo({
				url: '/pages/order/list'
			})
			return
		}
		commonType = item.type
		sendMessage(item.title, true)
		setTimeoutScrollToBottom()
	}

	///  输入区的发送消息事件
	const sendMessageAction = (inputText) => {
		console.log("输入消息:", inputText)
		if (!inputText.trim()) return;
		handleNoHideKeyboard()
		sendMessage(inputText)
		if(!isSessionActive) {
			inputMessage.value = ''
		}
		setTimeoutScrollToBottom()
	}

	onLoad(() => {
	  uni.getSystemInfo({
	    success: (res) => {
	      statusBarHeight.value = res.statusBarHeight || 20;
	    }
	  });
	});
	
	onMounted( async() => {
	 	getMainPageData()
		await loadRecentConversation()
		loadConversationMsgList()
		addNoticeListener()
	})
	
	const addNoticeListener = () => {
		uni.$on(SCROLL_TO_BOTTOM, (value) => {
			setTimeout(() => {
				scrollToBottom()
			}, 200)
		})

		uni.$on(RECOMMEND_POSTS_TITLE, (value) => {
			console.log('RECOMMEND_POSTS_TITLE:', value)
			if(value && value.length > 0) {
				handleReply(value)
			}
		})
	}
	
	/// 获取最近一次的会话id
	const loadRecentConversation = async() => {
		const res = await recentConversation()
		if(res.code === 0) {
			conversationId.value = res.data.conversationId
		}
	}
	
	/// 加载历史消息的数据
	let historyCurrentPageNum = 1
	const loadConversationMsgList = async() => {
		const args = { pageNum: historyCurrentPageNum++, pageSize : 10, conversationId: conversationId.value }
		const res = await conversationMsgList(args)
	}

	/// 获取首页数据
	const getMainPageData = async() => {
		const res = await mainPageData(sceneId.value)
		if(res.code === 0) {
			mainPageDataModel.value = res.data
			agentId.value = res.data.agentId
			initData()
			scrollToBottom()
		}
	}
	
	/// 初始化数据 首次数据加载的时候
	const initData = () => {
		const msg = {
			msgId: `msg_${0}`,
			msgType: MessageRole.OTHER,
			msg: '',
		}
		chatMsgList.value.push(msg)
    }
	
	
	/// 发送消息的参数拼接
	const sendMessage = (message, isInstruct = false) => {
		if (isSessionActive) {
			uni.showToast({
				title: '请等待当前回复完成',
				icon: 'none'
			});
			return;
		}
		isSessionActive = true;
		const newMsg = {
			msgId: `msg_${chatMsgList.value.length}`,
			msgType: MessageRole.ME,
			msg: message,
			msgContent: {
				type: MessageType.TEXT,
				text: message
			}
		}
		chatMsgList.value.push(newMsg)
		sendChat(message, isInstruct)	
		console.log("发送的新消息：",JSON.stringify(newMsg))
	}
	
	/// 打字机效果实现的变量
	let loadingTimer = null;
	let typeWriterTimer = null;
	let aiMsgBuffer = ''; // 全局缓冲区
	let isTyping = false; // 是否正在打字

	/// 发送获取AI聊天消息
	const sendChat = (message, isInstruct = false) => {
		const args = {
		    conversationId: conversationId.value,
		    agentId: agentId.value,
		    messageType: isInstruct ? 1 : 0,
		    messageContent: isInstruct ? commonType : message
		}
		
		// 插入AI消息
		const aiMsg = {
		    msgId: `msg_${chatMsgList.value.length}`,
		    msgType: MessageRole.AI,
		    msg: '加载中.',
		    msgContent: {
		        type: MessageType.TEXT,
		        url: ''
		    }
		}
		chatMsgList.value.push(aiMsg)
		const aiMsgIndex = chatMsgList.value.length - 1
		
		// 动态加载中动画
		let dotCount = 1;
		loadingTimer && clearInterval(loadingTimer);
		loadingTimer = setInterval(() => {
		    dotCount = dotCount % 3 + 1;
		    chatMsgList.value[aiMsgIndex].msg = '加载中' + '.'.repeat(dotCount);
		}, 400);
		
		aiMsgBuffer = '';
		isTyping = false;
		if (typeWriterTimer) {
		    clearTimeout(typeWriterTimer);
		    typeWriterTimer = null;
		}
		
		// 流式接收内容
		agentChatStream(args, (chunk) => {
			console.log('分段内容:', chunk)
			if (chunk && chunk.error) {
				chatMsgList.value[aiMsgIndex].msg = '请求错误,请重试';
				clearInterval(loadingTimer);
				loadingTimer = null;
				isTyping = false;
				typeWriterTimer = null;
				isSessionActive = false; // 出错也允许再次发送
				console.error('流式错误:', chunk.message, chunk.detail);
				return;
			}

		    if (chunk && chunk.content) {
		        // 收到内容，停止动画
		        if (loadingTimer) {
		            clearInterval(loadingTimer);
		            loadingTimer = null;
		        }
		        // 把新内容追加到缓冲区
		        aiMsgBuffer += chunk.content;
		
		        // 启动打字机（只启动一次）
		        if (!isTyping) {
		            isTyping = true;
		            chatMsgList.value[aiMsgIndex].msg = '';
		            typeWriter();
		        }
		    }
		    if (chunk && chunk.finish) {
		        // 结尾处理：确保剩余内容全部输出
		        const finishInterval = setInterval(() => {
		            if (aiMsgBuffer.length === 0) {
		                clearInterval(finishInterval);
						clearInterval(loadingTimer);
						loadingTimer = null;
		                isTyping = false;
						typeWriterTimer = null;
		                
						// 补全：如果消息内容还停留在'加载中.'或为空，则给出友好提示
						const msg = chatMsgList.value[aiMsgIndex].msg;
						console.log('msg:', msg)
						if (!msg || msg === '加载中.' || msg.startsWith('加载中')) {
							chatMsgList.value[aiMsgIndex].msg = '未获取到内容，请重试';
							if(chunk.toolCall) {
								chatMsgList.value[aiMsgIndex].msg = '';
							}
						}
						// 如果有组件	
						if(chunk.toolCall) {
							console.log('chunk.toolCall:', chunk.toolCall)
							chatMsgList.value[aiMsgIndex].toolCall = chunk.toolCall
						}
												
						// 如果有问题，则设置问题
						if(chunk.question && chunk.question.length > 0) {
							chatMsgList.value[aiMsgIndex].question = chunk.question
						}
						
		                isSessionActive = false;
		                scrollToBottom();
		            }
		        }, 50);
		    }
		}).catch(e => {
			isSessionActive = false; // 出错也允许再次发送
			console.log('error:', e)
		});
		
		// 打字机函数
		function typeWriter() {
		    if (aiMsgBuffer.length > 0) {
		        chatMsgList.value[aiMsgIndex].msg += aiMsgBuffer[0];
		        aiMsgBuffer = aiMsgBuffer.slice(1);
		        
				nextTick(() => {
            		scrollToBottom();
        		});
		        typeWriterTimer = setTimeout(typeWriter, 30);
		    } else {
		        // 等待新内容到来，不结束
		        typeWriterTimer = setTimeout(typeWriter, 30);
		    }
		}  
	}
	
	
</script>

<style lang="scss" scoped>
@import "styles/ChatMainList.scss";
</style>