<template>
	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_other_message" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_message')">
			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
		</liu-drag-button>
	</view>
	<view :class="`${data.phone}-style`">
		<ChatLayout :phone="data.phone" :chatInfo="data.data" :sortMode="isSortMode" @send="handleSend"
			:number="data.number" @dblclick-left="onDblclickLeft" @dblclick-right="onDblclickRight"
			@title-click="handleTitleClick">
			<ChatList :messageList="messageList" :phone="data.phone" :sortMode="isSortMode"
				@onLongPress="onMessageLongPress" @sort="onSortChange" @previewImage="handlePreviewImage"></ChatList>
		</ChatLayout>

		<!-- 弹出操作层及遮罩 -->
		<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/sort.png"></image>
					<text>排序</text>
				</view>
				<view class="action-item" @tap.stop="handleChangeSpeaker">
					<image class="action-icon" src="/static/image/phone-message/change.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" :fields="$system == 'Android' ? 'day' : ''" :value="editingDate"
								@change="onDateChange">
								<view class="time-picker-item">
									<text>{{ editingDate || '选择日期' }}</text>
								</view>
							</picker>
							<picker mode="time" :fields="$system == 'Android' ? 'minute' : ''" :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="请选择卡号" @change="onSimKaChange"
								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>

		<!-- 排序模式底部工具条 -->
		<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 v-if="showAddPopup" class="add-mask" @tap="closeAddPopup">
			<view class="add-popup" @tap.stop>
				<view class="add-header">编辑当前短信信息</view>
				<view class="add-body">
					<view class="add-row">
						<text class="add-label">头像URL：</text>
						<view style="position: relative;">
							<view class="image-box" :class="addForm.imgShape" 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 v-if="addForm.img" class="delete-img-icon" @tap.stop="deleteImage">
								×
							</view>
						</view>
						<view v-if="data.phone == 'iphone'"
							style="flex: 1;display: flex;align-items: center;justify-content: flex-end;">
							<uni-data-checkbox style="display: flex;justify-content: flex-end;"
								v-model="addForm.imgShape" :localdata="shape"></uni-data-checkbox>
						</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" v-if="data.phone == 'oppo'">
						<text class="add-label">地区</text>
						<input class="add-input" v-model="addForm.area" 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' || data.phone == 'iphone')">
						<text class="add-label">未读数量</text>
						<input class="add-input" type="number" v-model="addForm.unReadNumber" placeholder="请输入未读数量" />
					</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>
		<ImagePreview v-model:show="showPreview" :images="previewImages" :currentIndex="previewIndex" />
	</view>
</template>

<script setup>
import ImagePreview from '@/components/message/chat/image-preview.vue'
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
} from 'vue'
import {
	onLoad,
	onShow
} 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

let isMe = ref(true)

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 showPreview = ref(false)
const previewImages = ref([])
const previewIndex = ref(0)

const handlePreviewImage = (data) => {
	previewImages.value = data.images
	previewIndex.value = data.index
	showPreview.value = true
}

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()
}

let longpressType = ref('message')
// 长按弹出弹出层
const onMessageLongPress = (index, message, type) => {
	selectedMessage.value = message;
	longpressType.value = type
	const selector = type === 'time' ? '#time-' + index : '#msg-' + index;
	uni.createSelectorQuery().select(selector).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.simIndex !== undefined ? selectedMessage.value.simIndex : "";
	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()
}

/**
 * 切换sim卡
 * @param value 
 */
const onSimKaChange = (value) => {
	editingSimKa.value = value
}

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].simIndex = Number(editingSimKa.value);
					} else {
						delete messageList.value[index].simIndex;
					}
				}
				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 handleChangeSpeaker = () => {
	isMe.value = !isMe.value
	if (isMe.value) {
		uni.showToast({
			title: "现在是自己发言",
			icon: "none"
		})
	} else {
		uni.showToast({
			title: "现在是对方发言",
			icon: "none"
		})
	}
	closeActionPopup();
}

/**
 * 删除消息
 */
const handleDelete = () => {
	const index = messageList.value.findIndex(item => item.id === selectedMessage.value.id)
	const deletedMsg = messageList.value[index]

	// 如果是图片消息且存在本地持久化路径，则执行删除物理文件
	// #ifdef APP-PLUS
	if (deletedMsg && deletedMsg.type === 'image' && deletedMsg.imgUrl && deletedMsg.imgUrl.includes('_doc/')) {
		uni.removeSavedFile({
			filePath: deletedMsg.imgUrl,
			success: () => console.log('单条图片消息本地文件删除成功:', deletedMsg.imgUrl),
			fail: (err) => console.warn('单条图片消息本地文件删除失败:', deletedMsg.imgUrl, err)
		})
	}
	// #endif

	messageList.value.splice(index, 1)
	closeActionPopup();
	saveChatList()
}

const data = reactive({
	phone: "iphone",
	data: {},
	number: 0
})
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)
			let list = cached ? JSON.parse(cached) : defaultList
			const found = list.find(item => item.id == options.id)
			if (found) {
				data.data = found
				let number = 0
				list.forEach(item => {
					if (item.id == options.id) {
						item.unRead = false
						item.unReadNumber = 1
					}
					console.log(number + item.unRead ? item.unReadNumber : 0)
					number = number + Number(item.unRead ? item.unReadNumber : 0)
				})
				data.number = number
				console.log(data.data)
				uni.setStorageSync(STORAGE_KEY, JSON.stringify(list))

				messageList.value = found.chatList || []
				return
			}
		} catch (e) {
			// 忽略异常
		}
		// 缓存未命中时降级用内建默认数据
		data.data = defaultList.find(item => item.id == options.id)
		messageList.value = data.data?.chatList || []
	}
})

onShow(() => {
	// #ifdef APP-PLUS
	if (data.phone == 'oppo') {
		util.setAndroidSystemBarColor('#FAFAFA')
	} else {
		util.setAndroidSystemBarColor('#ffffff')
	}
	setTimeout(() => {
		plus.navigator.setStatusBarStyle("dark");
	}, 500)
	// #endif
})


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

/**
 * 双击左侧
 */
const onDblclickLeft = () => {
	isMe.value = false
	uni.showToast({
		title: "现在是对方发言",
		icon: "none"
	})
}

/**
 * 双击右侧
 */
const onDblclickRight = () => {
	isMe.value = true
	uni.showToast({
		title: "现在是自己发言",
		icon: "none"
	})
}


const showAddPopup = ref(false)
const addForm = reactive({
	title: '',
	img: '',
	imgShape: 'circle',
	area: '',
	unRead: false,
	unReadNumber: 1,
	noNotice: false
})
const shape = [{ text: '圆形', value: 'circle' }, { text: '方形', value: 'square' }]

const handleTitleClick = () => {
	const item = data.data
	addForm.title = item.title || ''
	addForm.img = item.img || ''
	addForm.imgShape = item.imgShape || 'circle'
	addForm.area = item.area || ''
	addForm.unRead = !!item.unRead
	addForm.unReadNumber = item.unReadNumber || 0
	addForm.noNotice = item.noNotice || false
	showAddPopup.value = true
}

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

const selectImage = () => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			addForm.img = res.tempFilePaths[0]
		}
	})
}

const deleteImage = () => {
	addForm.img = ''
}

const confirmAdd = async () => {
	if (!addForm.title.trim()) {
		uni.showToast({ title: '请输入联系人名称', icon: 'none' })
		return
	}

	let finalImgPath = addForm.img
	if (addForm.img && !addForm.img.startsWith('_doc') && !addForm.img.startsWith('/static')) {
		try {
			const res = await new Promise((resolve, reject) => {
				uni.saveFile({
					tempFilePath: addForm.img,
					success: resolve,
					fail: reject
				})
			})
			finalImgPath = res.savedFilePath
		} catch (e) {
			console.error('保存图片失败', e)
		}
	}

	data.data.title = addForm.title.trim()
	data.data.img = finalImgPath
	data.data.unRead = addForm.unRead
	data.data.unReadNumber = addForm.unReadNumber
	data.data.noNotice = addForm.noNotice
	data.data.imgShape = addForm.imgShape
	data.data.area = addForm.area

	try {
		const cached = uni.getStorageSync(STORAGE_KEY)
		let list = cached ? JSON.parse(cached) : []
		const idx = list.findIndex(item => item.id == currentId)
		if (idx > -1) {
			list[idx].title = data.data.title
			list[idx].img = data.data.img
			list[idx].unRead = data.data.unRead
			list[idx].unReadNumber = data.data.unReadNumber
			list[idx].noNotice = data.data.noNotice
			list[idx].imgShape = data.data.imgShape
			list[idx].area = data.data.area
			uni.setStorageSync(STORAGE_KEY, JSON.stringify(list))
		}
	} catch (e) {
		console.error(e)
	}

	closeAddPopup()
}
</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;
	justify-content: space-between;
	transform: translateX(-50%);
	width: 540rpx;
	z-index: 999;
}

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

	text {
		white-space: nowrap;
	}
}

.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: 99;
	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;
}

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

.edit-btn {
	flex: 1;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 32rpx;
	border-radius: 12rpx;
	margin: 32rpx 16rpx;
	margin-top: 0;
}

.edit-btn.cancel {
	color: #767676;
	background-color: #F1F1F1;
	margin-left: 30rpx;
}

.edit-btn.confirm {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #1777FF;
	margin-right: 30rpx;
}

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

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

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

	.image-box {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		overflow: hidden;

		.image {
			width: 100%;
			height: 100%;
		}
	}

	.circle {
		border-radius: 50%;
	}

	.square {
		border-radius: 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;
}

.delete-img-icon {
	position: absolute;
	top: -12rpx;
	right: -12rpx;
	width: 32rpx;
	height: 32rpx;
	background-color: red;
	color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	line-height: 28rpx;
	padding-bottom: 2rpx;
	z-index: 2;
}
</style>
