<template>
	<view class="page-container flex-column" :class="`${phone}-style`">
		<view class="status-placeholder w100" :style="{ height: `${data.statusBarHeight}px` }"></view>
		<!-- <view class="top-placeholder" :style="{ height: data.topBoxHeight + 'px' }"></view> -->
		<view class="top-box " :style="{ top: data.statusBarHeight + 'px' }">
			<slot name="top">
				<view class="top-container" v-show="!sortMode" @click.stop="handleTitleClick">
					<view class="h100 flex-align-center flex-justify-between">
						<view class="left flex-align-center">
							<image @click.stop="util.goBack()" :src="`/static/image/phone-message/${phone}/back.png`">
							</image>
							<view v-if="phone == 'iphone' && number > 0" class="number-box">{{ number }}</view>
						</view>
						<view class="center">
							<image v-if="phone == 'iphone' || phone == 'huawei'" class="img shrink-0"
								:class="chatInfo.imgShape"
								:src="chatInfo.img || `/static/image/phone-message/${phone}/default.png`">
							</image>
							<text v-if="phone != 'iphone'" class="title">{{ displayTitle }}</text>
							<text v-if="phone == 'oppo' && chatInfo.area" class="second-text">{{ chatInfo.area }}</text>
						</view>
						<view class="right flex-align-center">
							<image v-if="phone == 'mi'" class="img shrink-0"
								src="/static/image/phone-message/mi/nav-right-icon.png">
							</image>
							<image v-if="phone == 'oppo'" class="img shrink-0"
								src="/static/image/phone-message/oppo/nav-right-icon.png">
							</image>
							<image v-if="phone == 'huawei'" class="img shrink-0"
								src="/static/image/phone-message/huawei/chat-more.png">
							</image>
							<image v-if="phone == 'vivo'" class="img shrink-0"
								src="/static/image/phone-message/vivo/select.png">
							</image>
							<image v-if="phone == 'vivo'" class="img shrink-0 m-l-50"
								src="/static/image/phone-message/vivo/more.png">
							</image>
						</view>
					</view>
					<view v-if="phone == 'iphone'" class="text-box flex-align-center flex-justify-center">
						<text class="title">{{ displayTitle }}</text>
						<!-- <uni-icons type="right" size="10" color="#D8D8D8"></uni-icons> -->
						<image style="width: 16rpx;height: 16rpx;"
							src="/static/image/phone-message/iphone/chat-right.png"></image>
					</view>
				</view>
			</slot>
		</view>
		<view class="center-box flex-1" @click="handleBoxClick">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation :show-scrollbar="false"
				class="scroll-view h100">
				<slot></slot>
			</scroll-view>
		</view>
		<view class="bottom-box fixed-bottom-box" :class="{ 'safe-area': $system == 'iOS' && data.keyboardHeight == 0 }"
			:style="{ bottom: data.keyboardHeight + 'px' ,'margin-bottom':$store.state.safeBottomAz+'px'}">
			<slot name="bottom">
				<view class="bottom-container flex-align-center" v-show="!sortMode">
					<image v-if="phone != 'huawei' && phone != 'vivo'" class="add-img shrink-0"
						:src="`/static/image/phone-message/${phone}/chat-left.png`" @click="chooseImage()"></image>
					<image v-if="phone == 'vivo'" class="add-img shrink-0"
						src="/static/image/phone-message/vivo/add.png" @click="chooseImage()"></image>
					<image v-if="phone == 'huawei'" class="add-img shrink-0"
						:src="`/static/image/phone-message/huawei/emoji.png`"></image>
					<view class="search-box flex-1 flex-align-center">
						<image v-if="phone == 'huawei'" class="left-icon ka" @click="changeSim"
							:src="`/static/image/phone-message/huawei/ka${simIndex}.png`"></image>
						<image v-if="phone == 'huawei'" class="left-icon down"
							src="/static/image/phone-message/huawei/down.png"></image>
						<!-- <input class="input flex-1" :placeholder="showInfo.placeholder" v-model="content"
                            @input="onInput"></input> -->
						<!-- <textarea class="input flex-1" :adjust-position="false" fixed auto-height show-confirm-bar
                            auto-blur :placeholder="showInfo.placeholder" v-model="content" @input="onInput"
                            @focus="onFocus" @blur="onBlur"></textarea> -->
						<editor id="chat-layout-editor" class="input flex-1" :placeholder="showInfo.placeholder"
							@input="onInput" style="word-break: break-all; word-wrap: break-word;"></editor>
						<image v-if="phone == 'iphone' && !isSend" class="right-icon"
							src="/static/image/phone-message/iphone/mic.png"></image>
						<image v-if="phone == 'iphone' && isSend" class="right-send-icon"
							src="/static/image/phone-message/iphone/send.png" @click="sendMessage"></image>
						<image v-if="phone == 'oppo'" class="right-icon"
							:src="`/static/image/phone-message/oppo/ka${simIndex}.png`" @click="changeSim">
						</image>
					</view>
					<view v-if="phone != 'iphone'" class="flex-align-center">
						<image v-if="phone == 'mi'" class="right-icon"
							:src="`/static/image/phone-message/mi/${isSend ? 'send' : 'unsend'}.png`"
							@click="sendMessage">
						</image>
						<image v-if="phone == 'oppo'" class="right-icon"
							:src="`/static/image/phone-message/oppo/${isSend ? 'send' : 'unSend'}.png`"
							@click="sendMessage">
						</image>
						<image v-if="phone == 'huawei'" class="right-icon"
							src="/static/image/phone-message/huawei/chat-add.png" @click="chooseImage()">
						</image>
						<image v-if="phone == 'huawei'" class="right-icon m-l-34"
							:src="`/static/image/phone-message/huawei/${isSend ? 'send' : 'unsend'}.png`"
							@click="sendMessage">
						</image>
						<text v-if="phone == 'vivo'" class="send-text" :class="{ 'send-text-active': isSend }"
							@click="sendMessage">发送</text>
					</view>
				</view>
			</slot>
		</view>
		<view class="bottom-placeholder" :style="{ height: (data.bottomBoxHeight+$store.state.safeBottomAz) + 'px' }">
		</view>
	</view>
</template>
<script setup>
import {
	reactive,
	onMounted,
	computed,
	toRefs
} from 'vue'
import {
	dateUtil,
	util
} from '@/utils/common.js';
const props = defineProps({
	// 手机品牌
	phone: {
		type: String,
		default: 'iphone'
	},
	chatInfo: {
		type: Object,
		default: () => ({
			unRead: false,
			noNotice: false,
			img: "",
			title: "淘宝通知",
			content: "您关注的商品降价啦，快来抢购吧！",
			time: "2026-02-20 20:55:12"
		})
	},
	// 是否处于拖拽排序模式
	sortMode: {
		type: Boolean,
		default: false
	},
	number: {
		type: Number,
		default: 0
	}
})

const data = reactive({
	statusBarHeight: 0,
	topBoxHeight: 0,
	bottomBoxHeight: 0,
	isSend: false,
	content: "",
	simIndex: 1,
	scrollTop: 0,
	keyboardHeight: 0,
	lastClickTime: 0
})

let {
	isSend,
	content,
	simIndex,
	scrollTop
} = toRefs(data)

const emit = defineEmits(['send', 'dblclick-left', 'dblclick-right', 'title-click'])
const onInput = (e) => {
	content.value = e.detail.html
	const htmlStr = (content.value || '').trim()
	if (htmlStr === '' || htmlStr === '<p><br></p>' || htmlStr === '<br>') {
		isSend.value = false
	} else {
		isSend.value = true
	}
	setTimeout(() => {
		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
			if (rect) {
				data.bottomBoxHeight = rect.height;
			}
		}).exec();
	}, 50);
}



/**
 * 切换sim卡
 */
const changeSim = () => {
	simIndex.value = simIndex.value == 1 ? 2 : 1
}

/**
 * 发送消息
 */
const sendMessage = () => {
	if (!isSend.value) return
	const date = dateUtil.now("YYYY-MM-DD HH:mm")
	const params = {
		content: `<p>${content.value}</p>`,
		simIndex: simIndex.value,
		time: date,
		isMe: true
	}
	emit('send', params)
	data.content = ""
	data.isSend = false

	// 清空 editor 中输入的值
	uni.createSelectorQuery().select('#chat-layout-editor').context((res) => {
		if (res && res.context) {
			res.context.clear()
		}
		data.isSend = false
	}).exec()

	// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
	setTimeout(() => {
		data.scrollTop = 99999 + Math.random();
		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
			if (rect) {
				data.bottomBoxHeight = rect.height;
			}
		}).exec();
		data.isSend = false
	}, 100);
	data.isSend = false
}

/**
 * 处理 center-box 点击事件，检测双击并区分左右
 */
const handleBoxClick = (e) => {
	const now = Date.now();
	const clickInterval = now - data.lastClickTime;

	// 如果两次点击间隔在 300ms 以内，视为双击
	if (clickInterval > 0 && clickInterval < 300) {
		// 获取点击位置的 X 坐标
		const clientX = e.detail.x || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);

		// 获取屏幕宽度来区分左右
		const systemInfo = uni.getSystemInfoSync();
		const halfWidth = systemInfo.screenWidth / 2;

		if (clientX < halfWidth) {
			console.log('双击左侧');
			emit('dblclick-left');
		} else {
			console.log('双击右侧');
			emit('dblclick-right');
		}

		// 成功触发双击后重置时间，防止连续三次点击触发两次双击
		data.lastClickTime = 0;
	} else {
		data.lastClickTime = now;
	}
}


const handleTitleClick = () => {
	emit('title-click');
}


// 处理标题显示
const displayTitle = computed(() => {
	let title = props.chatInfo.title || '';
	if (props.phone === 'oppo') {
		const noSpace = title.replace(/\s+/g, '');
		if (/^\d{11}$/.test(noSpace)) {
			return noSpace.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
		}
	}
	return title;
})

// 展示文字信息
const showInfo = computed(() => {
	let placeholder
	switch (props.phone) {
		case "iphone":
			placeholder = '信息 · 短信'
			break;
		case "mi":
			placeholder = '短信'
			break;
		case "oppo":
			placeholder = '5G 消息'
			break;
		case "huawei":
			placeholder = '短信/彩信'
			break;
		case "vivo":
			placeholder = '输入内容'
			break;
		default:
			break;
	}
	return {
		placeholder
	}
})

/**
 * 选择图片并发送
 */
const chooseImage = () => {
	uni.chooseImage({
		count: 1, // 仅选一张
		sizeType: ['original', 'compressed'], // 原图或压缩图
		sourceType: ['album', 'camera'], // 从相册选择或拍照
		success: (res) => {
			const tempFilePaths = res.tempFilePaths;
			if (tempFilePaths.length > 0) {
				const tempPath = tempFilePaths[0];

				const processImage = (finalPath) => {
					// 获取图片信息，计算横竖向及相应宽高
					uni.getImageInfo({
						src: finalPath,
						success: (image) => {
							let w = image.width;
							let h = image.height;

							// 根据 EXIF 方向修正实际视觉宽高
							if (image.orientation && ['left', 'right', 'left-mirrored',
								'right-mirrored'
							].includes(image.orientation)) {
								w = image.height;
								h = image.width;
							}

							const isHorizontal = w >= h;
							const width = isHorizontal ? '368rpx' : '274rpx';
							const height = isHorizontal ? '274rpx' : '368rpx';

							const date = dateUtil.now("YYYY-MM-DD HH:mm")
							// 封装成HTML的img标签作为消息内容
							const content =
								`<img src="${finalPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
							const params = {
								content: content,
								imgUrl: finalPath,
								type: 'image',
								imgWidth: width,
								imgHeight: height,
								simIndex: simIndex.value,
								time: date,
								isMe: true
							}
							emit('send', params)

							// 延迟拉动到底部
							setTimeout(() => {
								data.scrollTop = 99999 + Math.random();
								uni.createSelectorQuery().select('.bottom-box')
									.boundingClientRect(rect => {
										if (rect) {
											data.bottomBoxHeight = rect
												.height;
										}
									}).exec();
							}, 100);
						}
					})
				};

				// #ifdef APP-PLUS
				uni.saveFile({
					tempFilePath: tempPath,
					success: (saveRes) => {
						processImage(saveRes.savedFilePath);
					},
					fail: () => {
						processImage(tempPath);
					}
				});
				// #endif
				// #ifndef APP-PLUS
				processImage(tempPath);
				// #endif
			}
		}
	})
}

onMounted(() => {
	// 同步获取系统信息
	const systemInfo = uni.getSystemInfoSync();
	data.statusBarHeight = systemInfo.statusBarHeight || 0;

	// 动态获取 top-box 和 bottom-box 高度
	setTimeout(() => {
		uni.createSelectorQuery().select('.top-box').boundingClientRect(rect => {
			if (rect) {
				data.topBoxHeight = rect.height;
			}
		}).exec();
		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
			if (rect) {
				data.bottomBoxHeight = rect.height;
			}
		}).exec();
	}, 50);

	// 延迟极小时间确保 DOM 已更新循环并将滚动条拉到极限底端
	setTimeout(() => {
		data.scrollTop = 99999 + Math.random();
		uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
			if (rect) {
				data.bottomBoxHeight = rect.height;
			}
		}).exec();
	}, 300);

})
</script>
<style>
@import '@/common/main.css';
</style>
<style lang="less" scoped>
.page-container {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
}

.m-l-34 {
	margin-left: 34rpx;
}

.m-l-50 {
	margin-left: 50rpx;
}

.center-box {
	overflow: hidden;
	// overflow-y: scroll;
	// padding-bottom: 12px;
}

.fixed-bottom-box {
	position: fixed;
	width: 100%;
	background: #fff;
	bottom: 0;
	left: 0;
}


.fixed-top-box {
	position: fixed;
	width: 100%;
	z-index: 9;
	left: 0;
	top: 0;
}

//苹果样式
.iphone-style {
	.circle {
		border-radius: 50% !important;
	}

	.square {
		border-radius: 16rpx !important;
	}

	.status-placeholder {
		background-color: #F7F7F7;
	}

	.top-box {

		.top-container {
			padding: 32rpx 24rpx 20rpx;
			background-color: #F7F7F7;
			box-shadow: inset 0 -0.3px 0 0 #B5B5B5;

			.left {
				width: 180rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.number-box {
					height: 36rpx;
					min-width: 36rpx;
					text-align: center;
					font-size: 12px;
					line-height: 24rpx;
					padding: 6rpx 10rpx;
					border-radius: 18rpx;
					color: #fff;
					background-color: #0276FF;
					margin-left: 4rpx;
					flex-shrink: 0;
				}
			}

			.center {
				height: 96rpx;

				.img {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}
			}

			.right {
				width: 180rpx;

			}

			.text-box {
				margin-top: 10rpx;
				height: 20rpx;

				.title {
					text-align: center;
					max-width: 400rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 20rpx;
					color: #1A1A1A;
					left: 20rpx;
					margin-right: 6rpx;
					font-weight: 500;
				}
			}
		}


	}



	.bottom-box {
		padding-bottom: 10rpx;
	}

	.safe-area {
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	}

	.bottom-container {
		padding: 10rpx 28rpx 0;

		.add-img {
			width: 66rpx;
			height: 66rpx;
			margin-right: 24rpx;
		}

		.search-box {
			min-height: 70rpx;
			border-radius: 35rpx 35rpx 35rpx 35rpx;
			border: 2rpx solid #DFDFDF;
			padding: 8rpx 26rpx;

			::v-deep .ql-container {
				// height: 100%;
				min-height: 48rpx !important;
				font-size: 32rpx;
			}

			::v-deep .ql-blank::before {
				color: #C3C3C3;
				font-size: 32rpx;
				line-height: inherit;
				font-style: normal;
			}

			.input {
				height: 100%;
				width: auto;
				min-height: 46rpx;
				max-height: 160rpx;
				overflow: hidden;
				overflow-y: scroll;
				// min-height: 48rpx !important;
			}

			.right-icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 20rpx;
			}

			.right-send-icon {
				width: 52rpx;
				height: 52rpx;
				margin-left: 20rpx;
			}
		}

	}
}

//小米样式
.mi-style {
	background-color: #F7F7F7 !important;

	.top-box {

		.top-container {
			padding: 0 20rpx 0 52rpx;
			background-color: #F7F7F7;
			height: 88rpx;

			.left {
				width: 80rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.number-box {
					height: 36rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					padding: 6rpx 10rpx;
					border-radius: 18rpx;
					color: #fff;
					background-color: #0276FF;
					margin-left: 4rpx;
				}
			}

			.center {
				flex: 1;
				display: flex;
				align-items: center;

				.title {
					flex: 1;
					display: block;
					font-size: 36rpx;
					color: #1A1A1A;
					font-weight: 500;
					width: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}
			}

			.right {
				width: 80rpx;
				text-align: right;

				.img {
					width: 48rpx;
					height: 48rpx;
				}

			}

			.text-box {
				.title {
					font-size: 20rpx;
					color: #1A1A1A;
					left: 20rpx;
					margin-right: 6rpx;
				}
			}
		}


	}

	.bottom-box {
		padding-bottom: 20rpx;
	}

	.safe-area {
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.bottom-box {

		.bottom-container {
			padding: 20rpx 28rpx 0;


			.add-img {
				width: 72rpx;
				height: 72rpx;
			}

			.search-box {
				min-height: 96rpx;
				border-radius: 28rpx;
				padding: 12rpx 42rpx;
				margin: 0 20rpx;
				background-color: #E8E8E8;

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

				::v-deep .ql-blank::before {
					color: #8B8B8B;
					font-size: 30rpx;
					line-height: inherit;
					font-style: normal;
				}

				.input {
					height: 100%;
					width: auto;
					min-height: 46rpx;
					max-height: 160rpx;
					overflow: hidden;
					overflow-y: scroll;
				}

				.right-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}
			}

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

}

//oppo样式
.oppo-style {
	background-color: #F0F1F3 !important;

	.top-box {

		.top-container::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 1px;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #D0D1D3;
			transform: scaleY(0.3);
		}

		.top-container {
			position: relative;
			padding: 0 52rpx;
			background-color: #F0F1F3;
			height: 98rpx;
			padding-top: 6rpx;
			padding-bottom: 12rpx;

			.left {

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.number-box {
					height: 36rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					padding: 6rpx 10rpx;
					border-radius: 18rpx;
					color: #fff;
					background-color: #0276FF;
					margin-left: 4rpx;
				}
			}

			.center {
				flex: 1;
				width: 20%;
				height: 100%;
				margin: 0 18rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.title {
					width: 100%;
					font-size: 36rpx;
					color: #1A1A1A;
					font-weight: 500;
					line-height: 36rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}

				.second-text {
					color: #6F6F6F;
					font-size: 28rpx;
					line-height: 28rpx;
					margin-top: 14rpx;
				}
			}

			.right {
				text-align: right;

				.img {
					width: 48rpx;
					height: 48rpx;
				}

			}

			.text-box {
				.title {
					font-size: 20rpx;
					color: #1A1A1A;
					left: 20rpx;
					margin-right: 6rpx;
				}
			}
		}


	}

	.bottom-box {
		padding-bottom: 10rpx;
	}

	.safe-area {
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	}


	.bottom-box {
		background-color: #FAFAFA;

		.bottom-container {
			padding: 16rpx 32rpx 0;

			.add-img {
				width: 84rpx;
				height: 84rpx;
			}

			.search-box {
				min-height: 84rpx;
				border-radius: 42rpx;
				margin: 0 16rpx;
				background-color: #E6E6E6;
				padding: 12rpx 38rpx;

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

				::v-deep .ql-blank::before {
					color: #6C6C6E;
					font-size: 32rpx;
					line-height: inherit;
					font-style: normal;
				}

				.input {
					height: 100%;
					width: auto;
					min-height: 46rpx;
					max-height: 160rpx;
					overflow: hidden;
					overflow-y: scroll;
					caret-color: #1ABA11;
				}

				.right-icon {
					width: 32rpx;
					height: 40rpx;
					margin-right: 14rpx;
				}
			}

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

}

//华为样式
.huawei-style {
	background-color: #F1F5F8 !important;

	.top-box {

		.top-container {
			padding: 0 32rpx;
			background-color: #F1F5F8;
			height: 88rpx;

			.left {

				image {
					width: 76rpx;
					height: 76rpx;
				}

				.number-box {
					height: 36rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					padding: 6rpx 10rpx;
					border-radius: 18rpx;
					color: #fff;
					background-color: #0276FF;
					margin-left: 4rpx;
				}
			}

			.center {
				flex: 1;
				width: 20%;
				height: 100%;
				margin: 0 16rpx;
				display: flex;
				align-items: center;
				overflow: hidden;

				.img {
					width: 72rpx;
					height: 72rpx;
					flex-shrink: 0;
					margin-right: 18rpx;
					border-radius: 50%;
				}

				.title {
					font-size: 40rpx;
					color: #1A1A1A;
					font-weight: 500;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}

				.second-text {
					color: #6F6F6F;
					font-size: 28rpx;
					line-height: 28rpx;
					margin-top: 14rpx;
				}
			}

			.right {
				text-align: right;

				.img {
					width: 72rpx;
					height: 72rpx;
				}

			}

			.text-box {
				.title {
					font-size: 20rpx;
					color: #1A1A1A;
					left: 20rpx;
					margin-right: 6rpx;
				}
			}
		}


	}

	.bottom-box {
		padding-bottom: 12rpx;
	}

	.safe-area {
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
	}

	.bottom-box {
		background-color: #FFFFFF;

		.bottom-container {
			padding: 12rpx 32rpx 0;

			.add-img {
				width: 44rpx;
				height: 44rpx;
			}

			.search-box {
				min-height: 76rpx;
				border-radius: 42rpx;
				padding: 10rpx 28rpx;
				margin: 0 30rpx;
				background-color: #F4F4F4;

				.ka {
					width: 44rpx;
					height: 44rpx;
				}

				.down {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}

				.input {
					height: 100%;
					width: auto;
					min-height: 46rpx;
					max-height: 160rpx;
					overflow: hidden;
					overflow-y: scroll;
					margin-left: 32rpx;

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

					::v-deep .ql-blank::before {
						color: #606060;
						font-size: 30rpx;
						line-height: inherit;
						font-style: normal;
					}
				}

				.right-icon {
					width: 32rpx;
					height: 40rpx;
					margin-right: 14rpx;
				}
			}

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

}


//vivo样式
.vivo-style {
	background-color: #F6F6F6 !important;

	.top-box {

		.top-container {
			padding: 66rpx 52rpx 20rpx 42rpx;
			background-color: #F6F6F6;

			.left {

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.center {
				flex: 1;
				width: 20%;
				height: 100%;
				margin: 0 18rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				overflow: hidden;

				.title {
					font-size: 34rpx;
					color: #1A1A1A;
					font-weight: 500;
					line-height: 34rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}
			}

			.right {
				text-align: right;

				.img {
					width: 44rpx;
					height: 44rpx;
				}

			}

			.text-box {
				.title {
					font-size: 20rpx;
					color: #1A1A1A;
					left: 20rpx;
					margin-right: 6rpx;
				}
			}
		}


	}

	.bottom-box {
		padding-bottom: 20rpx;
	}

	.safe-area {
		padding-bottom: 20rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.bottom-box {
		background-color: #fff;


		.add-img {
			width: 36rpx;
			height: 36rpx;
			margin-right: 40rpx;
		}


		.bottom-container {
			padding: 20rpx 48rpx 0 56rpx;

			.search-box {
				min-height: 64rpx;
				border-radius: 16rpx;
				padding: 8rpx 18rpx;
				margin-right: 42rpx;
				background-color: #F2F2F2;

				.input {
					height: 100%;
					width: auto;
					min-height: 46rpx;
					max-height: 160rpx;
					overflow: hidden;
					overflow-y: scroll;

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

					::v-deep .ql-blank::before {
						color: #C8C8C8;
						font-size: 30rpx;
						line-height: inherit;
						font-style: normal;
					}
				}
			}

			.send-text {

				color: #9CC9FF;
				font-size: 34rpx;
			}

			.send-text-active {
				color: #0078FE;
			}
		}
	}

}

// .bottom-placeholder {
// 	margin-top: env(safe-area-inset-bottom);
// 	margin-top: constant(safe-area-inset-bottom);
// }
</style>