<template>
	<view class="chat-container">
		<!-- 聊天消息区域 -->
		<scroll-view scroll-y :scroll-top="scrollTop" class="chat-messages" :scroll-with-animation="true"
			@scroll="onScroll">
			<view v-for="(msg, index) in messages" :key="index"
				:class="['message', msg.sender === 'me' ? 'sent' : 'received']">
				<image v-if="msg.sender !== 'me'" :src="botAvatar" class="avatar"></image>

				<view :class="['message-bubble', msg.sender === 'me' ? 'me' : '']">
					<text class="message-text">{{ msg.content }}</text>
					<view class="typing-indicator" v-if="msg.isTyping">
						<view class="dot"></view>
						<view class="dot"></view>
						<view class="dot"></view>
						<text class="typing-text">对方正在输入...</text>
					</view>
				</view>

				<image v-if="msg.sender === 'me'" :src="userAvatar" class="avatar"></image>
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="chat-input">
			<input class="input-field" placeholder="输入消息..." v-model="inputMsg" @confirm="sendMessage"
				confirm-type="send" />
			<button class="send-btn" :disabled="!inputMsg.trim()" @click="sendMessage">
				发送
			</button>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/utils/config';

	export default {
		data() {
			return {
				inputMsg: '',
				scrollTop: 0,
				userAvatar: require('../../static/imgs/index/nav.png'),
				botAvatar: require('../../static/imgs/ai/chuandaguwen.png'),
				messages: [],
				socketTask: null, // 微信小程序的 WebSocket 任务对象
				isConnected: false,
				reconnectAttempts: 0,
				maxReconnectAttempts: 5,
				reconnectDelay: 3000,
				userId: null,
				userName: '默认用户',
				apiKey: '',
				serviceUrl: ''
			}
		},

		onLoad(options) {
			this.serviceUrl = options.serviceUrl || '';
			this.apiKey = options.apiKey || '';
			this.botAvatar = options.icon || this.botAvatar;

			const userInfo = wx.getStorageSync('userInfo') || {};
			this.userId = userInfo.id || Date.now().toString();
			this.userName = userInfo.name || '默认用户';
			this.userAvatar = userInfo.avatar || this.userAvatar;

			uni.setNavigationBarTitle({
				title: options.name || 'AI助手'
			});

			this.initWebSocket();
		},

		onUnload() {
			this.closeWebSocket();
		},

		methods: {
			// 初始化WebSocket连接
			initWebSocket() {
				if (this.isConnected) return;

				// 微信小程序中使用 wx.connectSocket
				this.socketTask = wx.connectSocket({
					url: `ws://10.10.1.6:8071/api/v1/ws/ai?apiUrl=${encodeURIComponent(this.serviceUrl)}&apiToken=${this.apiKey}&userName=${this.userName}`,
					success: () => {
						console.log('WebSocket连接创建成功');
					},
					fail: (err) => {
						console.error('WebSocket连接创建失败', err);
						this.handleReconnect();
					}
				});

				// 监听 WebSocket 事件
				this.socketTask.onOpen(() => {
					console.log('WebSocket连接已打开');
					this.isConnected = true;
					this.reconnectAttempts = 0;
					this.addMessage('bot', '连接已建立，请问有什么可以帮您？');
				});

				this.socketTask.onMessage((res) => {
					console.log('收到WebSocket消息:', res.data);
					this.processBotMessage(res.data);
				});

				this.socketTask.onError((err) => {
					console.error('WebSocket发生错误:', err);
					this.isConnected = false;
					this.addMessage('bot', '连接出错，请稍后再试');
					this.handleReconnect();
				});

				this.socketTask.onClose(() => {
					console.log('WebSocket连接已关闭');
					this.isConnected = false;
					this.handleReconnect();
				});
			},

			// 处理机器人消息
			processBotMessage(data) {
				// 移除思考状态的消息
				this.messages = this.messages.filter(msg => !msg.isTyping);

				// 处理不同类型的消息
				if (data.startsWith('<think>')) {
					// 机器人正在思考
					this.addMessage('bot', '', true);
				} else if (data.startsWith('<answer>')) {
					// 正式回答
					const content = data.replace(/<answer>/g, '').replace(/<\/answer>/g, '');
					this.addMessage('bot', content);
				} else if (data.includes('</think>')) {
					// 思考结束，不做特殊处理
				} else {
					// 普通消息
					this.addMessage('bot', data);
				}
			},

			// 添加消息到聊天列表
			addMessage(sender, content, isTyping = false) {
				const message = {
					sender: sender === 'bot' ? 'other' : 'me',
					content,
					isTyping,
					timestamp: Date.now()
				};

				this.messages.push(message);
				this.scrollToBottom();
			},

			// 发送消息
			sendMessage() {
				const content = this.inputMsg.trim();
				if (!content || !this.isConnected) return;

				this.addMessage('me', content);

				// 微信小程序中使用 socketTask.send
				this.socketTask.send({
					data: content,
					success: () => {
						console.log('消息发送成功');
						// 添加机器人正在输入的提示
						this.addMessage('bot', '', true);
					},
					fail: (err) => {
						console.error('消息发送失败', err);
						this.addMessage('bot', '消息发送失败，请重试');
					}
				});

				this.inputMsg = '';
			},

			// 处理重连逻辑
			handleReconnect() {
				if (this.reconnectAttempts >= this.maxReconnectAttempts) {
					console.log('已达到最大重连次数');
					this.addMessage('bot', '连接已断开，请刷新页面重试');
					return;
				}

				this.reconnectAttempts++;
				console.log(`尝试重新连接，第${this.reconnectAttempts}次`);

				setTimeout(() => {
					this.initWebSocket();
				}, this.reconnectDelay);
			},

			// 关闭WebSocket连接
			closeWebSocket() {
				if (this.socketTask) {
					this.socketTask.close({
						success: () => {
							console.log('WebSocket已主动关闭');
						},
						fail: (err) => {
							console.error('关闭WebSocket失败', err);
						}
					});
					this.socketTask = null;
				}
				this.isConnected = false;
			},

			// 滚动到底部
			scrollToBottom() {
				this.$nextTick(() => {
					this.scrollTop = 99999; // 足够大的值确保滚动到底部
				});
			},

			onScroll(e) {
				// 可以在这里实现加载历史消息
			}
		}
	}
</script>

<style>
	.chat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f0f0f0;
	}

	.chat-messages {
		flex: 1;
		padding: 15px;
		background-color: #e5ddd5;
		overflow-y: auto;
	}

	.message {
		display: flex;
		margin-bottom: 15px;
	}

	.sent {
		justify-content: flex-end;
	}

	.received {
		justify-content: flex-start;
	}

	.avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		margin: 0 8px;
	}

	.message-bubble {
		max-width: 70%;
		padding: 10px 15px;
		border-radius: 18px;
		background-color: white;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.me {
		background-color: #dcf8c6;
	}

	.message-text {
		font-size: 16px;
		line-height: 1.4;
	}

	.chat-input {
		display: flex;
		padding: 10px;
		background-color: white;
		border-top: 1px solid #ddd;
	}

	.input-field {
		flex: 1;
		padding: 8px 15px;
		border-radius: 20px;
		background-color: #f0f0f0;
		margin-right: 10px;
	}

	.send-btn {
		padding: 0 20px;
		border-radius: 20px;
		background-color: #07C160;
		color: white;
	}

	.send-btn:disabled {
		opacity: 0.5;
	}

	/* 对方正在输入提示 */
	.typing-indicator {
		display: flex;
		align-items: center;
		margin-top: 8px;
	}

	.dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #7f8c8d;
		margin: 0 3px;
		animation: typing 1.4s infinite ease-in-out;
	}

	.dot:nth-child(1) {
		animation-delay: 0s;
	}

	.dot:nth-child(2) {
		animation-delay: 0.2s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.4s;
	}

	.typing-text {
		font-size: 12px;
		margin-left: 8px;
		color: #555;
	}

	@keyframes typing {

		0%,
		60%,
		100% {
			transform: translateY(0);
		}

		30% {
			transform: translateY(-5px);
		}
	}
</style>