<!DOCTYPE html>
<html lang="en">
<head>
	<script
			src="./js/jquery.min.js"
			type="text/javascript"
			charset="utf-8"
	></script>
	<script src="./CryptoJS/rollups/md5.js"></script>
	<style>
		/* 基础样式 */
		body {
			margin: 0;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
			background: #f0f2f5;
		}

		/* 悬浮图标 */
		.chat-icon {
			position: fixed;
			bottom: 50%;
			right: 30px;
			/*width: 56px;
			height: 56px;*/
			/* background: #007ebf; */
			border-radius: 50%;
			cursor: pointer;
			/*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 24px;
			z-index: 9999999;
			transition: transform 0.2s, box-shadow 0.2s;
		}

		/*.chat-icon:hover {
			transform: scale(1.05);
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
		}*/

		/* 聊天窗口 */
		.chat-container {
			position: fixed;
			top: 200px;
			right: 30px;
			width: 400px;
			height: 600px;
			background: #f9f9f9;
			border-radius: 16px;
			/*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
			display: none;
			flex-direction: column;
			overflow: hidden;
			z-index: 99999999;
		}

		/* 头部 */
		.chat-header {
			padding: 8px 20px;
			background: linear-gradient(90deg, #FF6B6B 0%, #FF313F 100%);
			color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: move;
			user-select: none;
		}

		.chat-title {
			font-weight: 500;
			font-size: 16px;
		}

		.close-btn {
			font-size: 15px;
			cursor: pointer;
			padding: 4px;
			order: 2;
		}

		/* 消息区域 */
		.chat-messages {
			flex: 1;
			/*padding: 16px;*/
			overflow-y: auto;
			background: #f9f9f9;
		}

		/* 消息气泡 */
		.message {
			/* margin-bottom: 12px;
            display: flex; */
			display: flex;
			align-items: flex-end;
			margin: 12px 0;
			 max-width: 90%;
		}

		.message.user {
			margin-left: auto;
			/* flex-direction: row-reverse; */
			justify-content: flex-end;
		}

		/* 时间戳 */
		/* .timestamp {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
            text-align: right;
        } */

		/* 用户时间样式 */
		.timestamp.user-time {
			order: -1;
			margin-right: 8px;
			color: #666;
			font-size: 0.75rem;
		}
		/* AI时间样式 */
		.timestamp.bot-time {
			margin-left: 8px;
			color: #666;
			font-size: 0.75rem;
		}

		.bubble {
			/* max-width: 80%; */
			padding: 12px 16px;
			border-radius: 12px;
			line-height: 1.4;
			font-size: 14px;
			position: relative;
			animation: fadeIn 0.3s ease;
		}

		.message.bot .bubble {
			background: white;
			color: #333;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		}

		.message.user .bubble {
			background: #FF515D;
			color: white;
		}

		/* 调整气泡位置 */
		.message.user .bubble {
			margin-left: 0;
			margin-right: 8px;
		}

		.message.bot .bubble {
			margin-left: 8px;
			margin-right: 0;
		}

		/* 输入区域 */
		.chat-input {
			padding: 16px;
			background: white;
			border-top: 1px solid #eee;
			display: flex;
			gap: 8px;
		}

		.chat-input input {
			flex: 1;
			padding: 12px 16px;
			border: 1px solid #ddd;
			border-radius: 8px;
			font-size: 14px;
			outline: none;
		}

		.chat-input input:focus {
			border-color: #FF515D;
			box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
		}

		.send-btn {
			padding: 12px 20px;
			background: #FF515D;
			color: white;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: background 0.2s;
		}

		.send-btn:hover {
			background: #FF515D;
		}

		/* 禁用状态样式 */
		#sendBtn.disabled {
			opacity: 0.6;
			background-color: #cccccc !important;
		}

		/* 输入框保持可用状态 */
		#userInput:disabled {
			background-color: transparent;
			opacity: 1;
		}

		/* 遮罩层 */
		.chat-overlay {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 999999;
			display: none;
		}

		body.lock-scroll {
			overflow: hidden;
			position: fixed;
			width: 100%;
			height: 100%;
		}

		/* 增加日期分隔样式 */
		.date-separator {
			text-align: center;
			margin: 20px 0;
			position: relative;
		}

		.date-separator span {
			display: inline-block;
			padding: 4px 12px;
			background: #e0e0e0;
			border-radius: 12px;
			font-size: 12px;
			color: #666;
			position: relative;
			z-index: 1;
		}

		.date-separator:before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			height: 1px;
			background: #ddd;
			transform: translateY(-50%);
		}
		.db {
			display: block !important;
		}
		.dn {
			display: none !important;
		}
		/* 添加折叠按钮样式 */
		.header-controls {
			display: flex;
			gap: 12px;
			align-items: center;
		}

		.minimize-btn {
			cursor: pointer;
			padding: 4px;
			opacity: 0.8;
			transition: opacity 0.2s;
			font-size: 18px;
			order: 1;
		}

		.minimize-btn:hover {
			opacity: 1;
		}
		/* 添加收起状态样式 */
		.chat-container.minimized {
			height: 50px !important;
			overflow: hidden;
		}

		.chat-container.minimized .chat-messages,
		.chat-container.minimized .chat-input {
			display: none !important;
		}

		.chat-container.minimized .minimize-btn::after {
			content: '+';
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.chat-container.minimized .minimize-btn {
			position: relative;
		}

		.chat-container.minimized .minimize-btn::after {
			content: '+';
		}

		.chat-container:not(.minimized) .minimize-btn::after {
			display: none;
		}

		/* 弹窗样式 */
		.popup {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			border: 1px solid #ccc;
			border-radius: 12px;
			padding: 20px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			z-index: 99999999;
			text-align: center;
		}

		.popup-close {
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
			font-size: 18px;
		}

		.popup button {
			background-color: #FF515D;
			color: white;
			border: none;
			border-radius: 23px;
			padding: 8px 36px;
			cursor: pointer;
			margin-top: 10px;
		}
		.popup img{
			width: 56px;
			height: 56px;
			margin-top: -45px;
		}
		.popup p{
			font-size: 16px;
			line-height: 26px;
			padding: 8px 40px;
		}

		/* 动画 */
		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(10px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* 移动端媒体查询CSS */
		@media (max-width: 768px) {
			/* .chat-container {
                width: 100%;
                height: 100vh;
                bottom: 0;
                right: 0;
                border-radius: 0;
            } */
			.chat-container {
				width: 100%;
				height: 100% !important; /* 改为动态高度 */
				max-height: 100vh;
				bottom: 0;
				right: 0;
				border-radius: 0;
				position: fixed;
				top: 0;
				transform: translate3d(0, 0, 0); /* 启用GPU加速 */
				/* z-index: 1000000;  */
				display: none !important;
			}

			.chat-input {
				padding-bottom: max(16px, env(safe-area-inset-bottom)); /* 适配全面屏 */
			}

			.chat-container.chatactive {
				display: flex;
			}

			.chat-overlay.chatactive {
				display: block;
			}

			.chat-messages {
				height: auto;
			}
			.chat-overlay {
				display: none !important;
			}
			.db {
				display: none !important;
			}
			.dn {
				display: block !important;
			}
			.popup p{
				font-size: 12px;
				line-height: 18px;
				padding: 8px 13px;
			}
			.popup button {
				background-color: #FF515D;
				color: white;
				border: none;
				border-radius: 23px;
				padding: 4px 25px;
				cursor: pointer;
				margin-bottom: 16px;
				font-size: 12px;
				margin-top: 0px;
			}

			.popup img{
				width: 45px;
				height: 45px;
				margin-top: -25px;
			}
			.popup {
				padding: 0px;
				width: 80%;
			}
		}

		.loading {
			position: relative;
			color: #666 !important;
		}
		.loading::after {
			content: '';
			display: inline-block;
			animation: dotPulse 1.4s infinite;
		}
		@keyframes dotPulse {
			0%,
			100% {
				content: '.';
			}
			33% {
				content: '..';
			}
			66% {
				content: '...';
			}
		}
		/* ------------------------------------------- */
	</style>
</head>
<body>
<!-- 新增遮罩层 -->
<div class="chat-overlay" id="chatOverlay"></div>

<div class="chat-icon db" id="chatIcon">
	<img width="100%" src="./img/liaotian.png" alt="" />
</div>
<div class="chat-icon dn" id="chatIcon">
	<a style="width: 100%; height: 100%" href="./custom.html"
	><img width="100%" src="./img/liaotian.png" alt=""
	/></a>
</div>

<div class="chat-container" id="chatContainer">
	<div class="chat-header" id="chatHeader">
		<div class="chat-title">象过河软件客服</div>
		<div class="header-controls">
			<div class="minimize-btn">&#8211;</div>
			<div class="close-btn">&#10007;</div>
		</div>
	</div>
	<div class="chat-messages" id="chatMessages"></div>
	<div class="chat-input">
		<input type="text" id="userInput" placeholder="输入消息..." />
		<button class="send-btn" id="sendBtn">发送</button>
	</div>
</div>

<!-- 新增弹窗 -->
<div class="popup" id="welcomePopup" style="display: none;">
	<div>
		<img max-width="100%" src="./img/liaotian1.png" alt="">
	</div>
	<span class="popup-close" id="popupClose">&#10005;</span>
	<p>欢迎来到象过河,象过河终身免费服务！<br>欢迎咨询在线客服！</p>
	<button id="popupButton">在线咨询</button>
</div>

<script>
	$(document).ready(function () {
		const xgh = 'xiangguohe0227';
		const INACTIVITY_TIMEOUT = 1 * 60 * 1000; // 1分钟无响应
		// const INACTIVITY_TIMEOUT = 1 * 20 * 1000; // 20秒无响应
		let inactivityTimer;

		// 状态变量
		let conversationId = localStorage.getItem('conversationId') || ''; // 会话id
		let firstMessageTime = localStorage.getItem('firstMessageTime') || null; // 新增变量：记录第一次消息时间
		let ip = localStorage.getItem('IP') || null; // 新增变量：记录IP第一次消息时间
		let hasUserSentMessage = false; // 是否用户已发送消息
		let isPageRefresh = false; // 是否页面刷新
		let isDragging = false; // 是否正在拖拽
		let isAIResponding = false; // 是否AI正在响应
		let dragOffset = { x: 0, y: 0 }; // 拖拽偏移量
		let scrollPosition = 0; // 保存滚动位置

		// 元素缓存
		const $chatIcon = $('#chatIcon');
		const $chatContainer = $('#chatContainer');
		const $chatHeader = $('#chatHeader');
		const $sendBtn = $('#sendBtn');
		const $userInput = $('#userInput');
		const $chatMessages = $('#chatMessages');

		// 初始化页面刷新检测
		try {
			const navigationEntries = performance.getEntriesByType('navigation');
			isPageRefresh = navigationEntries.length > 0 && navigationEntries[0].type === 'reload';
		} catch (e) {
			isPageRefresh = performance.navigation?.type === 1;
		}

		// 初始化位置
		const savedPosition = localStorage.getItem('chatPosition');
		if (savedPosition) {
			const pos = JSON.parse(savedPosition);
			$chatContainer.css({ left: pos.x + 'px', top: pos.y + 'px' });
		}

		// 事件监听
		$chatIcon.click(toggleChat);
		$userInput.keypress(handleInputKeypress);
		$chatHeader.mousedown(startDrag);
		$(document).mousemove(handleDrag).mouseup(endDrag);
		$('.close-btn').click(closeChat);
		$(window).resize(scrollToBottom);
		// 发送按钮点击事件
		$sendBtn.click(function () {
			if (!isAIResponding) {
				// 增加状态判断
				sendMessage();
			}
		});

		// 添加折叠按钮点击事件
		$('.minimize-btn').click(function () {
			const $container = $('#chatContainer');
			$container.toggleClass('minimized');

			// 保存折叠状态
			localStorage.setItem('chatMinimized', $container.hasClass('minimized'));

			// 如果展开时在移动端，恢复滚动锁定
			if (!$container.hasClass('minimized')) {
				calculateMessagesHeight();
				scrollToBottom();
			}
		});
		// 初始化折叠状态
		const isMinimized = localStorage.getItem('chatMinimized') === 'true';
		if (isMinimized) {
			$('#chatContainer').addClass('minimized');
		}

		// 页面关闭处理
		window.addEventListener('beforeunload', handlePageUnload1);

		// 初始化历史记录
		initChatHistory();
		// initInactivityTimer();

		// function toggleChat() {
		// 	$chatContainer.toggle();
		// 	if ($chatContainer.is(':visible')) {
		// 		setTimeout(calculateMessagesHeight, 50);
		// 	}
		// 	scrollToBottom();
		// }
		function toggleChat() {
			const isMobile = window.innerWidth <= 768;
			const $messages = $chatMessages[0];
			if ($chatContainer.hasClass('minimized')) {
				$chatContainer.removeClass('minimized');
			}
			if (isMobile) {
				const wasActive = $chatContainer.hasClass('chatactive');
				$('#chatOverlay').toggleClass('chatactive');
				$chatContainer.toggleClass('chatactive');

				if ($chatContainer.hasClass('chatactive')) {
					// 打开弹窗时
					scrollPosition = window.pageYOffset;
					$('body')
							.addClass('lock-scroll')
							.css('top', -scrollPosition + 'px');
					document.addEventListener('touchmove', handleTouchMove, { passive: false });

					// 添加打开动画
					$chatContainer.css({
						transform: 'translateY(100%)',
						transition: 'transform 0.3s ease-out',
					});

					// 强制重绘以触发动画
					void $chatContainer[0].offsetHeight;

					$chatContainer.css('transform', 'translateY(0)');

					// 动画结束后处理滚动
					setTimeout(() => {
						calculateMessagesHeight();
						smoothScrollToBottom(800); // 800ms滚动动画
						setupMobileViewportHandler();
					}, 300);
				} else {
					// 关闭动画
					$chatContainer.css('transform', 'translateY(100%)');
					setTimeout(() => {
						$('body').removeClass('lock-scroll').css('top', '');
						window.scrollTo(0, scrollPosition);
						document.removeEventListener('touchmove', handleTouchMove);
						teardownMobileViewportHandler();
					}, 300);
				}
			} else {
				$chatContainer.toggle();
				if ($chatContainer.is(':visible')) {
					// 强制重绘
					void $chatContainer[0].offsetHeight;

					setTimeout(() => {
						calculateMessagesHeight();
						smoothScrollToBottom(200); // 500ms滚动动画
					}, 300);
				}
			}
		}

		// 新增平滑滚动函数
		function smoothScrollToBottom(duration = 500) {
			const $messages = $chatMessages[0];
			if (!$messages) return;

			const start = $messages.scrollTop;
			const distance = $messages.scrollHeight - start - $messages.clientHeight;
			let startTime = null;

			function animateScroll(timestamp) {
				if (!startTime) startTime = timestamp;
				const progress = timestamp - startTime;
				const percentage = Math.min(progress / duration, 1);

				$messages.scrollTop = start + distance * easeInOutQuad(percentage);

				if (progress < duration) {
					requestAnimationFrame(animateScroll);
				}
			}

			requestAnimationFrame(animateScroll);
		}

		// 缓动函数
		function easeInOutQuad(t) {
			return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
		}

		function sendMessage() {
			const message = $userInput.val().trim();
			if (!message || isAIResponding) return;

			// 记录第一次消息时间
			if (!hasUserSentMessage) {
				firstMessageTime = new Date().getTime();
				localStorage.setItem('firstMessageTime', firstMessageTime);
			}

			// 标记用户已发送消息
			hasUserSentMessage = true;
			isAIResponding = true; // 标记为响应中
			addMessage(message, 'user');
			$userInput.val('');
			disableInput(true);

			// 显示加载状态
			showLoading();

			// 请求数据添加会话ID
			let requestData = {
				question: message,
			};
			if (conversationId) {
				requestData.conversation_id = conversationId;
			}
			// 调用API
			$.ajax({
				url: 'https://www.xiangguohe.com/do/Chat',
				method: 'POST',
				data: requestData,
				timeout: 60000, // 60秒超时设置
				success: function (response) {
					removeLoading();
					try {
						const data = JSON.parse(response).data;
						console.log('data.chat', data.chat);
						if (data.chat) {
							addMessage(data.chat, 'bot');

							// 更新会话ID
							if (data.conversation_id) {
								conversationId = data.conversation_id;
								localStorage.setItem('conversationId', conversationId);
							}
						}
					} catch (e) {
						addMessage('网络异常，请稍后再试', 'bot');
					}
				},
				error: function (xhr) {
					removeLoading();
					addMessage(`网络异常，请稍后再试`, 'bot');
				},
				complete: function () {
					isAIResponding = false; // 清除响应状态
					disableInput(false);
				},
			});
		}

		// 键盘事件处理
		function handleInputKeypress(e) {
			if (e.which === 13 && !e.shiftKey) {
				e.preventDefault();
				// 增加AI响应状态判断
				if (!isAIResponding) {
					sendMessage();
				}
			}
		}

		// 页面关闭浏览器关闭处理
		function handlePageUnload1(e) {
			submitChatHistory(); // 提交聊天记录
		}

		// 禁用发送按钮
		function disableInput(disabled) {
			// 仅禁用发送按钮
			$sendBtn.prop('disabled', disabled);
			// 保持输入框始终可用
			$userInput.prop('disabled', false);

			// 添加按钮状态样式
			if (disabled) {
				$sendBtn.addClass('disabled').css('cursor', 'not-allowed');
			} else {
				$sendBtn.removeClass('disabled').css('cursor', 'pointer');
			}
		}

		function showLoading() {
			$chatMessages.append(`
							<div class="message bot">
									<div class="bubble loading">正在输入...</div>
							</div>
					`);
			scrollToBottom();
		}

		function removeLoading() {
			$chatMessages.children().last().remove();
		}

		// 修改后的 addMessage 方法（增加 skipDateCheck 参数）
		function addMessage(text, type, timestamp = null, skipDateCheck = false) {
			const messageTime = timestamp ? new Date(timestamp) : new Date();
			const currentDate = getDateString(messageTime);

			// 如果不跳过日期检查
			if (!skipDateCheck) {
				// 获取最后一个有效元素（消息或分隔条）
				const $lastElement = $chatMessages.children(':not(.loading)').last();
				let lastDate = '';

				if ($lastElement.length > 0) {
					const lastTimestamp = $lastElement.hasClass('date-separator')
							? $lastElement.data('date')
							: $lastElement.find('[data-timestamp]').data('timestamp');
					lastDate = getDateString(lastTimestamp);
				}

				// 添加日期分隔条
				if (currentDate !== lastDate) {
					const dateSeparator = `
								<div class="date-separator" data-date="${messageTime.getTime()}">
									<span>${formatFullDate(messageTime)}</span>
								</div>
							`;
					$chatMessages.append(dateSeparator);
				}
			}

			// 原有消息添加逻辑
			const timeString = messageTime.toLocaleTimeString([], {
				hour: '2-digit',
				minute: '2-digit',
			});

			const saveTimestamp = messageTime.getTime();

			const template =
					type === 'user'
							? `<div class="message ${type}">
							<div class="timestamp user-time" data-timestamp="${saveTimestamp}">${timeString}</div>
							<div class="bubble">${text}</div>
						</div>`
							: `<div class="message ${type}">
							<div class="bubble">${text}</div>
							<div class="timestamp bot-time" data-timestamp="${saveTimestamp}">${timeString}</div>
						</div>`;

			$chatMessages.append(template);

			// 保存历史记录时跳过日期分隔条
			if (!skipDateCheck) {
				saveHistory();
				if (type === 'user') resetInactivityTimer();
			}
			// scrollToBottom();
			// 修改为平滑滚动
			requestAnimationFrame(() => {
				if ($chatContainer.is(':visible')) {
					scrollToBottom(); // 实时消息使用原生平滑滚动
				}
			});
		}

		// 新增日期处理函数
		function getDateString(timestamp) {
			const date = new Date(timestamp);
			return date.toLocaleDateString('zh-CN', {
				timeZone: 'Asia/Shanghai',
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
			});
		}
		function formatFullDate(date) {
			return date.toLocaleDateString('zh-CN', {
				timeZone: 'Asia/Shanghai',
				year: 'numeric',
				month: 'long',
				day: 'numeric',
			});
		}
		// 新增按日期分组方法
		function groupMessagesByDate(messages) {
			const groups = [];
			let currentDate = null;

			messages.forEach((msg) => {
				const dateStr = getDateString(msg.timestamp);

				if (dateStr !== currentDate) {
					groups.push({
						date: msg.timestamp,
						messages: [],
					});
					currentDate = dateStr;
				}

				groups[groups.length - 1].messages.push(msg);
			});

			return groups;
		}

		function initChatHistory() {
			const history = JSON.parse(localStorage.getItem('chatHistory')) || [];
			// 从存储恢复首次消息时间
			const savedFirstTime = localStorage.getItem('firstMessageTime');
			if (savedFirstTime) {
				firstMessageTime = parseInt(savedFirstTime);
				hasUserSentMessage = true; // 恢复用户已发送状态
			}
			// 从存储恢复会话ID
			const savedConvId = localStorage.getItem('conversationId');
			if (savedConvId) {
				conversationId = savedConvId;
			}

			const groupedMessages = groupMessagesByDate(history);

			groupedMessages.forEach((group) => {
				// 添加日期分隔条
				$chatMessages.append(`
							<div class="date-separator" data-date="${group.date}">
								<span>${formatFullDate(new Date(group.date))}</span>
							</div>
						`);

				// 添加该日期所有消息（跳过日期检查）
				group.messages.forEach((msg) => {
					addMessage(msg.text, msg.type, msg.timestamp, true); // 第三个参数 true 表示跳过日期检查
				});
			});

			// history.forEach((msg) => {
			// 	addMessage(msg.text, msg.type, msg.timestamp);
			// });
			hasUserSentMessage = history.some((msg) => msg.type === 'user');
			if (hasUserSentMessage) resetInactivityTimer();

			if (history.length === 0) {
				addMessage(
						'您好，有什么我可以帮您的吗？我们很乐意回答您关于产品功能或任何其他方面的问题。您方便提供一下您的电话号码，以便我们为您提供更详细的信息和服务吗？',
						'bot',
						Date.now() // 初始消息使用当前时间
				);
			}

			// 在加载完所有历史消息后滚动到底部
			setTimeout(() => {
				scrollToBottom();
				// 确保在移动端正确处理
				if (window.innerWidth <= 768) {
					requestAnimationFrame(() => {
						$chatMessages.scrollTop($chatMessages[0].scrollHeight);
					});
				}
			}, 100);
		}

		function saveHistory() {
			const history = getChatHistory();
			localStorage.setItem('chatHistory', JSON.stringify(history));
			localStorage.setItem('conversationId', conversationId);
			localStorage.setItem('firstMessageTime', firstMessageTime);
		}

		function getChatHistory() {
			const history = [];
			$chatMessages.children('.message').each(function () {
				if (!$(this).find('.loading').length) {
					history.push({
						type: $(this).hasClass('user') ? 'user' : 'bot',
						text: $(this).find('.bubble').html(),
						// 从data属性获取原始时间戳
						timestamp: parseInt($(this).find('.timestamp').data('timestamp')),
						// time: $(this).find('.timestamp').text(),
					});
				}
			});
			return history;
		}

		function formatChatContent(history) {
			return history.map((msg) => ({
				content: msg.type === 'user' ? `用户: ${msg.text}` : `AI智能客服: ${msg.text}`,
				// 如果原始记录中没有时间，可以使用当前时间；如果有，请替换为 msg.time
				time: convertDate(msg.timestamp),
			}));
		}

		// 无活动处理
		function initInactivityTimer() {
			resetInactivityTimer();
			$userInput.on('input', resetInactivityTimer);
		}

		// 计时器控制
		function resetInactivityTimer() {
			clearTimeout(inactivityTimer);
			if (hasUserSentMessage) {
				inactivityTimer = setTimeout(submitChatHistory, INACTIVITY_TIMEOUT);
			}
		}

		function submitChatHistory() {
			const history = getChatHistory();
			if (history.length === 0 || !hasUserSentMessage || !firstMessageTime) return;

			let time = new Date().getTime();
			const firstMd5Hash = CryptoJS.MD5(xgh + time).toString();

			$.ajax({
				url: 'https://www.xiangguohe.com/do',
				method: 'POST',
				data: {
					chat: formatChatContent(history),
					conversationId: conversationId, // 使用当前会话ID
					sign: firstMd5Hash,
					check: time,
					time: convertDate(firstMessageTime), // 使用第一次消息时间
					ip: ip, // 浏览器IP
				},
				success: () => {
					console.log('提交成功');
					// clearChatHistory(); // 重置聊天界面
				},
				error: (xhr) => console.error('提交失败:', xhr.statusText),
			});
		}

		// 转换年月日
		function convertDate(timestamp) {
			// 创建 Date 对象
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			const second = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
		}

		function clearChatHistory() {
			// 统一清除所有存储数据
			localStorage.removeItem('conversationId');
			localStorage.removeItem('chatHistory');
			localStorage.removeItem('firstMessageTime');
			// 重置内存变量
			hasUserSentMessage = false;
			firstMessageTime = null;
			conversationId = '';
			$chatMessages.empty();
			addMessage(
					'您好，有什么我可以帮您的吗？我们很乐意回答您关于产品功能或任何其他方面的问题。您方便提供一下您的电话号码，以便我们为您提供更详细的信息和服务吗？',
					'bot',
					Date.now() // 初始消息使用当前时间
			);
		}

		// 拖拽功能
		function startDrag(e) {
			isDragging = true;

			// 获取正确的文档滚动量
			const scrollX = window.scrollX || window.pageXOffset;
			const scrollY = window.scrollY || window.pageYOffset;

			// 获取元素相对于文档的位置
			const offset = $chatContainer.offset();

			// 计算基于文档坐标的偏移量
			dragOffset = {
				x: e.clientX + scrollX - offset.left,
				y: e.clientY + scrollY - offset.top,
			};
		}

		function handleDrag(e) {
			if (window.innerWidth <= 768) return; // 在移动设备上禁用拖拽
			if (!isDragging) return;
			let newLeft = e.clientX - dragOffset.x;
			let newTop = e.clientY - dragOffset.y;

			// 获取聊天窗口的宽度和高度
			const containerWidth = $chatContainer.outerWidth();
			const containerHeight = $chatContainer.outerHeight();

			// 计算视口允许的最大 left 和 top 值
			const maxLeft = $(window).width() - containerWidth;
			const maxTop = $(window).height() - containerHeight;

			// 限制 newLeft 和 newTop 在 0 和最大值之间
			newLeft = Math.max(0, Math.min(newLeft, maxLeft));
			newTop = Math.max(0, Math.min(newTop, maxTop));

			// $chatContainer.css({
			// 	left: newLeft,
			// 	top: newTop,
			// });
			$chatContainer[0].style.setProperty('left', newLeft + 'px', 'important');
			$chatContainer[0].style.setProperty('top', newTop + 'px', 'important');
		}

		function endDrag() {
			if (isDragging) {
				isDragging = false;
				savePosition();
			}
		}

		function savePosition() {
			const pos = $chatContainer.offset();
			localStorage.setItem('chatPosition', JSON.stringify(pos));
		}

		function closeChat() {
			const isMobile = window.innerWidth <= 768;
			$('#chatContainer').removeClass('minimized'); // 移除最小化状态
			if (isMobile) {
				// 移除移动端状态
				$('#chatOverlay').removeClass('chatactive');
				$('#chatContainer').removeClass('chatactive');
				$('body').removeClass('lock-scroll').css('top', '');
				window.scrollTo(0, scrollPosition);
				// 同时移除移动端的触摸监听（如果已添加）
				document.removeEventListener('touchmove', handleTouchMove);
				teardownMobileViewportHandler();
			} else {
				// 桌面端直接隐藏聊天窗口
				$chatContainer.hide();
			}
		}

		function scrollToBottom() {
			const $messages = $chatMessages[0];
			if (!$messages) return;

			// 立即滚动用于实时消息
			$messages.scrollTo({
				top: $messages.scrollHeight,
				behavior: 'smooth',
			});
		}

		// 新增移动端视口处理
		let viewportHandler = null;
		function setupMobileViewportHandler() {
			if (!('visualViewport' in window)) return;

			viewportHandler = function () {
				const visual = window.visualViewport;
				const $input = $('#userInput');

				// 计算键盘高度
				const keyboardHeight = window.innerHeight - visual.height;

				// 调整容器位置
				$chatContainer.css({
					transform: `translateY(${Math.max(0, visual.offsetTop)}px)`,
					height: visual.height,
				});

				// 自动滚动输入框
				if ($input.is(':focus')) {
					const inputTop = $input.offset().top;
					const scrollPos = inputTop - visual.height * 0.3;
					$chatMessages.scrollTop(scrollPos);
				}
			};

			window.visualViewport.addEventListener('resize', viewportHandler);
			window.visualViewport.addEventListener('scroll', viewportHandler);
		}

		function teardownMobileViewportHandler() {
			if (viewportHandler) {
				window.visualViewport.removeEventListener('resize', viewportHandler);
				window.visualViewport.removeEventListener('scroll', viewportHandler);
				viewportHandler = null;
			}
		}

		// 计算消息高度
		function calculateMessagesHeight() {
			try {
				const isMobile = window.innerWidth <= 768;
				const containerHeight = isMobile
						? window.visualViewport?.height || window.innerHeight
						: $chatContainer.height();

				const messagesPaddingTop = parseInt($chatMessages.css('padding-top'), 10) || 0;
				const messagesPaddingBottom = parseInt($chatMessages.css('padding-bottom'), 10) || 0;

				const headerHeight = $chatHeader.outerHeight(true) || 0;
				const inputHeight = $('.chat-input').outerHeight(true) || 0;

				const messagesHeight = containerHeight - headerHeight - inputHeight;

				$chatMessages.css('height', `${Math.max(messagesHeight, 100)}px`);
			} catch (e) {
				console.error('高度计算错误:', e);
				$chatMessages.css('height', 'calc(100% - 140px)');
			}
		}
		// 新增输入框聚焦处理
		$userInput.on('focus', function () {
			if (window.innerWidth > 768) return;

			setTimeout(() => {
				const inputRect = this.getBoundingClientRect();
				const viewportHeight = window.visualViewport?.height || window.innerHeight;

				if (inputRect.bottom > viewportHeight) {
					const scrollAmount = inputRect.bottom - viewportHeight + 50;
					$chatMessages.scrollTop($chatMessages.scrollTop() + scrollAmount);
				}
			}, 300);
		});

		// 处理触摸移动事件
		function handleTouchMove(e) {
			// 检查触摸目标是否在弹窗内
			let target = e.target;
			while (target) {
				if (target === $chatContainer[0] || target === $chatMessages[0]) {
					return; // 在弹窗内允许滚动
				}
				target = target.parentNode;
			}
			e.preventDefault(); // 阻止外部页面滚动
		}

		// 获取ip地址  http://192.168.2.113:9096/aichat/getUserIP
		function getIPAddress() {
			$.ajax({
				url: 'https://www.xiangguohe.com/do/getUserIP',
				type: 'GET',
				success: function (data) {
					console.log('IP地址:', data);
					if (data) {
						ip = data;
						localStorage.setItem('IP', ip);
					} else {
						console.error('无法获取IP地址');
					}
				},
				error: function (xhr, status, error) {
					console.log(xhr, status, error);
					console.error('获取IP地址失败:', error);
				},
			});
		}
		// 获取ip地址
		getIPAddress();

		// 窗口大小变化时优化（防抖处理）
		let resizeTimer;
		$(window).resize(function () {
			clearTimeout(resizeTimer);
			resizeTimer = setTimeout(() => {
				calculateMessagesHeight();
				scrollToBottom();
			}, 100);
		});

		// 元素缓存中新增弹窗相关元素
		const $welcomePopup = $('#welcomePopup');
		const $popupClose = $('#popupClose');
		const $popupButton = $('#popupButton');

		// 5秒后显示弹窗
		setTimeout(() => {
			$welcomePopup.show();
		}, 3000);

		// 关闭弹窗事件
		$popupClose.click(() => {
			$welcomePopup.hide();
		});

		// 在线咨询按钮点击事件
		$popupButton.click(() => {
			$welcomePopup.hide();
			const isMobile = window.innerWidth <= 768;
			if (isMobile) {
				// 手机端打开新页面进入客服聊天
				window.open('./custom.html', '_blank');
			} else {
				// 非手机端正常显示聊天窗口
				toggleChat();
			}
		});
	});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>仓库管理软件|免费仓库管理软件|仓库管理软件免费版</title>
<meta name="keywords" content="仓库管理软件、免费仓库管理软件、仓库管理软件免费版">
<meta name="description" content="象过河仓库管理软件、免费仓库管理软件、仓库管理软件免费版下载">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">







<script src="js/jquery-1.9.1.min.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?fed0988c973423d63eef2c8b53517692";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
  <script>
function myyear()
		{
		var date=new Date;
		var aa=date.getFullYear();
		var bb=2007;
		return aa-bb;
		}
</script>
</head>
<body>
<div class="header">
		<div class="container">
			<div class="flex">
				<img src="images/logo.png" alt="" class="logo">
				<span class="slogan">让每个企业都用<strong>好</strong>软件管理</span>
				<span class="contact-p">客服热线：<strong>400-600-1168</strong></span>
			</div>
		</div>
	</div>
	<div class="nav">
		<div class="container">
			<ul>
				<li class="active"><a href="#">网站首页</a></li>
				<li><a href="#">软件功能</a></li>
				<li><a href="#">版本介绍</a></li>
				<li><a href="#">使用特点</a></li>
				<li><a href="#">亮点优势</a></li>
				<li><a href="#">客户案例</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>
	</div>
	<div id="content">
		<div class="banner item" id="item1">
			<div class="container">
				<div class="b-left">
					<h1>仓库管理软件</h1>
					<h3>免费服务<script> document.write(myyear());</script>年，没收服务费</h3>
					<a href="http://www.xiangguohe.com/download_ck_mf.asp" class="download-btn" target="_blank">
						<img src="images/downloadicon.png" alt="">
						免费下载
					</a>
				</div>
				<img src="images/swlogo.png" alt="" class="b-right">
			</div>
		</div>
		<div class="con item" id="item2">
			<div class="container">
				<h1 class="tit">仓库管理，功能俱全！</h1>
				<div class="gn-wrap">
					<ul class="c-u2">
						<li>
							<span class="gimg-wrap"><img src="images/g1.png" alt="" class="g-img"></span>
							<h3 class="c-tit">实时监控&nbsp;&nbsp;库存报警</h3>
							<p class="c-intro">库存查询、调拨，实时监控统计<br>库存报警、权限管理、报表丰富</p>
						</li>
						<li>
							<span class="gimg-wrap"><img src="images/g3.png" alt="" class="g-img"></span>
							<h3 class="c-tit">货位管理&nbsp;&nbsp;智能拆装</h3>
							<p class="c-intro">多仓库精细化管理、商品分类<br>商品拆装单、一键停用功能</p>
						</li>
					</ul>
					<ul class="c-u2 c-right">
						<li>
							<span class="gimg-wrap"><img src="images/g2.png" alt="" class="g-img"></span>
							<h3 class="c-tit">智能补货&nbsp;&nbsp;进价跟踪</h3>
							<p class="c-intro">智能生成补货单、自动跟踪价格<br>负库存出库、成本精准核算</p>
						</li>
						<li>
							<span class="gimg-wrap"><img src="images/g4.png" alt="" class="g-img"></span>
							<h3 class="c-tit">往来对账&nbsp;&nbsp;智能配货</h3>
							<p class="c-intro">应收应付账款、物流费用结算<br>多仓库智能就近配货</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 表单 -->
		<div class="content spe-back">
			<div class="form">	<!-- http://www.xiangguohe.com/mk/fapiaoguanli.html -->
				<form method="" action="http://www.wangxiao360.com/">
					<div class="container">
						<h2 class="title-5">需求申请</h2>
						<p class="sub-title">提交申请后，我们将会尽快和您联系，感谢您的支持和理解</p>
						<div class="form-content">
							<div class="f-wrap">
								<div class="f-ipt">
									<span class="label">姓名*</span>
									<input type="text" name="" value="" placeholder="让我们知道沟通中对您的称谓" class="name">
								</div>
								<div class="f-ipt f-ipt-right">
									<span class="label">企业名称</span>
									<input type="text" name="" value="" placeholder="您的公司完整名称" class="company">
								</div>
							</div>
							<div class="f-wrap">
								<div class="f-ipt">
									<span class="label">手机*</span>
									<input type="text" name="" value="" placeholder="最直接交流的渠道，最及时的通知" class="phone" maxlength="11">
								</div>
								<div class="f-ipt f-ipt-right f-xq">
									<span class="label">业务需求</span>
									<input type="text" name="" value="进销存管理" class="area">
									<i class="selectbtn"><img src="images/select.png" alt=""></i>
								</div>
							</div>
							<div class="f-wrap">
								<span class="label">描述&nbsp;</span>
								<textarea name="" id="demand" class="f-text" placeholder="请简单描述您的需求，第一时间回复。"></textarea>
							</div>
							 <ul class="f-items">
								<li>租赁管理</li>
								<li>仓库库存管理</li>
								<li>互联网项目</li>
								<li>行业方案定制</li>
								<li>生产制造</li>
								<li>信息化外包</li>
								<li>其他</li>
							</ul>
						</div>
						<div class="submit">提交申请</div>
					</div>
				</form>
			</div>
		</div>
		<!-- 表单结束 -->
		<div class="con bb-back item" id="item3">
			<div class="container">
				<img src="images/b1.png" alt="" class="logo1">
				<div class="bb-item">
					<span><i></i>终身免费版</span>
					<span><i></i>经典版</span>
					<span><i></i>ERP版</span>
				</div>
			</div>
		</div>
		<div class="con td-back item" id="item4">
			<div class="container">
				<h1 class="tit">适合多种仓库管理模式！</h1>
				<div class="td-wrap">
						<ul class="item1 item-left">
							<li>单一门店仓库</li>
							<li>配送中心+门店</li>
							<li>生产加工仓库</li>
						</ul>
						<img src="images/dn.png" alt="">
						<ul class="item1">
							<li>异地多仓库</li>
							<li>车销模式管理</li>
							<li>特殊需求定制</li>
						</ul>
				</div>
			</div>
		</div>
		<div class="con ld-back item" id="item5">
			<div class="container">
				<h1 class="tit">亮点优势，省心安心！</h1>
				<img src="images/3.png" alt="" class="s-img">
			</div>
		</div>
		<div class="con item" id="item6">
			<div class="container">
				<h1 class="tit">象过河软件合作客户展示</h1>
				<img src="images/5.png" alt="" class="kh-img">
			</div>
		</div>
		<div class="lx-back item" id="item7">
			<div class="container lxcon-back">
				<div class="lx-con">
					<p class="c-p"><strong><script> document.write(myyear());</script>年</strong> 软件行业沉淀</p>
					<p class="c-p"><strong>23个</strong> 国家和地区使用</p>
					<p class="c-p"><strong>268万</strong> 客户的支持与信任</p>
					<div class="lx-point"><strong>免费服务</strong> 只有象过河</div>
					<p class="c-point">专&nbsp;&nbsp;&nbsp;&nbsp;业&nbsp;&nbsp;&nbsp;&nbsp;专&nbsp;&nbsp;&nbsp;&nbsp;注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用&nbsp;&nbsp;&nbsp;&nbsp;心&nbsp;&nbsp;&nbsp;&nbsp;服&nbsp;&nbsp;&nbsp;&nbsp;务</p>
					<a href="http://www.xiangguohe.com/download_ck_mf.asp" class="download-btn" target="_blank">
						<img src="images/downloadicon.png" alt="">
						免费下载
					</a>
				</div>
			</div>
		</div>
	</div>









	<div class="footer">
		<div class="container">
			<div class="fcon-left">
				<div class="fcon-t">
					<img src="images/logo1.png" alt="">
					<span>让&nbsp;&nbsp;每&nbsp;&nbsp;个&nbsp;&nbsp;企&nbsp;&nbsp;业&nbsp;&nbsp;都&nbsp;&nbsp;用&nbsp;&nbsp;好&nbsp;&nbsp;软&nbsp;&nbsp;件&nbsp;&nbsp;管&nbsp;&nbsp;理</span>
				</div>
				<div class="fcon-b">
					<p>客服热线：<strong>400-600-1168</strong></p>
					<p>总部邮箱：xiangguohe@126.com</p>
					<p>总部地址：郑州市高新区西三环279号大学科技园（东区）13号楼16层</p>
				</div>
			</div>
			<div class="fcon-right">
				<img src="images/fsq.png" alt="">
				<img src="images/xgh.png" alt="">
			</div>
			<div class="footer-b">
				<span>Copyright © 郑州象过河软件技术有限公司</span>
				<span><a href="https://beian.miit.gov.cn" target="_blank">豫ICP备11015894号-1</a></span>
				<span><a href="" id="a2" >公示信息</a></span>
				<img src="images/f04.png" alt="">
				<img src="images/f03.png" alt="">
				<img src="images/f02.png" alt="">
				<img src="images/f01.png" alt="">
			</div>
		</div>
	</div>
	<div class="totop" id="totop">
		<img src="images/totop.png" alt="">
	</div>
	<script src="https://www.layuicdn.com/layer/layer.js"></script>
	<script type="text/javascript" src="js/basic.js"></script>
	<script>
		$("#a2").on('click',function(){
			layer.open({
				  type: 1,
				  title: "公示信息",
				  skin: 'layui-layer-rim', //加上边框
				  area: ['640px', '880px'], //宽高
				  content: '<img style="width: 100%;" src="http://www.xgohe.com/static/upload/image/20200614/1592098144208972.jpg">'
				});
		return false;

		});


		$(function(){
			
			$(window).scroll(function (){
				/*菜单对应位置*/
		    var scrollTop1 = $(document).scrollTop();
        var oItem = $("#content").find(".item");
        var oName = "";
        $.each(oItem,function(){
          var oneItem = $(this);
          var offsetTop = oneItem.offset().top;
          if(offsetTop-scrollTop1 < 200){
              oName = oneItem.attr("id");
          }
        });
        if(oName != $(".current").attr("href")){
          $(".current").removeClass("current");
          $(".nav").find("[flag="+ oName +"]").addClass("current");
        }

				/*返回顶部*/
				if ($(window).scrollTop()>480) {
		      $("#totop").fadeIn(300);
		    }else{
		    	$("#totop").fadeOut(200);
		    }
		    
			});

			/*返回顶部*/
			$('#totop').click(function(){  
        $('body,html').animate({scrollTop:0},400);
        //console.log(h);
      });

			/*菜单对应位置*/
		 	$(".nav li a").click(function(){
        var oA = $(this);
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
        var index = oA.parent().index();
        var h = $(".item").eq(index).offset().top + 'px';
        if(oA.attr("class") != "current"){
            $('body,html').animate({scrollTop:h},300);
        }
      });


		});
	</script>
</body>
</html>