<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 -->
		<scroll-view scroll-y="true" :scroll-top='scrollTop'>
			<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.content">{{item.content}}</view>
						<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.content">{{item.content}}</view>
						</view>
					</view>
					<!-- <image v-if="item.img" :src="item.img" mode="scaleToFill" class="touch-active" />
				<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 }">
			<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" /> </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';
	export default {
		data() {
			return {
				title: '',
				SOCKETURL: 'ws://192.168.16.212:8088/webSocket/1',
				socketOpen: false,
				sendInfo: {},
				currentItem: '',
				userName: '',
				mpInputMargin: true, //适配微信小程序 底部输入框高度被顶起的问题
				//发送的聊天消息
				formData: {
					content: "",
					limit: 15,
					index: 1,
				},
				timeout: 180000,
				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,
			};
		},
		onReady() { //更改导航栏文字
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		onLoad(options) {
			// uni.closeSocket()
			this.currentItem = JSON.parse(options.item)
			this.title = this.currentItem.doctorName //导航栏标题
			this.userName = this.currentItem.patientName
			this.getPageHistory()
			this.scoket()
		},
		mounted() {
			// wx.pageScrollTo({
			// 	scrollTop: 9999999
			// })
		},
		methods: {
			getPageHistory() {
				let obj = {
					consultationId: this.currentItem.id,
					senderId: this.currentItem.patientId,
					recipientId: this.currentItem.doctorId,
				}
				getChatRecord(obj).then(res => {
					res.data.forEach(e => {
						if (e.readStatus == 0) {
							this.Read()
						}
					})
					this.newsList = res.data
					setTimeout(() => {
						this.scrollTop = this.scrollTop + 1;
					}, 100)
				})
			},
			Read() {
				let markReadData = {
					consultationId: this.currentItem.id,
					recipientId: this.currentItem.doctorId,
				}
				markRead(markReadData)
			},
			touchend() {
				this.showFunBtn = false; //隐藏功能
				this.showExpre = false; //隐藏表情
				this.showOften = false; //隐藏常用
				uni.hideKeyboard();
			},
			goshowFunBtn() {
				this.showFunBtn = true; //隐藏功能
				uni.hideKeyboard();
				setTimeout(() => {
					this.scrollTop = this.scrollTop + 1;
				}, 100)
			},
			sendout() {
				if (this.socketOpen == false) {
					return
				}
				this.newsList.push({
					senderName: this.userName,
					content: this.formData.content
				})
				let message = this.formData.content
				try {
					const that = this
					uni.sendSocketMessage({
						data: message,
						success(res) {
							console.log(that.currentItem)
							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 => {
								console.log(res);
								setTimeout(() => {
									that.scrollTop = that.scrollTop + 1;
								}, 100)
							})
						}
					})
				} catch (e) {
					console.log(e, '断线了')
					// uni.closeSocket();
				}
				this.formData.content = '' //清空输入框的文本

			},
			//输入常用消息
			oftenc(e) {
				this.formData.content = e.title;
			},
			//选择表情
			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();
			},
			//是否展示常用
			oftenx() {
				this.showFunBtn = false; //隐藏功能
				this.showExpre = false; //隐藏表情
				this.showOften = !this.showOften; //显示常用
				uni.hideKeyboard();
			},
			//是否展示表情
			exprec() {
				this.showFunBtn = false; //隐藏功能
				this.showOften = false; //隐藏常用
				this.showExpre = !this.showExpre; //显示表情
				uni.hideKeyboard();
			},
			//点击宫格时触发
			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));
						}
					});

				}
			},
			//发送图片
			chooseImage(sourceType) {
				console.log(sourceType, "sourceType");
				uni.chooseImage({
					sourceType,
					sizeType: ["compressed"],
					success: (res) => {
						console.log(res, "kkkk");
						this.showFunBtn = false;
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const params = {
								contentType: 3,
								content: res.tempFilePaths[i],
							};
							this.newsList.push({
								img: res.tempFilePaths[i]
							})
							console.log(this.newsList, '图片');
						}
					},
				});
			},
			//用户触摸屏幕的时候隐藏键盘
			touchstart() {
				uni.hideKeyboard();
			},
			scoket() {
				const that = this
				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
								})
							}, 3 * 1000)
						}
					})

					uni.onSocketClose(err => {
						console.log('webScoket连接关闭', err);
						if (err && err.code !== 1000) {
							setTimeout(() => {
								that.socketOpen = true
								uni.connectSocket({
									url: that.SOCKETURL
								})
							}, 3 * 1000)
						}
					})

					uni.onSocketMessage(res => {
						console.log("webScoket监听收到的信息", res);
						that.newsList.push({
							senderName: that.currentItem.patientName,
							content: JSON.parse(res.data).message
						})
						that.Read()
					})
				} 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('心跳发送失败，重新连接...');
							socketOpen = true
							uni.connectSocket({
								url: this.SOCKETURL
							})
						}
					})
				}, that.timeout)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},

		onUnload() {
			clearInterval(this.timeoutObj);
			if (this.socketOpen == true) {
				uni.closeSocket();
			}
		}
	};
</script>

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

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

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

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

		.sendBox {
			background-color: #55d0df7d;
			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;
	}

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