<template>
	<view class="page">

		<view class="page-header" :style="{ paddingTop: geStatusBarHeight()+ 8 + 'px'}">
		    <view class="text-center">消息</view>
			<uni-icons type="staff-filled" size="30" color="#ffffff" @click="$u.throttle(gotoContacts(), 2000)"></uni-icons>
		</view>

		<view class="wrapcon">

			<!-- 列表 -->
			<view v-if="grouplist.length==0 && loadStatus=='nomore'" class="nodata">暂无消息~</view>

			<view class="listcell">
				<u-swipe-action ref="swipeRef" :options="options" v-for="(info, index) in grouplist" :key="info.id" style="min-width: 600rpx;"
				@click="$u.throttle(actionClick(info,index), 2000)">
					<view class="lcon"  @click="gotoGroup(info,index)" :key="index" @longpress="handleLongPress(info,index)">
						<view class="limg">
							<image class="img" :src="info.img" mode="aspectFill"></image>
						</view>
						<view class="lright">
							<view class="lrow">
								<view class="pname">{{info.name}}</view>
								<view class="ptime"> {{ changeTime(info.datetime)}}</view>
							</view>
							<view class="lrow">
								<view class="pnr">
									{{ info.type==0?info.content:(info.type==1?"图片":(info.type==2?"文件":(info.type==3?"语音":(info.type==4?"视频":
									(info.type==5?"订单咨询":(info.type==6?"商品咨询":info.content))))))}}
								</view>
								<view class="lnum" v-if="info.sl>0">
									{{ info.sl}}
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action>


			</view>

			<u-loadmore v-if="grouplist.length==0 && loadStatus=='loading'" :status="loadStatus" :marginTop="20"></u-loadmore>

		</view>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

	</view>
</template>

<script>
	import { myCache } from '../../utils/utils.js';
	import dateTime from '@/common/dateTime.js';
	export default {
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				userName:"",
				userheadimg:"",
				messageText:'', //错误提示框
				msgType :'error',
				loadStatus:'loadmore',
				options: [
				    {
				        text: '删除',
				        style: {
				            backgroundColor: '#ed2a28'
				        }
				    }
				], // u-swipe-action样式
				imgurl:uni.$http.baseUrl,
				grouplist:[],
				socketTask: null,
				isConnected: false, // WebSocket连接状态
				socketmsg:[],//接收信息
				heartbeatInterval: null, // 心跳包20秒连接一次
				heartbeatTimeout: 20000, // 心跳间隔时间，例如每20秒发送一次
			}
		},
		onLoad(options) {
		},
		onShow(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.userName=user.nickName?user.nickName:"";
			this.userheadimg=user.avatar?user.avatar:require("@/static/image/girl.png");
			this.phone = user.userphone;
			// 如果心跳包在发送，先停止，再启动
			if(this.heartbeatInterval){
				clearInterval(this.heartbeatInterval); // 停止心跳包发送
			}
			// 从缓存聊天群里获取聊天群列表
			this.loadData();
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		// onBackPress(options) {
		// 	if (options.from === 'backbutton') {
		//       // 来自顶部菜单的返回按钮
		//       // 在这里处理你的逻辑
		//       console.log('返回按钮被点击');
		// 	  // this.closeWebSocket();
		//    //    uni.onSocketClose(function (res) {
		//    //      console.log('WebSocket 已关闭！');
		//    //    });
		// 	  return false;
		//     }
		// },
		// beforeDestroy() {
		// 	// console.log('界面关闭socket，beforeDestroy');
		//     // 在组件销毁前，确保关闭 WebSocket 连接
		// 	// this.closeWebSocket();
		// 	// clearInterval(this.heartbeatInterval); // 停止心跳包发送
		// },
		// beforeRouteLeave(to, from, next) {
		// 	console.log('界面关闭socket，beforeRouteLeave');
		//     next();
		// },
		methods: {
			handleLongPress(info,index) {
				console.log(index);
				this.$refs.swipeRef[index].open();
			},
			// 删除
			actionClick(info,index) {
				console.log(info,index);
				var that=this;
				uni.showModal({
					title: '提示',
					content: "确定要删除此聊天记录吗？",
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.$refs.swipeRef[index].close();
							myCache(info.id,"");
							that.grouplist.splice(index, 1);
							that.$forceUpdate();
							myCache("chatlist-"+this.userid,that.grouplist);
						}
					}
				});
			},
			// 定时心跳包
			startHeartbeat() {
				console.log("startHeartbeat")
				this.heartbeatInterval = setInterval(() => {
				  if (this.socketTask) {
				    this.socketTask.send({
				      data: JSON.stringify({
						  'cmd': 1,//心跳
						  'data': {
							  'accessToken':uni.getStorageSync("token")
						  },
						  }) // 发送心跳包数据
				    });
				  }
				}, this.heartbeatTimeout);
			},
			// ws接收消息
			socketinit(){
				var that = this;
				that.socketTask=uni.connectSocket({
					url: "wss://www.sanduolantoyoga.com/yoga-imserver",
					header: {
						// 'content-type': 'application/json',
						Authorization: uni.getStorageSync("token"),
					},
					success: (res) => {
					  console.log(res, 'socket连接成功success');
					},
					fail: (res) => {
					  console.log(res, 'socket连接失败')
					},
					complete: (res) => {
						console.log(res,'socket连接成功complete');
					}
				});

				uni.onSocketOpen(resopen => {
					console.log('WebSocket连接已打开！');
					that.isConnected = true;
					that.$forceUpdate();
					uni.sendSocketMessage({
						data: JSON.stringify({
							"cmd": 0,//心跳
							"data": {
								"accessToken":uni.getStorageSync("token"),
							},
						}),  // 发送心跳包数据 // 发送的消息内容
						success(re) {
							console.log(re);
							console.log('消息发送成功！')
						},
						fail(err) {
							console.log(err);
							console.log('消息发送失败！')
						}
					});

					// 定时发送心跳包
					this.startHeartbeat();

					// 拉取离线消息
					this.grouplist.forEach((cell,i)=>{
						if(cell.minId){
							// 通过某个会话中已读消息的最大id 获取离线消息
							this.pullMessage(i,cell);
						}
					});

					// 已经删除的有最大id的继续拉取是否有消息
					var data= myCache("privateMsgMaxId")?myCache("privateMsgMaxId"):[{id:0,minId:0}];
					data.forEach((cell)=>{
						console.log("privateMsgMaxId")
						var ifcz=false;
						this.grouplist.forEach((item)=>{
							if(cell.id==item.id){
								// 已经存在列表了，不用拉取离线信息
								ifcz=true;
							}
						});
						if(!ifcz){
							// 拉取离线信息
							this.getList(cell);
						}
					});

					var data= myCache("groupMsgMaxId")?myCache("groupMsgMaxId"):[{id:0,minId:0}];
					data.forEach((cell)=>{
						var ifcz=false;
						this.grouplist.forEach((item)=>{
							if(cell.id==item.id){
								// 已经存在列表了，不用拉取离线信息
								ifcz=true;
							}
						});
						if(!ifcz){
							// 拉取离线信息
							this.getGroupList(cell);
						}
					});

				});

				uni.onSocketMessage(res => {
					console.log('收到WebSocket服务器消息：');
					if(res.data){
						var rs=JSON.parse(res.data);
						console.log(rs);
						if(rs.cmd==3){
							// 私聊
							if(rs.data){
								var data=rs.data;
								if(data.recvId&&(data.recvId).toString()==(that.userid).toString()){
									// 是这个用户的接收的私聊信息
									// 加入聊天记录
									// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
									if(data.type==0){
										data.content=decodeURIComponent(data.content);
									}
									if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
										var ifexist=0,chatinfo=null;
										that.grouplist.forEach((cell,index)=>{
											if(cell.fromuser==data.sendId&&cell.userid==data.recvId&&cell.sort=="privatechat"){
												ifexist=1;
												that.grouplist[index].sl=(that.grouplist[index].sl?that.grouplist[index].sl+1:1);
												that.grouplist[index].content=data.content;
												that.grouplist[index].datetime=data.sendTime;
												that.grouplist[index].type=data.type;
												that.$forceUpdate();
												chatinfo= JSON.parse(JSON.stringify(that.grouplist[index]))  ;
												console.log(chatinfo)
											}
										});
										if(ifexist==0){
											// 未保存缓存
											// 接收到socket后更新聊天列表记录
											var chatlastinfo={
												id: "privatechat-" + data.recvId +"-" + data.sendId,
												content: data.content,
												minId: data.id,
												sl:1,
												datetime: data.sendTime,
												type: data.type,
												name: "",
												userid: data.recvId,
												fromuser: data.sendId,
												img: "",
												sort:"privatechat"
											};
											that.updateChatList(chatlastinfo);
										}
										else{
											that.updateChatList(chatinfo);
										}
									}
									else{
										// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"

									}
								}
							}
						}
						else if(rs.cmd==4){
							// 群聊
							if(rs.data){
								var data=rs.data;
								if(data.atUserIds&&data.atUserIds.includes(that.userid)){
									// 是这个用户的接收的群聊信息
									// 加入聊天记录
									// 消息类型 0:文字 1:图片 2:文件 3:语音 4:视频 10, "撤回" 11, "已读 "12, "消息已读回执 " 30,"加载中标记"
									if(data.type==0){
										data.content=decodeURIComponent(data.content);
									}
									if(data.type==0||data.type==1||data.type==2||data.type==3||data.type==4||data.type==5||data.type==6){
										var ifexist=0,idx=null;
										that.grouplist.forEach((cell,index)=>{
											if(cell.groupId==data.groupId&&cell.sort=="groupchat"){
												ifexist=1;
												idx=index;
												that.grouplist[index].sl=(that.grouplist[index].sl?that.grouplist[index].sl+1:1);
												that.grouplist[index].content=data.content;
												that.grouplist[index].datetime=data.sendTime;
												that.grouplist[index].fromuser=data.sendId;
												that.grouplist[index].type=data.type;
												that.$forceUpdate();
											}
										});

										if(ifexist==0){
											// 未保存缓存
											// 接收到socket后更新聊天列表记录
											var chatlastinfo={
												id: "groupchat-" + data.groupId,
												groupId:data.groupId,
												content: data.content,
												minId: data.id,
												sl:1,
												datetime: data.sendTime,
												type: data.type,
												name: "",
												userid: this.userid,
												fromuser: data.sendId,
												img: "",
												sendId: data.sendId,
												sendNickName: data.sendNickName,
												sort:"groupchat"
											};
											that.getGroupInfo(chatlastinfo);
										}
										else{
											that.getGroupInfo(that.grouplist[idx]);
										}
									}
									else{
										// 10, "撤回" 11, "已读 " 12, "消息已读回执 " 30,"加载中标记"

									}
								}
							}
						}
					}
				});

				// 连接关闭后重新连接
				uni.onSocketClose(res => {
					console.log('WebSocket连接已关闭！',res);
					this.isConnected = false;
					this.$forceUpdate();
					clearInterval(this.heartbeatInterval); // 停止心跳包发送
					// 重新连接socket
					// this.socketinit();
				});
				// 连接失败后重新连接
				uni.onSocketError(err => {
					console.error('WebSocket连接打开失败，请检查：', err);
					that.isConnected = false;
					that.$forceUpdate();
					clearInterval(that.heartbeatInterval); // 停止心跳包发送
					// 重新连接socket
					// this.socketinit();
				});
			},
			// 关闭WebSocket连接
			closeWebSocket() {
				uni.closeSocket();
				this.isConnected = false;
				this.$forceUpdate()
			},
			// 消息是否存在列表中
			ifadd(id){
				var ret=0;
				this.grouplist.forEach((cell,ii)=>{
					if(cell.id==id){
						ret=ii+1;
					}
				});
				return ret;
			},
			gotoContacts(){
				uni.navigateTo({
					url: `/pages/message/contact`
				});
			},
			changeTime(date) {
				return dateTime.dateTime(date);
			},
			gotoGroup(chat,index){
				// 当前消息未读数据消除
				this.grouplist[index]["sl"]=0;
				this.$forceUpdate();
				myCache("chatlist-"+this.userid,this.grouplist);
				// 去聊天室
				if(chat.sort=="privatechat"){
					// 私聊
					var info={
						chatId: chat.id,
						chatName: chat.name,
						chatAvatar: chat.img,
						chatTime: chat.datetime,
						friendId: chat.fromuser,
						minId: chat.minId,
						sort:"privatechat",
						from:"message" // yh 用户咨询进入聊天框，message 从消息进入聊天框
					}
					var data=encodeURIComponent(JSON.stringify(info));
					uni.navigateTo({
						url: `/pages/chat/chat?data=${data}`
					});
				}
				else if(chat.sort=="groupchat"){
					// 群聊
					var info={
						chatId: chat.id,
						groupId: chat.groupId,
						chatName: chat.name,
						chatAvatar: chat.img,
						chatTime: chat.datetime,
						friendId: chat.fromuser,
						teacherId: chat.instructor?chat.instructor:chat.teacherId,
						minId: chat.minId,
						sort:"groupchat", // privatechat 私聊  groupchat 群聊
						from:"message", // yh 用户咨询进入聊天框，message 从消息进入聊天框
						notice: chat.notice,
						remarkNickName: chat.remarkNickName,
						showNickName: chat.showNickName,
						showGroupName: chat.showGroupName,
						remarkGroupName: chat.remarkGroupName,
						reason: chat.reason,
						customerService: chat.customerService,
						instructor: chat.instructor,
						productId: chat.productId,
						productName: chat.productName
					}
					var data=encodeURIComponent(JSON.stringify(info));
					console.log(data);
					uni.navigateTo({
						url: `/pages/chat/groupchat?data=${data}`
					});
				}
			},
			loadData(){
				// 信息列表加载
				this.loadStatus="loading";
				setTimeout(() => {
					this.getgroupsmembers();
				}, 300);
			},
			// 获取群聊列表
			async getgroupsmembers(){
				// 获取聊天群列表
				this.grouplist=myCache("chatlist-"+this.userid)?myCache("chatlist-"+this.userid):[];
				this.loadStatus="nomore";
				this.$forceUpdate();
				// 按照时间排序
				var that=this;
				setTimeout(() => {
					that.reorder();
					myCache("chatlist-"+this.userid,that.grouplist);
				}, 300);

				// socket接收实时消息
				this.socketinit();
			},
			// 重新排序
			reorder(){
				this.grouplist.sort((a, b) => b.datetime - a.datetime);
				this.$forceUpdate();
			},
			// 拉取离线信息
			async pullMessage(i,item) {
				if(item.sort=="groupchat"){
					this.getgroupsnums(i,item);
				}
				else{
					this.getgroupsnums(i,item);
				}
			},
			// 拉取离线消息
			async getGroupList(item) {
				// 判断当前 minId 是不是列表中已经存在了，是不再拉取，不是继续拉取
				var that=this;
				const {data: res} = await uni.$http.get('/api/message/group/pullOfflineMessage',{minId: item.minId});
				if(res.data&&res.data.length>0){
					res.data.forEach((cell,index)=>{
						// 获取消息后对消息进行缓存处理
						var chatlastinfo={
							id: "groupchat-" + cell.groupId,
							groupId:cell.groupId,
							content: cell.content,
							minId: cell.id,
							sl: index+1,
							datetime: cell.sendTime,
							type: cell.type,
							name: "",
							userid: this.userid,
							fromuser: cell.sendId,
							img: "",
							sendId: cell.sendId,
							sendNickName: cell.sendNickName,
							sort:"groupchat"
						};
						this.getGroupInfo(chatlastinfo,index);
					});
				}
			},
			// 拉取离线消息
			async getList(item) {
				// 判断当前 minId 是不是列表中已经存在了，是不再拉取，不是继续拉取
				var that=this;
				const {data: res} = await uni.$http.get('/api/message/private/pullOfflineMessage',{minId: item.minId});
				if(res.data&&res.data.length>0){
					res.data.forEach((cell,index)=>{
						// 获取消息后对消息进行缓存处理
						var chatlastinfo={
							id: "privatechat-" + cell.recvId +"-" + cell.sendId,
							content: cell.content,
							minId: cell.id,
							sl:index+1,
							datetime: cell.sendTime,
							type: cell.type,
							name: "",
							userid: cell.recvId,
							fromuser: cell.sendId,
							img: "",
							sort:"privatechat"
						};
						this.updateChatList(chatlastinfo,index);
					});
				}
			},
			ifprivateMsgMaxId(item){
				var ret=true;
				// 判断当前 minId 是不是列表中已经存在了，是不再拉取，不是继续拉取
				var data= myCache("privateMsgMaxId")?myCache("privateMsgMaxId"):[];
				data.forEach((cell)=>{
					if(cell.id==item.id&&parseInt(item.minId)>=parseInt(cell.minId)){
						ret=false;
					}
				});
				return ret;
			},
			ifgroupMsgMaxId(item){
				console.log("ifgroupMsgMaxId")
				var ret=true;
				// 判断当前 minId 是不是列表中已经存在了，是不再拉取，不是继续拉取
				var data= myCache("groupMsgMaxId")?myCache("groupMsgMaxId"):[];
				data.forEach((cell)=>{
					if(cell.id==item.id&&parseInt(item.minId)>=parseInt(cell.minId)){
						ret=false;
					}
				});
				return ret;
			},
			// 获取群聊中离线信息
			async getgroupsnums(i,item){
				if(item.sort=="groupchat"){
					// 判断当前 minId 是不是列表中已经存在了，是不再拉取，不是继续拉取
					// if(this.ifgroupMsgMaxId(item)){
						// 群聊
						const {data: res} = await uni.$http.get("/api/message/group/pullOfflineMessage",{minId:item.minId});
						if(res.data&&res.data.length>0){
							// 获取消息后对消息进行缓存处理
							var data=res.data;
							// 获取离线消息数量返回
							this.grouplist[i]["sl"]=res.data.length;
							var last=res.data[res.data.length-1];
							if(last.type==0){
								last.content=decodeURIComponent(last.content);
							}
							if(last.type==0||last.type==1||last.type==2||last.type==3||last.type==4||data.type==5||data.type==6){
								this.grouplist[i].content=last.content;
								this.grouplist[i].type=last.type;
								this.grouplist[i].datetime=last.datetime;
								this.$forceUpdate();
								// 重新排序
								this.reorder();
								myCache("chatlist-"+this.userid,this.grouplist);
							}
						}
					// }
				}
				else{
					// 判断当前 minId 是不是列表中已经存在了，是不再拉取，不是继续拉取
					// if(this.ifprivateMsgMaxId(item)){
						// 私聊
						const {data: res} = await uni.$http.get("/api/message/private/pullOfflineMessage",{minId:item.minId});
						if(res.data&&res.data.length>0){
							// 获取消息后对消息进行缓存处理
							var data=res.data;
							// 获取离线消息数量返回
							this.grouplist[i]["sl"]=res.data.length;
							var last=res.data[res.data.length-1];
							if(last.type==0){
								last.content=decodeURIComponent(last.content);
							}
							if(last.type==0||last.type==1||last.type==2||last.type==3||last.type==4||data.type==5||data.type==6){
								this.grouplist[i].content=last.content;
								this.grouplist[i].type=last.type;
								this.grouplist[i].datetime=last.datetime;
								this.$forceUpdate();
								// 重新排序
								this.reorder();
								myCache("chatlist-"+this.userid,this.grouplist);
							}
						}
					// }
				}
			},
			// 获取群信息
			async getGroupInfo(info) {
				const {data: res} = await uni.$http.get('/api/group/find/'+info.groupId);
				if(res.data){
					var data = res.data;
					info.name=data.name;
					info.img=data.headImage||'/static/image/qltx.png';
					info.notice=data.notice;
					info.remarkNickName=data.remarkNickName;
					info.showNickName=data.showNickName;
					info.showGroupName=data.showGroupName;
					info.remarkGroupName=data.remarkGroupName;
					info.customerService=data.customerService;
					info.instructor=data.instructor;
					info.productId=data.productId;
					info.productName=data.productName;
					this.updateChatGroupList(info);
				}
			},
			async updateChatGroupList(info){
				var name=info.name,img=info.img||require("@/static/image/girl.png");
				const {data: res} = await uni.$http.get("/api/friend/find/"+info.sendId);
				if(res.data){
					var data=res.data;
					name=data.nickName?data.nickName:"匿名";
					img=data.headImage?data.headImage:require("@/static/image/girl.png");
					var idx=this.ifadd(info.id);
					if(!idx){
						this.grouplist.push(info);
						this.$forceUpdate();
					}
					else{
						this.grouplist[idx-1].content=info.content;
						this.grouplist[idx-1].datetime=info.datetime;
						this.grouplist[idx-1].fromuser=info.fromuser;
						this.grouplist[idx-1].type=info.type;
						this.$forceUpdate();
					}
					// 重新排序 保存缓存
					this.reorder();
					myCache("chatlist-"+this.userid,this.grouplist);
					// 聊天框消息缓存
					var msgchat=myCache(info.id);
					if(!msgchat){
						// 第一条聊天记录保存缓存
						let firstmsg = [{
							"fromname": name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						}];
						console.log("firstmsg",firstmsg)
						myCache(info.id,firstmsg);
					}
					else{
						// 聊天框信息 保存缓存
						let firstmsg = {
							"fromname": name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						};
						msgchat.push(firstmsg);
						myCache(info.id,msgchat);
					}
				}
				else{
					name="匿名";
					img="../../static/image/girl.png";
					var idx=this.ifadd(info.id);
					if(!idx){
						this.grouplist.push(info);
						this.$forceUpdate();
					}
					else{
						this.grouplist[idx-1].content=info.content;
						this.grouplist[idx-1].datetime=info.datetime;
						this.grouplist[idx-1].fromuser=info.fromuser;
						this.grouplist[idx-1].type=info.type;
						this.$forceUpdate();
					}
					// 重新排序
					this.reorder();
					myCache("chatlist-"+this.userid,this.grouplist);
					var msgchat=myCache(info.id);
					if(!msgchat){
						// 第一条聊天记录保存缓存
						let firstmsg = [{
							"fromname":  name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						}];
						myCache(info.id,firstmsg);
					}
					else{
						// 聊天框信息 保存缓存
						let firstmsg = {
							"fromname":  name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						};
						msgchat.push(firstmsg);
						myCache(info.id,msgchat);
					}
				}
			},
			async updateChatList(info){
				const {data: res} = await uni.$http.get("/api/friend/find/"+info.fromuser);
				if(res.data){
					var data=res.data;
					info.name=data.nickName?data.nickName:"匿名";
					info.img=data.headImage?data.headImage:require("@/static/image/girl.png");
					var idx=this.ifadd(info.id);
					if(!idx){
						this.grouplist.push(info);
						this.$forceUpdate();
					}
					else{
						// this.grouplist[idx-1].sl=(this.grouplist[idx-1].sl?this.grouplist[idx-1].sl+1:1);
						this.grouplist[idx-1].content=info.content;
						this.grouplist[idx-1].datetime=info.datetime;
						this.grouplist[idx-1].fromuser=info.fromuser;
						this.grouplist[idx-1].type=info.type;
						this.$forceUpdate();
					}
					// 重新排序 保存缓存
					this.reorder();
					myCache("chatlist-"+this.userid,this.grouplist);
					// 聊天框消息缓存
					var msgchat=myCache(info.id);
					if(!msgchat){
						// 第一条聊天记录保存缓存
						let firstmsg = [{
							"fromname": info.name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": info.img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"recvId": info.recvId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						}];
						myCache(info.id,firstmsg);
					}
					else{
						// 聊天框信息 保存缓存
						let firstmsg = {
							"fromname": info.name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": info.img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"recvId": info.recvId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						};
						msgchat.push(firstmsg);
						myCache(info.id,msgchat);
					}
				}
				else{
					info.name="匿名";
					info.img="../../static/image/girl.png";
					var idx=this.ifadd(info.id);
					if(!idx){
						this.grouplist.push(info);
						this.$forceUpdate();
					}
					else{
						// this.grouplist[idx-1].sl=(this.grouplist[idx-1].sl?this.grouplist[idx-1].sl+1:1);
						this.grouplist[idx-1].content=info.content;
						this.grouplist[idx-1].datetime=info.datetime;
						this.grouplist[idx-1].fromuser=info.fromuser;
						this.grouplist[idx-1].type=info.type;
						this.$forceUpdate();
					}
					// 重新排序
					this.reorder();
					myCache("chatlist-"+this.userid,this.grouplist);

					var msgchat=myCache(info.id);
					console.log(info.id,msgchat);
					if(!msgchat){
						// 第一条聊天记录保存缓存
						let firstmsg = [{
							"fromname": info.name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": info.img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"recvId": info.recvId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						}];
						myCache(info.id,firstmsg);
					}
					else{
						// 聊天框信息 保存缓存
						let firstmsg = {
							"fromname": info.name, // 发送人
							"fromuser": info.fromuser, // 发送人
							"headimg": info.img, // 发送人
							"toname": this.userName, // 接收人
							"touser": this.userid, // 接收人姓名
							"content": info.content,
							"time": info.type==3?5:0,
							"ifaudio":info.type==3? true:false,
							"fromtime": info.datetime,
							"type": info.type==0?'txt':(info.type==1?'image':info.type==3?'audio':(info.type==4?'video':'product')),
							"id": info.id,
							"minId": info.minId,
							"recvId": info.recvId,
							"sendId": info.sendId,
							"send": info.type==6?await this.getProduct(info.content):(info.type==5?await this.getOrder(info.content):null)
						};
						msgchat.push(firstmsg);
						myCache(info.id,msgchat);
					}
				}
			},
			async getProduct(id){
				console.log("getProduct",id)
				var rets=null;
				const {data: res} = await uni.$http.post("/api/message/private/getProductForIm",{"productId":id});
				if(res.data){
					var data=res.data;
					rets={
						type:data.isCourse==0?1:2,// 1 商品，2 课程，3订单
						id:data.id,
						name:data.name,
						pic:data.pic,
						price:data.price,
						unit: data.unit,
						brandName:data.brandName,
						isCourse:data.isCourse
					}
					console.log(rets)
					return rets;
				}
				else{
					return rets;
				}
			},
			async getOrder(id){
				var rets=null;
				const {data: res} = await uni.$http.post("/api/message/private/getOrderForIm",{"orderItemId":id});
				if(res.data){
					var data=res.data;
					rets={
						type:3,// 1 商品，2 课程，3订单
						id:data.id,
						orderId:data.orderId,
						name:data.productName,
						pic:data.pic?data.pic:'/static/image/nopic.png',
						price:data.totalAmount,
						quantity:data.quantity,
						spData: data.spData? JSON.parse(data.spData):null
					}
					return rets;
				}
				else{
					return rets;
				}
			},
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight'];
			},
			// 获取导航栏高度
			getNavBarHeight(){
				return 45+uni.getSystemInfoSync()['statusBarHeight'];
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.page-header {
		position: fixed;
		width: 100%;
		z-index: 999;
	    padding: 40rpx 30rpx 30rpx 30rpx;
	    display: flex;
	    color: #fff;
	    font-size: 36rpx;
	    background-color: #00a89b;
	    .text-center {
	        width: 100%;
	        text-align: center;
	    }
	    .edit {
	        position: absolute;
	        top: 50%;
	        transform: translateY(-50%);
	        right: 30rpx;
	        font-size: 32rpx;
	    }
	}
	.wrapcon{
		padding: 0;
		width: 100%;
		position: relative;
		margin: 180rpx 0 0 0;
		min-height: calc(100vh - 180rpx);
		/* #ifdef H5 */
		margin: calc( 110rpx + var(--window-top)) 0 0 0;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom) - 180rpx);
		/* #endif */
		overflow-y: auto;
	}
	.listcell{
		background: #fff;
		margin: 0;
		width: 100%;
		min-width: 750rpx;
		.lcon{
			border-bottom: 1rpx solid #eee;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			opacity: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			min-width: 750rpx;
			.limg{
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				.img{
					width: 100rpx;
					height: 100rpx;
				}
			}
			.lright{
				display: flex;
				flex: 1;
				flex-direction: column;
			}
			.lrow{
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
			}
			.pname{
				display: flex;
				flex: 1;
				line-height: 50rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #000000;
			}
			.ptime{
				line-height: 50rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #595959;
			}
			.pnr{
				display: flex;
				flex: 1;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #595959;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 假设你的行高是20px，并且你想要两行显示 */
				line-height: 40rpx;         /* 每行的行高 */
				max-height: 40rpx;
			}
			.lnum{
				background-color: #de0000;
				padding: 0 10rpx;
				min-width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 28rpx;
			}
		}
	}
	.tips{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 100%;
		line-height: 44rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #595959;
		text-align: center;
	}
	.submitcon{
		margin-top: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bbtn{
		margin: 20rpx 30rpx 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 560rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #367FFA;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(67,110,255,0.4);
		border-radius: 254rpx 254rpx 254rpx 254rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.nodata{
		background-image: url('../../static/image/nomsg.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		height: 376rpx;
		width: 256rpx;
		color: #00a89b;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		padding-bottom: 40rpx;
		margin: 100rpx auto;
	}
</style>
