<template>
	<view :class="`${data.phone}-style`">
		<ChatLayout :phone="data.phone" :chatInfo="data.data" :sortMode="isSortMode" @send="handleSend">
			<!-- 弹出操作层及遮罩 -->
			<view v-if="showActionPopup" class="action-mask" @tap="closeActionPopup">
				<view class="action-popup" :style="{ top: popupTop + 'px', left: popupLeft + 'px' }">
					<view class="action-item" @tap.stop="handleEdit">
						<image class="action-icon" src="/static/image/phone-message/bianji.png"></image>
						<text>编辑</text>
					</view>
					<view class="action-item" @tap.stop="handleSwap">
						<image class="action-icon" src="/static/image/phone-message/huhuan.png"></image>
						<text>消息互换</text>
					</view>
					<view class="action-item" @tap.stop="handleSort">
						<image class="action-icon" src="/static/image/phone-message/bianji.png"></image>
						<text>排序</text>
					</view>
					<view class="action-item" @tap.stop="handleDelete">
						<image class="action-icon" src="/static/image/phone-message/shanchu.png"></image>
						<text>删除</text>
					</view>
					<!-- 向上指的三角形，因为要求在长按元素下方 -->
					<view class="triangle"></view>
				</view>
			</view>

			<!-- 编辑消息弹窗 -->
			<view v-if="showEditPopup" class="edit-mask" @tap="closeEditPopup">
				<view class="edit-popup" @tap.stop>
					<view class="edit-header">编辑消息</view>
					<view class="edit-body">
						<view class="edit-row">
							<text class="edit-label">时间：</text>
							<view class="time-picker-group">
								<picker mode="date" :value="editingDate" @change="onDateChange">
									<view class="time-picker-item">
										<text>{{ editingDate || '选择日期' }}</text>
									</view>
								</picker>
								<picker mode="time" :value="editingTimeOfDay" @change="onTimeOfDayChange">
									<view class="time-picker-item">
										<text>{{ editingTimeOfDay || '选择时刻' }}</text>
									</view>
								</picker>
							</view>
						</view>
						<view class="edit-row" style="align-items: flex-start;">
							<text class="edit-label" style="padding-top: 6rpx;">时间显示：</text>
							<view class="time-mode-group">
								<view class="time-mode-btn" :class="{ active: editingTimeMode === 'auto' }"
									@tap="editingTimeMode = 'auto'">自动</view>
								<view class="time-mode-btn" :class="{ active: editingTimeMode === 'show' }"
									@tap="editingTimeMode = 'show'">强制显示</view>
								<view class="time-mode-btn" :class="{ active: editingTimeMode === 'hide' }"
									@tap="editingTimeMode = 'hide'">强制隐藏</view>
							</view>
						</view>
						<view class="edit-row"
							v-if="data.phone == 'huawei' || data.phone == 'oppo' || data.phone == 'vivo'">
							<text class="edit-label">SIM卡：</text>
							<view class="edit-input"
								style="padding: 0; background: transparent; display: flex; align-items: center; border-radius: 8rpx; height: 70rpx;">
								<uni-data-select v-model="editingSimKa" :localdata="simList" :clear="false"
									placeholder="请选择卡号"
									style="flex: 1; border: none !important; width: 100%;"></uni-data-select>
							</view>
						</view>
						<view class="edit-row">
							<text class="edit-label">正文：</text>
						</view>
						<editor id="editor" class="edit-textarea" placeholder="请输入消息内容..." @ready="onEditorReady">
						</editor>
					</view>
					<view class="edit-footer">
						<view class="edit-btn cancel" @tap="closeEditPopup">取消</view>
						<view class="edit-btn confirm" @tap="confirmEdit">确定</view>
					</view>
				</view>
			</view>

			<ChatList :messageList="messageList" :phone="data.phone" :sortMode="isSortMode"
				@onLongPress="onMessageLongPress" @sort="onSortChange"></ChatList>


		</ChatLayout>

		<!-- 排序模式底部工具条 -->
		<view v-if="isSortMode" class="sort-toolbar">
			<view class="sort-toolbar-tip">长按消息并拖动调整顺序</view>
			<view class="sort-toolbar-actions">
				<view class="sort-toolbar-btn cancel" @tap="cancelSort">取消</view>
				<view class="sort-toolbar-btn confirm" @tap="confirmSort">完成</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import ChatLayout from '@/components/message/chat/chat-layout.vue'
import ChatList from '@/components/message/chat/chat-list.vue'
import defaultData from '../defaultData.json'
import {
	ref,
	reactive,
	computed,
	nextTick
} from 'vue'
import {
	onLoad,
	onPageScroll
} from "@dcloudio/uni-app";
import {
	stringUtil,
	util
} from '@/utils/common.js';

const defaultList = defaultData

// 与 list-index.vue 共用同一个缓存 key
const STORAGE_KEY = 'message_list'
let currentId = null  // 当前会话的 id

const messageList = ref([])
const showActionPopup = ref(false)
const popupTop = ref(0)
const popupLeft = ref(0)
const selectedMessage = ref(null)

const showEditPopup = ref(false)
const editingMessage = ref(null)
const editingTime = ref("")       // 完整时间字符串 "YYYY-MM-DD HH:mm"
const editingDate = ref("")       // 日期部分 "YYYY-MM-DD"
const editingTimeOfDay = ref("")  // 时刻部分 "HH:mm"
const editingSimKa = ref("")
const editingTimeMode = ref('auto') // 'auto' | 'show' | 'hide'
let editorCtx = null // 用于保存 editor 上下文

// ===== 排序模式相关状态 =====
const isSortMode = ref(false)
let sortingListCache = [] // 拖拽过程中的中间列表，由 ChatList emit 过来

const simList = [
	{ text: "无卡号(不显)", value: "" },
	{ text: "卡1", value: 1 },
	{ text: "卡2", value: 2 }
]

/**
 * 将当前 messageList 写回缓存中对应会话的 chatList
 * 同时更新列表条目顶层的 time（最新消息时间）
 */
const saveChatList = () => {
	if (!currentId) return
	try {
		const cached = uni.getStorageSync(STORAGE_KEY)
		const list = cached ? JSON.parse(cached) : defaultList
		const idx = list.findIndex(item => item.id == currentId)
		if (idx > -1) {
			list[idx].chatList = messageList.value.map(m => ({ ...m }))
			const chatArr = list[idx].chatList
			const last = chatArr.length ? chatArr[chatArr.length - 1] : null
			if (last && last.time) list[idx].time = last.time
			uni.setStorageSync(STORAGE_KEY, JSON.stringify(list))
		}
	} catch (e) { }
}

const onEditorReady = () => {
	uni.createSelectorQuery().select('#editor').context((res) => {
		editorCtx = res.context
		if (editingMessage.value && editingMessage.value.content) {
			editorCtx.setContents({
				html: editingMessage.value.content
			})
		}
	}).exec()
}

// 长按弹出弹出层
const onMessageLongPress = (index, message) => {
	selectedMessage.value = message;
	uni.createSelectorQuery().select('#msg-' + index).boundingClientRect(rect => {
		if (rect) {
			// 将弹窗定位在元素正下方 (bottom边界 + 一点点边距)
			popupTop.value = rect.bottom + 10;
			// 弹窗水平居中于该内容
			let left = rect.left + rect.width / 2;

			// 获取系统信息，防止弹出框超出屏幕左右侧
			uni.getSystemInfo({
				success: (info) => {
					let popupWidth = 150; // 预估弹出层的固定宽度（可根据实际情况微调）
					if (left < popupWidth / 2 + 10) left = popupWidth / 2 + 10;
					if (left > info.windowWidth - popupWidth / 2 - 10) left = info.windowWidth - popupWidth / 2 - 10;
					popupLeft.value = left;
					showActionPopup.value = true;
				}
			})
		}
	}).exec();
}

const closeActionPopup = () => {
	showActionPopup.value = false;
	selectedMessage.value = null;
}

/**
 * 编辑消息
 */
const handleEdit = () => {
	editingMessage.value = selectedMessage.value;
	editingTime.value = selectedMessage.value.time || "";
	// 拆分日期和时刻部分
	const parts = (selectedMessage.value.time || "").split(' ')
	editingDate.value = parts[0] || ""
	editingTimeOfDay.value = parts[1] || ""
	editingSimKa.value = selectedMessage.value.simKa !== undefined ? selectedMessage.value.simKa : "";
	editingTimeMode.value = selectedMessage.value.timeMode || 'auto';

	showEditPopup.value = true;
	closeActionPopup();

	// 如果已经初始化过了直接赋值
	if (editorCtx) {
		setTimeout(() => {
			editorCtx.setContents({
				html: editingMessage.value.content
			})
		}, 100)
	}
}

const closeEditPopup = () => {
	showEditPopup.value = false;
	editingMessage.value = null;
}

/**
 * 日期选择器回调 - 更新日期部分并同步 editingTime
 */
const onDateChange = (e) => {
	editingDate.value = e.detail.value
	editingTime.value = `${editingDate.value} ${editingTimeOfDay.value}`.trim()
}

/**
 * 时刻选择器回调 - 更新时刻部分并同步 editingTime
 */
const onTimeOfDayChange = (e) => {
	editingTimeOfDay.value = e.detail.value
	editingTime.value = `${editingDate.value} ${editingTimeOfDay.value}`.trim()
}

const confirmEdit = () => {
	if (editingMessage.value && editorCtx) {
		editorCtx.getContents({
			success: (res) => {
				const index = messageList.value.findIndex(item => item.id === editingMessage.value.id)
				if (index > -1) {
					messageList.value[index].content = res.html;
					messageList.value[index].time = editingTime.value;
					// 保存 timeMode: 'auto'|'show'|'hide'
					if (editingTimeMode.value === 'auto') {
						delete messageList.value[index].timeMode;
					} else {
						messageList.value[index].timeMode = editingTimeMode.value;
					}
					// 兼容旧 hideTime 字段：一并清除
					delete messageList.value[index].hideTime;
					if (editingSimKa.value) {
						messageList.value[index].simKa = Number(editingSimKa.value);
					} else {
						delete messageList.value[index].simKa;
					}
				}
				closeEditPopup();
				saveChatList();
			}
		})
	} else {
		closeEditPopup();
	}
}

/**
 * 消息互换
 */
const handleSwap = () => {
	const index = messageList.value.findIndex(item => item.id === selectedMessage.value.id)
	messageList.value[index].isMe = !messageList.value[index].isMe
	closeActionPopup();
	saveChatList()
}

/**
 * 进入拖动排序模式
 */
const handleSort = () => {
	isSortMode.value = true
	sortingListCache = messageList.value.map(item => ({ ...item }))
	closeActionPopup()
}

/**
 * ChatList 拖拽排序后回调 - 实时更新中间缓存
 */
const onSortChange = (newList) => {
	sortingListCache = newList
}

/**
 * 取消排序，还原 messageList
 */
const cancelSort = () => {
	isSortMode.value = false
	// 不应用排序结果，无需重置messageList
}

/**
 * 确认排序，将拖拽结果写回 messageList
 */
const confirmSort = () => {
	if (sortingListCache.length > 0) {
		messageList.value = sortingListCache.map(item => ({ ...item }))
	}
	isSortMode.value = false
	saveChatList()
}

/**
 * 删除消息
 */
const handleDelete = () => {
	const index = messageList.value.findIndex(item => item.id === selectedMessage.value.id)
	messageList.value.splice(index, 1)
	closeActionPopup();
	saveChatList()
}

const data = reactive({
	phone: "iphone",
	data: {}
})
onLoad((options) => {
	console.log(options)
	if (options.phone) {
		data.phone = options.phone
	}
	if (options.id) {
		currentId = options.id
		// 优先从缓存读取
		try {
			const cached = uni.getStorageSync(STORAGE_KEY)
			const list = cached ? JSON.parse(cached) : defaultList
			const found = list.find(item => item.id == options.id)
			if (found) {
				data.data = found
				messageList.value = found.chatList || []
				return
			}
		} catch (e) { }
		// 缓存未命中时降级用内建默认数据
		data.data = defaultList.find(item => item.id == options.id)
		messageList.value = data.data?.chatList || []
	}
})

const handleSend = (params) => {
	console.log(params)
	params.id = stringUtil.uuid()
	messageList.value.push(params)
	saveChatList()
}
</script>

<style lang="less" scoped>
.action-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}

/* 拖动排序弹窗样式 */
.sort-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1100;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sort-popup {
	width: 680rpx;
	max-height: 80vh;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 排序模式底部工具条 - 覆盖在输入框上，高度与输入框一致 */
.sort-toolbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1200;
	background-color: rgba(255, 255, 255, 0.97);
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16rpx 32rpx;
	box-shadow: 0 -1rpx 0 rgba(0, 0, 0, 0.1);
}

.sort-toolbar-tip {
	flex: 1;
	font-size: 24rpx;
	color: #999999;
	text-align: left;
}

.sort-toolbar-actions {
	display: flex;
	flex-direction: row;
	gap: 20rpx;
}

.sort-toolbar-btn {
	height: 72rpx;
	line-height: 72rpx;
	padding: 0 44rpx;
	text-align: center;
	font-size: 30rpx;
	border-radius: 36rpx;
}

.sort-toolbar-btn.cancel {
	background-color: #F0F0F0;
	color: #666666;
}

.sort-toolbar-btn.confirm {
	background-color: #007AFF;
	color: #FFFFFF;
	font-weight: bold;
}


.action-popup {
	position: fixed;
	background-color: #4C4C4C;
	border-radius: 12rpx;
	padding: 20rpx 30rpx;
	display: flex;
	transform: translateX(-50%);
	width: 540rpx;
	z-index: 10;
}

.action-popup .triangle {
	position: absolute;
	top: -12rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 12rpx solid transparent;
	border-right: 12rpx solid transparent;
	border-bottom: 14rpx solid #4C4C4C;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #FFFFFF;
	font-size: 20rpx;
	margin: 0 20rpx;
}

.action-icon {
	width: 36rpx;
	height: 36rpx;
	margin-bottom: 8rpx;
}

/* 编辑弹窗样式 */
.edit-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
}

.edit-popup {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.edit-header {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #EEEEEE;
}

.edit-body {
	padding: 30rpx;
}

.edit-textarea {
	width: 100%;
	height: 200rpx;
	background-color: #F8F8F8;
	padding: 20rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #333;
	box-sizing: border-box;
}

::v-deep .ql-container {
	min-height: 100px;
}

.edit-footer {
	display: flex;
	border-top: 1rpx solid #EEEEEE;
}

.edit-btn {
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
}

.edit-btn.cancel {
	color: #666;
	border-right: 1rpx solid #EEEEEE;
}

.edit-btn.confirm {
	color: #007AFF;
	font-weight: bold;
}

.edit-row {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.edit-label {
	font-size: 28rpx;
	color: #333;
	width: 150rpx;
	flex-shrink: 0;
}

.edit-input {
	flex: 1;
	height: 70rpx;
	background-color: #F8F8F8;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
}

.time-mode-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.time-mode-btn {
	padding: 4rpx 12rpx;
	border-radius: 32rpx;
	font-size: 26rpx;
	color: #666666;
	margin: 0 6rpx;
	background-color: #F0F0F0;
	border: 2rpx solid transparent;
}

.time-mode-btn.active {
	color: #007AFF;
	background-color: #E8F2FF;
	border-color: #007AFF;
}

/* 时间选择器组合样式 */
.time-picker-group {
	display: flex;
	flex-direction: row;
	gap: 16rpx;
	flex: 1;
}

.time-picker-item {
	flex: 1;
	height: 70rpx;
	line-height: 70rpx;
	background-color: #F8F8F8;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333333;
	text-align: center;
}
</style>
