<template>
	<!-- 聊天详情页 -->
	<view class="chat_message_page">
		<!-- 页面内容 -->
		<view class="page_content">

			<!-- 聊天内容区域
				TODO 键盘滚动高度判断-->
			<scroll-view id="scroll" :scroll-y="true" :scroll-into-view="scrollToId" :scroll-top="scrollTop"
				:scroll-anchoring="true" @scrolltoupper="getUpList"
				:style="{height: 'calc(100vh - '+ bottomHight + 'rpx - env(safe-area-inset-bottom))'}"
				style="overflow-anchor:auto;">

				<view class="message-block padding-bottom-30">
					<!-- ty组件:列表 -->
					<ty-list-list :status="load_status" type="2">

						<!-- 循环消息列表 -->
						<template v-slot:up_list>
							<view :id="'scroll'+item.id" v-for="(item,index) in up_list" :key="index"
								class="message-item padding-lr-30 text-28"
								:class="{ 'self-message': item.user_id == userId, 'friend-message': item.user_id != userId }">
								<!-- 消息时间 -->
								<view class="margin-top-40 text-center text-98" v-if="item.is_show_time == 1">
									{{item.show_time}}
								</view>

								<!-- 消息内容 -->
								<view class="content margin-top-40 flex align-start">

									<!-- 用户头像 -->
									<image class="jc-image-80 radius-10" :src="item.user_head_img"></image>

									<!-- 消息内容 -->
									<view class="margin-lr-25">
										<!-- 文本类型 -->
										<view v-if="item.type == 1"
											class="send-text padding-20 radius-10 bg-ff line-40">
											<!-- {{item.content}} -->
											<rich-text :nodes="replaceEmoji(item.content)"></rich-text>
										</view>

										<!-- 语音类型 
											1秒80像素长，60秒464像素最长-->
										<view class="send-voice padding-20 radius-10 bg-main-light line-40"
											:style="{width: 100 + (464 - 100 ) / 59 * item.attach_data.record_seconds +'rpx'}"
											v-if="item.type == 2" @click="playVoice(index)">
											<text class="icon tyIcon-yuyin1 text-28 text-33"></text>
											<view class="voice_text">{{item.attach_data.record_seconds}}''</view>
											<!-- <view class="image-red-circul"></view> -->
										</view>

										<!-- 图片类型 
											lazy-load 图片懒加载。只针对page与scroll-view下的image有效 -->
										<view v-if="item.type == 3" class="message-image radius-10"
											@click="previewImage(item.content)">
											<!-- 宽图片 
											  宽度为230，高度计算，最低为100rpx 保证图片的短边能完全显示出来-->
											<image class="jc-image radius-10" :src="item.content" mode="aspectFill"
												style="width: 230rpx;"
												:style="{height: (item.attach_data.height * 230 / item.attach_data.width < 100 ? 100 :item.attach_data.height * 230 / item.attach_data.width) + 'rpx' }"
												v-if="item.attach_data.width / item.attach_data.height >= 230 / 300">
											</image>
											<!-- 长图片 
												高度为300，宽度计算，最低为100rpx 保证图片的短边能完全显示出来-->
											<image class="jc-image radius-10" :src="item.content" mode="aspectFill"
												style="height: 300rpx;"
												:style="{width: (item.attach_data.width * 300 / item.attach_data.height < 100 ? 100 : item.attach_data.width * 300 / item.attach_data.height) + 'rpx' }"
												v-if="item.attach_data.width / item.attach_data.height < 230 / 300">
											</image>
										</view>

										<!-- 位置类型 -->
										<view class="overflow-hidden radius-10 bg-ff" style="width: 460rpx;"
											v-if="item.type == 4" @click="openLocation(item.attach_data)">
											<view class="padding-20">
												<view class="line-height-40 text-28 text-cut-one">{{item.content}}
												</view>
												<view class="margin-top-10 line-height-35 text-98 text-cut-one">
													{{item.attach_data.address}}
												</view>
											</view>
											<map style="width: 100%; height: 175rpx;" :latitude="item.attach_data.lat"
												:longitude="item.attach_data.lng">
											</map>
										</view>
										<!-- 商品类型 -->
										<view class="overflow-hidden radius-10 bg-ff" style="width: 460rpx;"
											v-if="item.type == 5">
											<view class="padding-tb-10 padding-left-10 padding-right-40 flex ">
												<view class="goodsImg">
													<image :src="item.attach_data.product_cover_img" class="width-100p height-100p block"></image>
												</view>
												<view class="flex-one margin-left-10 text-26 text-33 text-bold height-80 line-40 text-cut-two">
													{{item.attach_data.product_name}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>

						</template>
					</ty-list-list>
				</view>
			</scroll-view>

			<!-- jc组件:聊天底部栏 -->
			<jc-chat-chatBtn @sendMessage="sendMessage" @bottomHightChange="bottomHightChange"
				@recordStart="recordStart"></jc-chat-chatBtn>
		</view>

		<!-- 页面浮层 -->
		<view class="page_layer">

		</view>
	</view>
</template>

<script>
	import chat from './api/chat.js'
	import emoji from "@/components/hzjc/components/utils/emoji.js";
	const innerAudioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				// 私聊房间ID
				room_id: '',
				userId: '',
				// 加载状态,默认为空
				load_status: '',
				// 聊天数据列表
				up_list: [],
				// 底部区域高度
				bottomHight: 100,
				// 语音是否正在播放
				isVoicePlay: false,
				// 滚动到当前的ID
				scrollToId: '',
				// 设置竖向滚动条位置 scroll-into-view 的优先级高于 scroll-top
				scrollTop: 0,
				// emoji列表
				emojiList: emoji.list,
				// 商品信息
				productId: '',
				productData: {},
			}
		},

		onLoad(options) {
			// 获取商品id
			// this.productId = options.productId ? options.productId : '';
			// options.room_id=401399706038272
			// userId赋值
			this.userId = uni.getStorageSync('user_id')

			// 获取私聊房间ID
			this.room_id = options.room_id || 0;

			// if (this.productId) {
			// 	this.getProductData()
			// }
		},

		onReady() {
			// 获取聊天室详情
			chat.getChatRoomDetail(this.room_id).then(res => {
				// 设置标题
				this.cn.setTitle(res.data.room_user.to_user_nick_name)
			})

			

			// 监听音频停止事件
			innerAudioContext.onStop(() => {
				// 更改音频播放状态
				this.isVoicePlay = false
			})
		},

		onShow() {
			chat.curPage = 2
			chat.curRoomId = this.room_id
			chat.that = this

			console.log('详情页 websocket是否打开', this.websocket.isSocketOpen)

			// 已经打开长连接
			if (this.websocket.isSocketOpen) {
				// 加载第一页聊天列表
				this.loadUpList(1)

				// 更改用户在线状态
				chat.updateUserOnlineStatus(this.room_id, 1)

				// 还没有打开长连接
			} else {
				// 连接长连接
				this.websocket.init().then((res) => {
					// 加载第一页聊天列表
					this.loadUpList(1)

					// 更改用户在线状态
					chat.updateUserOnlineStatus(this.room_id, 1)
				})

				// 监听WebSocket接受到服务器的消息事件
				chat.onMessage()
			}
		},

		onUnload() {
			// 更改当前聊天信息
			chat.curPage = 3
			chat.curRoomId = ''
			chat.that = {}

			// 更改用户为离线状态
			chat.updateUserOnlineStatus(this.room_id, 0)

			// 停止所有音频播放
			innerAudioContext.stop()
		},

		methods: {
			// 获取商品数据
			// getProductData() {
			// 	this.rq.getData('fire/api/Fire/getProductDetail', {
			// 		product_id: this.productId
			// 	}).then(res => {
			// 		if (res.code == 0) {
			// 			this.productData = res.data.detail;
			// 			this.sendMessage({message_type:5,content:{},attach:{}})
			// 		}
			// 	})
			// },
			/**
			 * 加载上一页的数据
			 * @date 2022-08-09
			 */
			getUpList() {
				this.loadUpList(0)
			},

			/**
			 * 发送信息
			 * @date 2022-08-15
			 */
			sendMessage(e) {
				var product = {};
				// if (this.productId) {
				// 	product.id = this.productData.id;
				// 	product.name = this.productData.name;
				// 	product.cover_img = this.productData.cover_img;
				// }
				chat.insertChatMessage(this.room_id, e.message_type, e.content, e.attach, product).then(res => {

				})
			},

			/**
			 * 底部栏高度变化事件
			 * @date 2022-08-15
			 */
			bottomHightChange(e) {
				this.bottomHight = e.bottomHight

				// 滚动到最新消息
				setTimeout(res => {
					this.scrollToBottom()
				}, 10)
			},

			/**
			 * 开始录音事件
			 * @date 2022-08-15
			 */
			recordStart() {
				// 开始录音时，停止所有音频播放
				innerAudioContext.stop()
			},

			/**
			 * 图片预览
			 * @param {string} image_url 预览图片地址
			 * @date 2022-08-15
			 */
			previewImage: function(image_url) {
				// 需要展示的图片列表
				let imageUrls = []

				let message_list = this.up_list

				for (let index in message_list) {
					if (message_list[index]['type'] == 3) {
						imageUrls.push(message_list[index]['content'])
					}
				}

				// 预览图片
				this.image.previewImage(imageUrls, imageUrls.indexOf(image_url))
			},

			/**
			 * 播放语音
			 * @param {int} index 第X条消息
			 * @date 2022-08-15
			 */
			playVoice(index) {
				// 更改音频播放状态
				this.isVoicePlay = true

				// 音频的数据链接
				innerAudioContext.src = this.up_list[index].content
				innerAudioContext.play()
			},

			/**
			 * 使用应用内置地图查看位置
			 * @date 2022-09-21
			 */
			openLocation(e) {
				// 打开内置地图
				this.cn.openLocation(e.lat, e.lng, e.name, e.address)
			},

			// ------------------------------ 以下为封装方法---------------------------------
			/**
			 * 加载聊天列表
			 * @param {int} first_page 1--加载第一页，自动清空列表 0--加载上一页，不清空列表
			 * @date 2022-09-15
			 */
			loadUpList(first_page) {
				// 当前消息列表最上面一条消息ID
				let cur_first_message_id = this.up_list.length ? this.up_list[0].id : ''

				// 加载聊天列表
				chat.listChatRoomMessage(this.room_id, cur_first_message_id, first_page, this).then(res => {
					// 第一次加载，滚动到最新消息
					if (first_page == 1) {
						setTimeout(() => {
							if (this.up_list.length) {
								// 滚动到最新消息
								this.scrollToId = 'scroll' + this.up_list[this.up_list.length - 1].id
							}
						}, 10)
					} else {
						this.scrollToId = 'scroll' + cur_first_message_id
					}
				})
			},

			/**
			 * 滚动到聊天底部(底部栏发生变化时，有新消息时，第一次加载)
			 * @param {Object} str
			 */
			scrollToBottom() {
				// 返回一个 SelectorQuery 对象实例
				let query = uni.createSelectorQuery()

				// 在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息
				query.select('.message-block').boundingClientRect()
				// 在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息
				query.select('#scroll').boundingClientRect()
				// 执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回
				query.exec((res) => {
					let messageBlockHeight = res[0].height
					let scrollViewHeight = res[1].height
					console.log(8111,res)
					// 消息内容高度 > 滚动区域高度
					if (messageBlockHeight > scrollViewHeight) {
						setTimeout(() => {
							// 滚动到最后一屏，即消息底部
							this.scrollTop = messageBlockHeight - scrollViewHeight + 300
						}, 10)
					}
				})
			},

			/**
			 * 替换表情符号为图片
			 * @param {Object} str 带emoji表情的文本
			 * @date 2022-09-20
			 */
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					for (let i = 0; i < this.emojiList.length; i++) {
						if (this.emojiList[i].alt == item) {
							// 在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
							// 比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
							/* let onlinePath = 'https://www.xxx.com/emoji/'
							let imgstr = '<img width="40px" src="' + onlinePath + EM.url + '">'; */
							let imgstr = '<img width="20rpx" src="https://jucheng-bjhedasx.oss-cn-qingdao.aliyuncs.com/bjhedasx/uid2/emoji/' + this.emojiList[i].url +
								'">'

							return imgstr
						}

					}
				});
				// return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
				return '<div style="word-wrap:break-word;">' + replacedStr + '</div>';
			},
		}
	}
</script>

<style>
	/* 个人发送的消息内容 */
	.self-message .content {
		flex-direction: row-reverse;
	}

	/* 文本消息 */
	.send-text {
		/* 屏幕宽度 - 两边留白宽度 - 头像宽度 - 头像与文本间距宽度 */
		max-width: calc(100vw - 60rpx - 160rpx - 50rpx);
		position: relative;
		display: flex;
		align-items: center;
	}

	/* 好友发送的消息前面加小三角 */
	.friend-message .send-text::before {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		top: 34rpx;
		left: -12rpx;
		border-right: 12rpx solid #fff;
		border-top: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
	}

	/* 个人发送的消息后面加小三角 */
	.self-message .send-text::after {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		top: 34rpx;
		right: -12rpx;
		border-left: 12rpx solid #fff;
		border-top: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
	}

	/* 图片 */
	.message-image {
		overflow: hidden;
	}

	/* 语音消息 */
	.send-voice {
		position: relative;
		display: flex;
		align-items: center;
	}

	/* 个人发的语音元素要倒序排列 */
	.self-message .send-voice {
		flex-direction: row-reverse;
	}

	/* 好友发送的消息前面加小三角 */
	.friend-message .send-voice::before {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		top: 34rpx;
		left: -12rpx;
		border-right: 12rpx solid var(--mainLight);
		border-top: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
	}

	/* 个人发送的消息后面加小三角 */
	.self-message .send-voice::after {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		top: 34rpx;
		right: -12rpx;
		border-left: 12rpx solid var(--mainLight);
		border-top: 12rpx solid transparent;
		border-bottom: 12rpx solid transparent;
	}

	.friend-message .icon {
		transform: rotateY(-180deg);
	}
	
	/* 商品 */
	.goodsImg{
		width: 140rpx;
		height: 140rpx;
		border-radius: 5rpx;
		overflow: hidden;
	}
</style>
