<template>
	<view>
		<MessageNavBar :phone="data.phone" :isScroll="data.isScroll" @add="openAddPopup">
			<MessageList :phone="data.phone" :list="defaultList" @item-click="itemClick" @delete-item="deleteItem"
				@edit-item="editItem">
			</MessageList>
		</MessageNavBar>

		<!-- 添加短信弹窗 -->
		<view v-if="showAddPopup" class="add-mask" @tap="closeAddPopup">
			<view class="add-popup" @tap.stop>
				<view class="add-header">{{ editingItem ? '编辑短信' : '新建短信' }}</view>
				<view class="add-body">
					<view class="add-row">
						<text class="add-label">头像URL：</text>
						<view class="image-box" style="width: 84rpx;height: 84rpx;" @tap="selectImage">
							<image v-if="addForm.img" class="image w100 h100" :src="addForm.img" mode="aspectFill">
							</image>
							<image v-else class="image w100 h100" src="/static/image/phone-message/add.png"
								mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="add-row">
						<text class="add-label required">联系人</text>
						<input class="add-input" v-model="addForm.title" placeholder="请输入名称或号码" />
					</view>
					<view class="add-row between" v-if="data.phone == 'iphone'">
						<text class="add-label">取消通知</text>
						<switch :checked="addForm.noNotice" @change="addForm.noNotice = !addForm.noNotice" />
					</view>
					<view class="add-row between">
						<text class="add-label">是否未读</text>
						<switch :checked="addForm.unRead" @change="addForm.unRead = !addForm.unRead" />
					</view>
					<view class="add-row" v-if="addForm.unRead && data.phone == 'oppo' || data.phone == 'huawei'">
						<text class="add-label">未读数量</text>
						<input class="add-input" type="number" v-model="addForm.unReadNumber" placeholder="请输入未读数量" />
					</view>
					<view class="add-row" v-if="addForm.chatList.length == 0 && editingItem">
						<text class="add-label">消息时间</text>
						<view class="time-picker-group">
							<picker mode="date" :value="addForm.date" @change="onAddDateChange">
								<view class="time-picker-item">
									<text>{{ addForm.date || '选择日期' }}</text>
								</view>
							</picker>
							<picker mode="time" :value="addForm.timeOfDay" @change="onAddTimeChange">
								<view class="time-picker-item">
									<text>{{ addForm.timeOfDay || '选择时刻' }}</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="add-footer">
					<view class="add-btn cancel" @tap="closeAddPopup">取消</view>
					<view class="add-btn confirm" @tap="confirmAdd">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import MessageNavBar from '@/components/message/list/message-nav-bar.vue'
import MessageList from '@/components/message/list/list.vue'
import defaultData from './defaultData.json'
import {
	ref,
	reactive
} from 'vue'
import {
	onLoad,
	onShow,
	onPageScroll
} from "@dcloudio/uni-app";
import {
	stringUtil,
	util
} from '@/utils/common.js';

const defaultList = ref(defaultData)

const data = reactive({
	navBar: {
		title: '信息',
		bgColor: '#FFFFFF',
	},
	phone: 'iphone',
	isScroll: false
})

const STORAGE_KEY = 'message_list'

onLoad((options) => {
	if (options.phone) {
		data.phone = options.phone
	}

})

onShow(() => {
	// 优先从缓存加载列表
	try {
		const cached = uni.getStorageSync(STORAGE_KEY)
		if (cached) {
			defaultList.value = JSON.parse(cached)
		}
	} catch (e) { }
})


onPageScroll((e) => {
	if (e.scrollTop > 60) {
		data.isScroll = true
	} else {
		data.isScroll = false
	}
})

/**
 * 删除元素
 * @param item 
 */
const deleteItem = (item) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除吗？',
		success: (res) => {
			if (res.confirm) {
				defaultList.value.splice(defaultList.value.findIndex(i => i.id === item.id), 1)
				uni.setStorageSync(STORAGE_KEY, JSON.stringify(defaultList.value))
			}
		}
	})
}

/**
 * 选择图片
 */
const selectImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			addForm.img = res.tempFilePaths[0]
		}
	})
}

const itemClick = (item) => {
	util.goPage(`/pages/message/chat-page/chat-page?phone=${data.phone}&id=${item.id}`)
}

// ===== 添加短信弹窗 =====
const showAddPopup = ref(false)
const addForm = reactive({
	title: '',
	img: '',
	content: '',
	date: '',
	timeOfDay: ''
})

// 弹窗模式：null=新增，有值=编辑中的条目
const editingItem = ref(null)

const openAddPopup = () => {
	// 重置表单，默认时间为当前
	const now = new Date()
	const pad = v => String(v).padStart(2, '0')
	editingItem.value = null
	addForm.title = ''
	addForm.img = ''
	addForm.content = ''
	addForm.unRead = false
	addForm.unReadNumber = 1
	addForm.noNotice = false
	addForm.chatList = []
	addForm.date = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
	addForm.timeOfDay = `${pad(now.getHours())}:${pad(now.getMinutes())}`
	showAddPopup.value = true
}

const closeAddPopup = () => {
	showAddPopup.value = false
}

const onAddDateChange = (e) => {
	addForm.date = e.detail.value
}

const onAddTimeChange = (e) => {
	addForm.timeOfDay = e.detail.value
}

/**
 * 编辑元素：回填表单并打开弹窗
 */
const editItem = (item) => {
	editingItem.value = item
	const lastMsg = item.chatList && item.chatList.length ? item.chatList[item.chatList.length - 1] : null
	const timeStr = lastMsg ? lastMsg.time : (item.time || '')
	const parts = timeStr.split(' ')
	addForm.title = item.title || ''
	addForm.img = item.img || ''
	addForm.content = ''
	addForm.unRead = !!item.unRead
	addForm.unReadNumber = item.unReadNumber || 0
	addForm.date = parts[0] || ''
	addForm.timeOfDay = parts[1] || ''
	addForm.chatList = item.chatList || []
	showAddPopup.value = true
}

const confirmAdd = () => {
	if (!addForm.title.trim()) {
		uni.showToast({ title: '请输入联系人名称', icon: 'none' })
		return
	}
	console.log(addForm)
	const time = `${addForm.date} ${addForm.timeOfDay}`.trim()

	if (editingItem.value) {
		// ===== 编辑模式：更新已有条目 =====
		const idx = defaultList.value.findIndex(i => i.id === editingItem.value.id)
		if (idx > -1) {
			defaultList.value[idx].title = addForm.title.trim()
			defaultList.value[idx].img = addForm.img.trim()
			defaultList.value[idx].unRead = addForm.unRead
			defaultList.value[idx].unReadNumber = addForm.unReadNumber
			defaultList.value[idx].noNotice = addForm.noNotice
			defaultList.value[idx].time = time
		}
	} else {
		// ===== 新增模式 =====
		const newItem = {
			id: Date.now(),
			unRead: addForm.unRead,
			unReadNumber: addForm.unReadNumber,
			noNotice: addForm.noNotice,
			img: addForm.img.trim(),
			title: addForm.title.trim(),
			chatList: addForm.content.trim() ? [
				{
					id: stringUtil.uuid(),
					time: time,
					content: `<p>${addForm.content.trim()}</p>`,
					isMe: false
				}
			] : [],
			time: time
		}
		defaultList.value.unshift(newItem)
	}

	// 按最新消息时间降序排列
	defaultList.value.sort((a, b) => {
		const timeA = new Date(((a.chatList && a.chatList.length ? a.chatList[a.chatList.length - 1].time : null) || a.time || '').replace(/-/g, '/')).getTime()
		const timeB = new Date(((b.chatList && b.chatList.length ? b.chatList[b.chatList.length - 1].time : null) || b.time || '').replace(/-/g, '/')).getTime()
		return timeB - timeA
	})
	try {
		uni.setStorageSync(STORAGE_KEY, JSON.stringify(defaultList.value))
	} catch (e) { }
	closeAddPopup()
}

</script>

<style>
@import '@/common/main.css';

page {
	background-color: #FFFFFF;
}
</style>
<style lang="less">
::v-deep .uni-navbar__header-btns {
	width: 100px !important;
	flex: 1;
}

.iphone-style {
	.mg-r-30 {
		margin-right: 60rpx;
	}

	.mg-r-5 {
		margin-right: 10rpx;
	}

	.left-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.right-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.left-text {
		font-size: 32rpx;
		color: #0278E2;
		margin-left: 10rpx;
	}

	.center-text {
		font-size: 32rpx;
		color: #1a1a1a;
	}
}

.mi-style {
	.right-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}
}

/* ===== 添加短信弹窗 ===== */
.add-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
}

.add-popup {
	width: 88%;
	background-color: #ffffff;
	border-radius: 24rpx;
	overflow: hidden;
}

.add-header {
	padding: 36rpx 40rpx 20rpx;
	font-size: 34rpx;
	font-weight: bold;
	color: #1A1A1A;
	text-align: center;
}

.add-body {
	padding: 8rpx 0;
}

.add-row {
	display: flex;
	align-items: center;
	padding: 20rpx 32rpx;
	gap: 16rpx;
}

.between {
	justify-content: space-between;
}

.required {
	position: relative;
}

.required::before {
	position: absolute;
	left: -10px;
	content: '*';
	top: 0;
	color: #EA0000;
}

.add-label {
	font-size: 28rpx;
	color: #1A1A1A;
	width: 150rpx;
	flex-shrink: 0;
}

.add-input {
	flex: 1;
	height: 70rpx;
	background-color: #F6F6F6;
	border-radius: 14rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #1A1A1A;

	::v-deep .uni-input {
		color: #aaaaaa;
	}
}

.add-footer {
	padding: 32rpx 24rpx;
	display: flex;
}

.add-btn {
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
	background-color: #F1F1F1;
	margin: 0 16rpx;
	border-radius: 12rpx;
}

.add-btn.cancel {
	color: #767676;
}

.add-btn.confirm {
	color: #fff;
	background-color: #1777FF;
}

.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>
