<!-- HistoryDrawer.vue -->
<template>
	<!-- 抽屉容器，visible控制显示 -->
	<view v-if="visible" class="drawer-container" @touchmove.stop.prevent>
		<!-- 遮罩层，点击关闭 -->
		<view class="drawer-mask" @click="closeDrawer"></view>

		<!-- 抽屉内容区域 -->
		<view class="drawer-content">
			<!-- 标题区域 -->
			<view class="drawer-header">
				<text class="title">历史记录</text>
				<image src="/static/close.svg" mode="aspectFit" class="close-icon" @click="closeDrawer" />
			</view>

			<!-- 搜索栏 -->
			<view class="search-bar">
				<image src="/static/search.svg" mode="aspectFit" class="search-icon" />
				<input v-model="searchKeyword" placeholder="搜索聊天记录..." class="search-input" @input="handleSearch" />
				<image v-if="searchKeyword" src="/static/clear.svg" class="clear-icon" @click="clearSearch" />
			</view>

			<!-- 历史列表区域 -->
			<scroll-view scroll-y class="history-list">
				<!-- 分组渲染历史记录 -->
				<block v-for="(group, gIndex) in filteredRecords" :key="gIndex">
					<view class="group-title">{{ group.title }}</view>
					<view v-for="item in group.list" :key="item.id" class="history-item" @click="onItemClick(item)">
						<!-- 日期时间显示 -->
						<view class="datetime">
							<text class="date">{{ item.date }}</text>
							<text class="time">{{ item.time }}</text>
						</view>
						<!-- 消息内容 -->
						<view class="record">
							<text class="user-msg" v-html="highlightKeyword(item.content)"></text>
							<text class="ai-msg" v-html="highlightKeyword(item.reply)"></text>
						</view>
						<view class="divider"></view>
					</view>
				</block>

				<!-- 空状态提示 -->
				<view v-if="filteredRecords.length === 0" class="empty-tip">
					<text>{{ searchKeyword ? '没有找到匹配的记录' : '暂无聊天记录' }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getHistory
	} from '../../api/aiChat/ai_index.js'; // 历史记录API

	export default {
		name: 'HistoryDrawer',
		props: {
			visible: Boolean // 控制抽屉显示
		},
		data() {
			return {
				historyRecords: [], // 原始历史记录
				filteredRecords: [], // 过滤后的历史记录
				searchKeyword: '' // 搜索关键词
			};
		},
		watch: {
			// 监听visible变化，显示时加载记录
			visible(newVal) {
				if (newVal) this.loadHistoryRecords();
				else this.clearSearch();
			}
		},
		methods: {
			// 关闭抽屉
			closeDrawer() {
				this.$emit('close');
			},

			/* ========== 1. 读本地缓存兜底 ========== */
			renderLocal(list) {
				// 将本地缓存的消息按日期分组
				const groupMap = {};
				list.forEach((m, idx) => {
					const date = new Date();
					const formatted = {
						date: this.formatDate(date),
						time: this.formatTime(date),
						content: m.sender === 'user' ? m.content : '',
						reply: m.sender === 'ai' ? m.content : '',
						id: idx
					};
					const title = this.getGroupTitle(date);
					(groupMap[title] ||= []).push(formatted);
				});

				// 转换为数组形式
				this.historyRecords = Object.entries(groupMap).map(([t, arr]) => ({
					title: t,
					list: arr
				}));
				this.filteredRecords = [...this.historyRecords];
			},

			/* ========== 2. 加载接口或本地缓存 ========== */
			async loadHistoryRecords() {
				try {
					// 1. 先读本地缓存，立即显示（避免空白）
					const local = uni.getStorageSync('chatHistory') || [];
					if (local.length) this.renderLocal(local);

					// 2. 再调接口，成功后覆盖本地
					const res = await getHistory({
						conversationId: '5665af64-22b4-4a59-b15f-2126eb056302',
						user: '2023429112',
						limit: 50
					});
					console.log('原始返回结构', res);

					const list = res?.data?.data || [];
					if (!list.length) return; // 接口返回空数组也保留本地

					// 处理API返回的数据
					const groupMap = {};
					list.forEach(item => {
						const ts = item.created_at ?? item.create_time ?? item.timestamp ?? 0;
						const date = String(ts).length === 13 ? new Date(ts) : new Date(ts * 1000);

						const formatted = {
							date: this.formatDate(date),
							time: this.formatTime(date),
							content: item.query || item.question || item.content || '未知内容',
							reply: item.answer || item.reply || '暂无回复',
							id: item.id || Math.random().toString(36).slice(2)
						};

						const title = this.getGroupTitle(date);
						(groupMap[title] ||= []).push(formatted);
					});

					// 按时间排序并更新数据
					this.historyRecords = Object.entries(groupMap).map(([title, arr]) => ({
						title,
						list: arr.sort((a, b) => b.timestamp - a.timestamp)
					}));
					this.filteredRecords = [...this.historyRecords];
				} catch (e) {
					console.error('历史接口 401，已使用本地缓存兜底', e);
					// 接口失败时，保留本地缓存（不覆盖）
				}
			},

			// 处理搜索输入
			handleSearch() {
				const kw = this.searchKeyword.trim().toLowerCase();
				if (!kw) return (this.filteredRecords = [...this.historyRecords]);

				// 过滤历史记录
				this.filteredRecords = this.historyRecords
					.map(g => ({
						...g,
						list: g.list.filter(i =>
							i.content.toLowerCase().includes(kw) ||
							i.reply.toLowerCase().includes(kw)
						)
					}))
					.filter(g => g.list.length);
			},

			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
				this.filteredRecords = [...this.historyRecords];
			},

			// 高亮搜索关键词
			highlightKeyword(text) {
				if (!this.searchKeyword || !text) return text;
				const kw = this.searchKeyword.trim();
				return text.replace(
					new RegExp(kw, 'gi'),
					`<span class="highlight">${kw}</span>`
				);
			},

			// 获取分组标题（今天/昨天/7天内等）
			getGroupTitle(date) {
				const now = new Date();
				const today = new Date(now.setHours(0, 0, 0, 0));
				const yesterday = new Date(today).setDate(today.getDate() - 1);
				const week = new Date(today).setDate(today.getDate() - 7);
				const month = new Date(today).setDate(today.getDate() - 30);

				if (date >= today) return '今天';
				if (date >= yesterday) return '昨天';
				if (date >= week) return '7天内';
				if (date >= month) return '30天内';
				return '更早';
			},

			// 格式化日期为YYYY-MM-DD
			formatDate(date) {
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date
        .getDate()
        .toString()
        .padStart(2, '0')}`;
			},

			// 格式化时间为HH:MM
			formatTime(date) {
				return `${date.getHours().toString().padStart(2, '0')}:${date
        .getMinutes()
        .toString()
        .padStart(2, '0')}`;
			},

			// 点击历史记录项
			onItemClick(item) {
				// 移除HTML标签后触发事件
				this.$emit('item-click', {
					...item,
					content: item.content.replace(/<[^>]+>/g, ''),
					reply: item.reply.replace(/<[^>]+>/g, '')
				});
				this.closeDrawer();
			}
		}
	};
</script>

<style scoped>
	/* 抽屉容器样式 */
	.drawer-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	/* 遮罩层样式 */
	.drawer-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
	}

	/* 抽屉内容区域样式 */
	.drawer-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 66.67%;
		height: 100vh;
		background-color: #fff;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
	}

	/* 头部样式 */
	.drawer-header {
		padding: 15px 15px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		height: 50px;
		box-sizing: border-box;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.close-icon {
		width: 24px;
		height: 24px;
	}

	/* 搜索栏样式 */
	.search-bar {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		background-color: #f5f5f5;
		border-bottom: 1px solid #eee;
	}

	.search-icon {
		width: 18px;
		height: 18px;
		margin-right: 8px;
		tint-color: #999;
	}

	.search-input {
		flex: 1;
		height: 36px;
		background-color: #fff;
		border-radius: 18px;
		padding: 0 15px;
		font-size: 14px;
	}

	.clear-icon {
		width: 16px;
		height: 16px;
		margin-left: 8px;
		tint-color: #999;
	}

	/* 历史列表样式 */
	.history-list {
		flex: 1;
		overflow-y: auto;
		padding: 10px 0;
		box-sizing: border-box;
	}

	/* 分组标题样式 */
	.group-title {
		font-size: 14px;
		color: #888;
		padding: 12px 20px;
		background-color: #f5f5f5;
	}

	/* 历史记录项样式 */
	.history-item {
		padding: 15px 20px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	/* 日期时间样式 */
	.datetime {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.date {
		font-size: 13px;
		color: #666;
	}

	.time {
		font-size: 12px;
		color: #999;
	}

	/* 消息内容样式 */
	.record {
		font-size: 14px;
		line-height: 1.6;
	}

	.user-msg {
		display: block;
		color: #333;
		margin-bottom: 6px;
		padding: 6px 10px;
		background-color: #f9f9f9;
		border-radius: 6px;
	}

	.ai-msg {
		display: block;
		color: #333;
		padding: 6px 10px;
		background-color: #eef7ff;
		border-radius: 6px;
	}

	/* 关键词高亮样式 */
	.highlight {
		color: #ff4d4f;
		font-weight: bold;
	}

	/* 分隔线样式 */
	.divider {
		height: 8px;
		background-color: #f9f9f9;
		margin-top: 10px;
		border-radius: 4px;
	}

	/* 空状态提示样式 */
	.empty-tip {
		text-align: center;
		color: #999;
		font-size: 16px;
		margin-top: 50px;
	}

	/* 修复输入框占位符样式 */
	input::-webkit-input-placeholder {
		color: #ccc;
		font-size: 14px;
	}
</style>