<template>
	<view class="content">
		<!-- <view class="title">
			<image src="../../static/huijiantou.png" @click="back"></image>
			{{currentItem.senderName}}
		</view> -->
		<!-- 聊天渲染列表 -->
		<!-- scroll-y scroll-into-view="placeholder" scroll-top="500" scroll-with-animation -->
		<u-navbar :is-back="false" :background="background" class="u-navbar">
			<image src="@/static/fanhui.png" mode="" @tap="goprevious"></image>
			<view class="navbartitle" @tap="goprevious">
				{{title}}
			</view>
		</u-navbar>
		<scroll-view scroll-y="true" :scroll-top='scrollTop' id="demo"
			:style="'height:calc(100vh - '+ inputboxtop +'px)'" scroll-with-animation="true">
			<view style="height: 85vh; padding-top: 200rpx;" @tap='touchend'>
				<view class="snedItem" v-for="(item, index) in newsList" :key="index">
					<view class="ifSend" v-if="item.senderName == userName">
						<view class="sendBox" v-if="item.messageType==1">{{item.content}}</view>
						<image v-if="item.messageType==2" :src="baseurl+item.content" class="snedItemimage"
							@tap='lookimage(baseurl+item.content)' />
						<image class="head" src="@/static/headsculpture.png"></image>
					</view>
					<view class="doctorSend" v-else>
						<image class="head" src="@/static/docHead.png"></image>
						<view class="">
							<!-- <text>{{item.senderName}}</text> -->
							<view class="sendBox" v-if="item.messageType==1">{{item.content}}</view>
							<image v-if="item.messageType==2" :src="baseurl+item.content" class="snedItemimage"
								@tap='lookimage(baseurl+item.content)' />
						</view>
					</view>
					<video v-if="item.video" :src="item.video"></video>
				</view>
				<!-- <view class="placeholder" id="placeholder" v-if="showFunBtn"></view> -->
			</view>
		</scroll-view>
		<!-- 底部输入 -->
		<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }"
			v-if='Number(currentItem.status)!=2' :style="{'padding-bottom':bottomVal+'px'}">
			<view class="input-box-flex">
				<!--弹出常用 -->
				<!-- <image class="icon_img" :src="require('@/static/ico/often.png')" @tap="oftenx"></image> -->
				<!-- 输入框 -->
				<view class="input-box-flex-grow"> <input type="text" class="contenxxt" id="input"
						v-model="formData.content" :hold-keyboard="true" :confirm-type="'send'" :confirm-hold="true"
						placeholder-style="color:#DDDDDD;" :cursor-spacing="10" @confirm='sendconfirm'
						:adjust-position="false" @keyboardheightchange="keyboardheightchange" @focus='focus'
						@blur='blur' /> </view>
				<!-- 选择表情包 -->
				<!-- <image class=" icon_btn_add" :src="require('@/static/ico/emoji.png')" @tap="exprec"></image> -->
				<!-- 发送消息按钮 -->
				<image class=" icon_btn_add" :src="require('@/static/ico/send.png')" @tap="sendout"
					v-if="formData.content!==''" mode=""></image>
				<!-- <text class="send-out iconfont icon-fasong"  ></text> -->
				<!-- 弹出拍照-->
				<!-- @tap="switchFun" -->
				<uni-icons type="plus" size="33" class="icon_btn_add" v-else @tap='goshowFunBtn'></uni-icons>
				<!-- <image  :src="require('@/static/ico/more.png')" v-else @tap='goshowFunBtn'></image> -->
			</view>
			<!-- 弹出拍照-->
			<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
				<u-grid :col="4" hover-class="contentType2-hover-class" :border="false">
					<u-grid-item v-for="(item, index) in funList" @tap.stop="tapGrid(index)" :index="index" :key="index"
						bg-color="#f3f3f3">
						<u-icon :name="item.icon" :size="52"></u-icon>
						<uni-icons style="opacity: 0.7;width: 52rpx;height: 52rpx; " v-if="index==2"
							:type="index==2?'folder-add-filled':''" size="26"></uni-icons>
						<view class="grid-text">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 弹出表情 -->
			<view class="fun-box2" :class="{'show-fun-box':showExpre}">
				<view class="emoji-box emoji-move-in">
					<scroll-view scroll-y="true" style="height:200px">
						<view class="list">
							<text v-for="(item,index) in emojisList" :key="index" @tap.stop="expre(item)"
								class="touch-active">{{item}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendMessage,
		getChatRecord,
		markRead
	} from '@/api/pagesC/seekadvicefrom/seekadvicefrom.js';
	import baseurl from '@/api/baseurl.js'
	import {
		socketurl
	} from '@/api/socketurl.js'
	import {
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#26A888',
				},
				baseurl: '',
				title: '',
				SOCKETURL: '',
				socketOpen: false,
				sendInfo: {},
				currentItem: '',
				userName: '',
				mpInputMargin: true, //适配微信小程序 底部输入框高度被顶起的问题
				//发送的聊天消息
				formData: {
					content: "",
					limit: 15,
					index: 1,
				},
				timeoutObj: null,
				newsList: [],
				showFunBtn: false, //是否展示功能型按钮
				showOften: false, //是否展示常用
				showExpre: false, //是否显示表情
				//九宫格
				funList: [{
						icon: "photo-fill",
						title: "照片",
						uploadType: ["album"]
					},
					{
						icon: "camera-fill",
						title: "拍摄",
						uploadType: ["camera"]
					},
					{
						icon: "",
						title: "文件",
					},
				],
				emojisList: [
					'😄', '😃', '😀', '😊', '😉', '😍', '😘', '😚', '😗',
					'😙', '😜', '😝', '😛', '😳', '😁', '😔', '😌', '😒',
					'😞', '😣', '😢', '😂', '😭', '😪', '😥', '😰', '😅',
					'😓', '😩', '😫', '😨', '😱', '😠', '😡', '😤', '😖',
					'👦', '👧', '👨', '👩', '👴', '👵', '👱', '👼', '👸',
					'👀', '👍', '👎', '👌', '👊', '✊', '✌', '👉', '👏',
					'💗', '💛', '💙', '💜', '💚', '❤', '💔', '💓', '💕',
					'🌟', '💢', '🏃', '🙅', '💁', '🙋', '💼', '💬', '💭',
				], //表情包
				//常用语
				oftenTermList: [{
						id: 0,
						title: "你好，很高兴",
					},
					{
						id: 0,
						title: "在吗",
					},
				],
				scrollTop: 999999,
				inputboxtop: undefined,
				bottomVal: 0,
				automaticreplylist: [],
			};
		},
		onReady() { //更改导航栏文字
			// uni.setNavigationBarTitle({
			// 	title: this.title,
			// });
		},
		onLoad(options) {
			if (uni.getStorageSync('patientId') && !this.$store.state.socketOpen) {
				this.scoket();
			}
			this.baseurl = baseurl;
			// uni.closeSocket()
			this.currentItem = JSON.parse(options.item)
			// this.scoket()
			this.title = this.currentItem.doctorName //导航栏标题
			this.userName = this.currentItem.patientName
			if (uni.getStorageSync('patientId')) {
				this.messagescoket();
			}
			this.getPageHistory()
		},
		mounted() {
			// wx.pageScrollTo({
			// 	scrollTop: 9999999
			// })
		},
		methods: {
			messagescoket() {
				const that = this
				// this.SOCKETURL = socketurl + this.currentItem.patientId
				// this.socketOpen = false
				try {
					// uni.connectSocket({
					// 	url: that.SOCKETURL
					// })
					// uni.onSocketOpen(res => {
					// 	console.log('webScoket连接已打开', res);
					// 	that.socketOpen = true
					// 	that.reset()
					// })
					// uni.onSocketError(err => {
					// 	console.log('webScoket连接打开失败', err);
					// 	if (err && err.code != 1000) {
					// 		setTimeout(() => {
					// 			that.socketOpen = true
					// 			uni.connectSocket({
					// 				url: that.SOCKETURL
					// 			})
					// 		}, 1000)
					// 	}
					// })
					// uni.onSocketClose(err => {
					// 	console.log('webScoket连接关闭', err);
					// 	if (err && err.code !== 1000) {
					// 		setTimeout(() => {
					// 			that.socketOpen = true
					// 			uni.connectSocket({
					// 				url: that.SOCKETURL
					// 			})
					// 		}, 1000)
					// 	}
					// })
					uni.onSocketMessage(res => {
						console.log("webScoket监听收到的信息", res);
						that.getPageHistory()
					})
				} catch (e) {
					console.log(e);
				}
			},
			// 心跳响应
			reset() {
				let that = this
				clearInterval(that.timeoutObj);
				that.timeoutObj = setInterval(() => {
					uni.sendSocketMessage({
						data: 'ping',
						success(res) {
							console.log('正在发送心跳');
						},
						fail(err) {
							console.log('心跳发送失败，重新连接...');
							that.socketOpen = true
							uni.connectSocket({
								url: that.SOCKETURL
							})
						}
					})
				}, 1000)
			},
			lookimage(item) {
				uni.previewImage({
					urls: [item], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: 1, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			blur() {
				uni.onKeyboardHeightChange(res => {
					this.bottomVal = res.height
					setTimeout(() => {
						let query = uni.createSelectorQuery().in(this);
						//需要给黄色区域设置一个id标识，在这里是demo
						query.select('.input-box').boundingClientRect(data => {
							this.inputboxtop = data.height //赋值，待会要用
							setTimeout(e => {
								this.scrollTop = this.scrollTop + 1;
							}, 500)
						}).exec();
					}, 500)
				})
			},
			focus() {
				uni.onKeyboardHeightChange(res => {
					this.bottomVal = res.height
					setTimeout(() => {
						let query = uni.createSelectorQuery().in(this);
						//需要给黄色区域设置一个id标识，在这里是demo
						query.select('.input-box').boundingClientRect(data => {
							this.inputboxtop = data.height //赋值，待会要用
							setTimeout(e => {
								this.scrollTop = this.scrollTop + 1;
							}, 500)
						}).exec();
					}, 500)
				})
			},
			keyboardheightchange(event) {
				const {
					height,
					duration
				} = event.detail
				this.bottomVal = height
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					//需要给黄色区域设置一个id标识，在这里是demo
					query.select('.input-box').boundingClientRect(data => {
						this.inputboxtop = data.height //赋值，待会要用
						setTimeout(e => {
							this.scrollTop = this.scrollTop + 1;
						}, 500)
					}).exec();
				}, 500)
			},
			getPageHistory() {
				let obj = {
					consultationId: this.currentItem.id,
					senderId: this.currentItem.patientId,
					recipientId: this.currentItem.doctorId,
				}
				getChatRecord(obj).then(res => {
					res.data.forEach(e => {
						if (Number(e.readStatus) == 0) {
							this.Read()
						}
					})
					this.newsList = res.data
					setTimeout(() => {
						let query = uni.createSelectorQuery().in(this);
						//需要给黄色区域设置一个id标识，在这里是demo
						query.select('.input-box').boundingClientRect(data => {
							this.inputboxtop = data.height //赋值，待会要用
							setTimeout(e => {
								this.scrollTop = this.scrollTop + 1;
							}, 300)
						}).exec();
					}, 100)
				})
			},
			Read() {
				let markReadData = {
					readStatus: '1',
					consultationId: this.currentItem.id,
					recipientId: this.currentItem.patientId,
				}
				markRead(markReadData)
			},
			//键盘发送
			sendconfirm(value) {
				this.sendout();
			},
			touchend() {
				this.showFunBtn = false; //隐藏功能
				this.showExpre = false; //隐藏表情
				this.showOften = false; //隐藏常用
				uni.hideKeyboard();
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					//需要给黄色区域设置一个id标识，在这里是demo
					query.select('.input-box').boundingClientRect(data => {
						this.inputboxtop = data.height //赋值，待会要用
						setTimeout(e => {
							this.scrollTop = this.scrollTop + 1;
						}, 300)
					}).exec();
				}, 200)
			},
			goshowFunBtn() {
				this.showFunBtn = !this.showFunBtn; //隐藏功能
				uni.hideKeyboard();
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					//需要给黄色区域设置一个id标识，在这里是demo
					query.select('.input-box').boundingClientRect(data => {
						this.inputboxtop = data.height //赋值，待会要用
						setTimeout(() => {
							this.scrollTop = this.scrollTop + 1;
						}, 200)
					}).exec();
				}, 300)
			},
			...mapMutations(['scoket']),
			//自动回复
			automaticreply() {
				const that = this
				let currentDate = new Date();
				let year = currentDate.getFullYear();
				let month = currentDate.getMonth() + 1;
				let day = currentDate.getDate();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				let time = `${year}-${month}-${day}`
				if (uni.getStorageSync('automaticreplylist') && uni.getStorageSync('automaticreplylist').length > 0) {
					if (uni.getStorageSync('automaticreplylist')[0].sendtime != time) {
						uni.removeStorageSync('automaticreplylist');
					} else {
						this.automaticreplylist = uni.getStorageSync('automaticreplylist')
						if (this.automaticreplylist.some(e => e.doctorId == this.currentItem.doctorId)) {
							return
						}
					}
				}
				let obj = {
					consultationId: that.currentItem.id,
					recipientId: that.currentItem.patientId,
					recipientName: that.currentItem.patientName,
					senderId: that.currentItem.doctorId,
					senderName: that.currentItem.doctorName,
					messageType: 1,
					sendTime: new Date(),
					content: '请输入您要询问的问题，咨询人数较多时，可能无法快速回复，请谅解！',
					sourcePlatform: 'APPLET',
					autoResponder: 'AUTORESPONDER'
				}
				sendMessage(obj).then(res => {
					if (res.code == 200) {
						that.newsList.push({
							senderName: that.currentItem.doctorName,
							content: '请输入您要询问的问题，咨询人数较多时，可能无法快速回复，请谅解！',
							messageType: 1,
						})
						setTimeout(() => {
							that.scrollTop = that.scrollTop + 1;
						}, 100)
						let automaticreplyitem = {
							sendtime: time,
							doctorId: that.currentItem.doctorId
						}
						that.automaticreplylist.unshift(automaticreplyitem)
						uni.setStorageSync('automaticreplylist', that.automaticreplylist);
					}
				})
			},
			//发送图片
			chooseImage(sourceType) {
				var that = this
				if (this.$store.state.socketOpen == false) {
					this.$refs.uToast.show({
						title: '聊天连接异常，正在重连',
						type: 'warning',
					})
					this.scoket()
					return
				}
				uni.chooseImage({
					sourceType,
					sizeType: ["compressed"],
					success: (res) => {
						that.showFunBtn = false;
						res.tempFilePaths.forEach(e => {
							uni.uploadFile({
								url: baseurl +
									'/nurseApplet/consultationInfo/uploadConsultationFile',
								filePath: e,
								name: 'file',
								timeout: 5000,
								success(resp) {
									var fileurls = JSON.parse(resp.data)
									let obj = {
										consultationId: that.currentItem.id,
										senderId: that.currentItem.patientId,
										senderName: that.currentItem.patientName,
										recipientId: that.currentItem.doctorId,
										recipientName: that.currentItem.doctorName,
										messageType: 2,
										sendTime: new Date(),
										content: fileurls.fileUrl,
										sourcePlatform: 'APPLET'
									}
									sendMessage(obj).then(respp => {
										if (respp.code == 200) {
											that.newsList.push({
												content: fileurls.fileUrl,
												messageType: 2,
												senderName: that.currentItem
													.patientName,
											})
											setTimeout(() => {
												let query = uni
													.createSelectorQuery().in(
														that);
												//需要给黄色区域设置一个id标识，在这里是demo
												query.select('.input-box')
													.boundingClientRect(
														data => {
															that.inputboxtop =
																data
																.height //赋值，待会要用
															setTimeout(() => {
																that.scrollTop =
																	that
																	.scrollTop +
																	1;
															}, 200)
														}).exec();
											}, 300)
											setTimeout(() => {
												this.automaticreply()
											}, 1000)
										}
									})
								}
							})
						})
					},
				});
			},
			sendout() {
				const that = this
				var content = JSON.parse(JSON.stringify(that.formData.content))
				if (this.$store.state.socketOpen == false) {
					this.$refs.uToast.show({
						title: '聊天连接异常，正在重连',
						type: 'warning',
					})
					this.scoket();
					return
				}
				let obj = {
					consultationId: that.currentItem.id,
					senderId: that.currentItem.patientId,
					senderName: that.currentItem.patientName,
					recipientId: that.currentItem.doctorId,
					recipientName: that.currentItem.doctorName,
					messageType: 1,
					sendTime: new Date(),
					content: that.formData.content,
					sourcePlatform: 'APPLET'
				}
				that.formData.content = '' //清空输入框的文本
				sendMessage(obj).then(res => {
					if (res.code == 200) {
						that.newsList.push({
							senderName: that.currentItem.patientName,
							content: content,
							messageType: 1,
						})
						setTimeout(() => {
							that.scrollTop = that.scrollTop + 1;
						}, 100)
						setTimeout(() => {
							this.automaticreply()
						}, 1000)
					}
				})
				// try {
				// 	const that = this
				// let message = this.formData.content
				// 	uni.sendSocketMessage({
				// 		data: message,
				// 		success(res) {
				// 			let obj = {
				// 				consultationId: that.currentItem.id,
				// 				senderId: that.currentItem.patientId,
				// 				senderName: that.currentItem.patientName,
				// 				recipientId: that.currentItem.doctorId,
				// 				recipientName: that.currentItem.doctorName,
				// 				messageType: 1,
				// 				sendTime: new Date(),
				// 				// messageType: 消息类型(0： 其他 1： 文字， 2： 图片 3： 表情 4： 视频 5： 文件 6： 链接)
				// 				content: message
				// 			}
				// 			sendMessage(obj).then(res => {
				// 				setTimeout(() => {
				// 					that.scrollTop = that.scrollTop + 1;
				// 				}, 100)
				// 			})
				// 		}
				// 	})
				// } catch (e) {
				// 	console.log(e, '断线了')
				// 	// uni.closeSocket();
				// }
			},
			//输入常用消息
			oftenc(e) {
				this.formData.content = e.title;
			},
			goprevious() {
				uni.navigateBack({
					delta: 1
				})
			},
			//选择表情
			expre(e) {
				this.formData.content = !this.formData.content ? e : this.formData.content + e;
			},
			//切换功能性按钮
			// switchFun() {
			// 	this.showOften = false; //隐藏常用
			// 	this.showExpre = false; //隐藏表情
			// 	this.showFunBtn = !this.showFunBtn; //显示功能
			// 	uni.hideKeyboard();
			// 	setTimeout(() => {
			// 		let query = uni.createSelectorQuery().in(this);
			// 		//需要给黄色区域设置一个id标识，在这里是demo
			// 		query.select('.input-box').boundingClientRect(data => {
			// 			this.inputboxtop = data.height //赋值，待会要用
			// 		}).exec();
			// 		this.scrollTop = this.scrollTop + 1;
			// 	}, 200)
			// },
			//是否展示常用
			// oftenx() {
			// 	this.showFunBtn = false; //隐藏功能
			// 	this.showExpre = false; //隐藏表情
			// 	this.showOften = !this.showOften; //显示常用
			// 	uni.hideKeyboard();
			// 	setTimeout(() => {
			// 		let query = uni.createSelectorQuery().in(this);
			// 		//需要给黄色区域设置一个id标识，在这里是demo
			// 		query.select('.input-box').boundingClientRect(data => {
			// 			this.inputboxtop = data.height //赋值，待会要用
			// 		}).exec();
			// 		this.scrollTop = this.scrollTop + 1;
			// 	}, 100)
			// },
			//是否展示表情
			// exprec() {
			// 	this.showFunBtn = false; //隐藏功能
			// 	this.showOften = false; //隐藏常用
			// 	this.showExpre = !this.showExpre; //显示表情
			// 	uni.hideKeyboard();
			// 	setTimeout(() => {
			// 		let query = uni.createSelectorQuery().in(this);
			// 		//需要给黄色区域设置一个id标识，在这里是demo
			// 		query.select('.input-box').boundingClientRect(data => {
			// 			this.inputboxtop = data.height //赋值，待会要用
			// 		}).exec();
			// 		this.scrollTop = this.scrollTop + 1;
			// 	}, 100)
			// },
			//点击宫格时触发
			tapGrid(index) {
				if (index == 0) {
					this.chooseImage(["album"]);
				} else if (index == 1) {
					this.chooseImage(["camera"]);
				} else if (index == 2) {
					uni.chooseMessageFile({
						count: 6, //默认100
						extension: ['.zip', '.doc'],
						success: function(res) {
							console.log(res)
							// console.log(JSON.stringify(res.tempFilePaths));
						}
					});
				}
			},
			//用户触摸屏幕的时候隐藏键盘
			touchstart() {
				uni.hideKeyboard();
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					//需要给黄色区域设置一个id标识，在这里是demo
					query.select('.input-box').boundingClientRect(data => {
						this.inputboxtop = data.height //赋值，待会要用
						setTimeout(e => {
							this.scrollTop = this.scrollTop + 1;
						}, 300)
					}).exec();
				}, 200)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f3f3;
	}

	#demo {
		transition: all 0.3s ease;
	}

	.content {
		::v-deep .u-navbar-placeholder {
			background-color: #F7F5F5;
			z-index: 999;
		}

		.u-navbar {
			display: inline-block;
			position: fixed;
			top: 0;
			z-index: 99999;

			image {
				margin: 0 4% 0 4%;
				width: 20rpx;
				height: 30rpx;
			}

			.navbartitle {
				width: 31%;
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.input-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: content-box;
			z-index: 999;
			background-color: #f3f3f3;
			/* #ifdef APP-PLUS */
			margin-bottom: 0rpx;
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			padding-bottom: 0rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */

			.input-box-flex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				padding: 20rpx;
				box-sizing: border-box;

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

				.icon_img {
					margin-right: 20rpx;
				}

				.icon_btn_add {
					margin-left: 20rpx;
				}

				// .send-out {
				// 	font-size: 65rpx;
				// 	margin-left: 15rpx;
				// 	color: #16c694;
				// 	width: 100rpx;
				// 	height: 100rpx;
				// }

				.input-box-flex-grow {
					flex: 1;
				}

				.contenxxt {
					box-sizing: border-box;
					background-color: #fff;
					height: 80rpx;
					padding: 0 20rpx;
					border-radius: 12rpx;
					font-size: 28rpx;
					caret-color: $uni-color-success;
				}
			}

			.fun-box {
				opacity: 0;
				height: 0;
				transition: all 0.3s ease;
				transform: translateY(100%);

				.grid-text {
					padding-top: 10rpx;
					color: $uni-text-color-grey;
				}
			}

			.fun-box1 {
				opacity: 0;
				transition: all 0.1s ease-in-out;
				height: 0;

				.often-super {
					padding: 30rpx;
					height: 240rpx;
					background-color: #f3f3f3;
					width: auto;

					.flex-row {
						padding: 10rpx 0;
						border-bottom: 1rpx #e8e8e8 solid;

						.often-text-size {
							color: #5a5a5a;
							font-size: 26rpx;
							margin-top: 6rpx;
							margin-bottom: 6rpx;
						}
					}
				}
			}

			.fun-box2 {
				opacity: 0;
				transition: all 0.1s ease-in-out;
				height: 0;

				.emoji-box {
					position: relative;
					height: 200rpx;
					padding: 5rpx 0;
					box-sizing: border-box;
					margin-bottom: -200rpx;
					background-color: #f3f3f3;

					.list {
						display: flex;
						flex-wrap: wrap;
						padding: 0 0 0 14rpx;
						padding-bottom: constant(safe-area-inset-bottom);
						padding-bottom: env(safe-area-inset-bottom);

						.touch-active {
							width: 65rpx;
							height: 60rpx;
							text-align: center;
							border-radius: 3rpx;
							line-height: 60rpx;
							font-size: 38rpx;
						}
					}
				}

				.emoji-move-in {
					-webkit-animation: emoji-move-in 0.3s forwards;
					animation: emoji-move-in 0.3s forwards;
				}
			}

			.show-fun-box {
				opacity: 1;
				height: 300rpx;
				transition: all 0.3s ease;
				transform: translateY(0%) !important;
			}
		}

		.input-box-mpInputMargin {
			/* #ifdef MP-WEIXIN */
			padding-bottom: 0rpx;
			/* #endif */
		}
	}

	.snedItem {
		padding: 0rpx 30rpx 40rpx 30rpx;

		.snedItemimage {
			width: 200rpx;
			height: 200rpx;
			border-radius: 3rpx;
		}
	}

	.ifSend {
		display: flex;
		justify-content: flex-end;

		.head {
			width: 80rpx;
			height: 80rpx;
			margin-left: 20rpx;
		}

		.sendBox {
			background-color: #4AC4AB;
			padding: 18rpx 20rpx;
			border-radius: 0 0 10rpx 10rpx;
			font-size: 34rpx;
			flex: none;
			max-width: 550rpx;
			word-break: break-all;
		}
	}

	.doctorSend {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.head {
			width: 90rpx;
			height: 90rpx;
			margin-right: 20rpx;
		}

		text {
			color: #b2b2b2;
			font-size: 24rpx;
		}

		.sendBox {
			background-color: #d7d7d77d;
			padding: 18rpx 20rpx;
			border-radius: 0 0 10rpx 10rpx;
			font-size: 34rpx;
			flex: none;
			max-width: 550rpx;
			word-break: break-all;
		}
	}

	.placeholder {
		height: 200rpx;
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}

	.title {
		font-size: 20px;
		text-align: center;
		height: 80rpx;
		border-bottom: 1rpx solid #f6f6f6;
		padding-top: 100rpx;
		position: fixed;
		width: 100%;
		background: white;
		z-index: 10;

		image {
			width: 20rpx;
			height: 30rpx;
			transform: rotate(180deg);
			position: absolute;
			left: 40rpx;
			bottom: 38rpx;
		}
	}
</style>