<template>
	<view class="chat_index_page">
		<!-- 页面内容 -->
		<view class="page_content padding-bottom-safe" v-if="isLogin">

			<!-- 好友聊天列表 -->
			<view class="position-relative" v-for="(item,index) in roomList" :key="index" @click="click(item.room_id)">

				<!-- 聊天内容带删除  -->
				<view class="position-relative flex align-center bg-ff" :style="item.style" @touchstart="touchStart"
					@touchmove="touchMove" @touchend="touchEnd" :data-index="index">

					<!-- 聊天内容 -->
					<view class="width-100p flex align-center">
						<!-- 好友头像 -->
						<view class="position-relative padding-left-30">
							<image class="jc-image-80 radius-10" :src="item.to_user_head_img" />
							<view v-if="item.unread_number > 0" class="unread-red-dot"></view>
						</view>

						<!-- 聊天内容 -->
						<view class="padding-tb-25 flex-one padding-lr-30 flex flex-direction align-start">
							<view class="width-100p line-height-40 flex align-center justify-between">
								<view class="text-cut-one text-30">{{item.to_user_nick_name}}</view>
								<view class="text-22 text-98">{{item.show_time}}</view>
							</view>
							<view class="margin-top-10 line-height-30 text-cut-one text-24 text-98">
								{{item.show_message_text}}
							</view>
						</view>
					</view>

					<!-- 删除按钮 -->
					<view class="move bg-main text-center text-26 text-ff">
						<view @tap.stop.prevent="remove(index,item.room_id)">删除</view>
					</view>
				</view>

				<!-- border线 -->
				<view :class="{ 'border-line': index < roomList.length - 1 }"></view>

			</view>
		</view>
		<view class="emptyPage flex flex-direction align-center" v-else>
			<image src="/static/home/emptyChat.png" class="chatImg"></image>
			<view class="text-28 text-33 line-40 margin-top-25">
				登录后可查看消息
			</view>
			<view class="margin-top-60 text-center text-28 text-ff loginBtn" @click="go('/pages/home/login')">
				去登录
			</view>
		</view>
	</view>
</template>

<script>
	import chat from './api/chat.js'
	export default {
		data() {
			return {
				// 聊天联系人列表
				roomList: [],
				// 触摸开始时 触摸点的X轴坐标
				touchStartX: 0,
				// 触摸结束时 触摸点的X轴坐标
				touchEndX: 0,
				isLogin:false,//是否登录了
			}
		},

		onReady() {

		},

		onShow() {
			this.isLogin = this.cn.isLogin();
			if(this.cn.isLogin()){
				// 修改chat属性
				chat.curPage = 1
				chat.that = this
				
				console.log('列表页 websocket是否打开', this.websocket.isSocketOpen)
				
				// 打开长连接
				if (this.websocket.isSocketOpen) {
					// 获取聊天列表（不分页）
					this.listChatRoom()
					// 还没有打开长连接
				} else {
					this.websocket.init().then((res) => {
						// 获取聊天列表（不分页）
						this.listChatRoom()
					})
				
					// 监听WebSocket接受到服务器的消息事件
					chat.onMessage()
				}
			}
			
		},
		
		onUnload(){
			// 重置chat属性
			chat.curPage = 3
			chat.that = {}
		},

		methods: {
			/**
			 * 点击进入详情
			 * @param {int} roomId 房间ID
			 * @date 2022-09-19
			 */
			click(roomId) {
				// 复位其他所有数据格式
				this.resetAll()

				// 跳转页面
				uni.navigateTo({
					url: '/pages/chat/message?room_id=' + roomId
				})
			},

			/**
			 * touch触摸开始
			 * @param {Object} e
			 * @date 2022-09-19
			 */
			touchStart(e) {
				this.touchStartX = e.touches[0].pageX
				this.touchEndX = e.touches[0].pageX
			},

			/**
			 * touch触摸移动
			 * @param {Object} e
			 * @date 2022-09-19
			 */
			touchMove(e) {
				this.touchEndX = e.touches[0].pageX

				// 触摸的第index个数据
				let index = e.currentTarget.dataset.index

				// 移动距离
				let disX = this.touchStartX - this.touchEndX

				// 左滑
				if (disX > 5) {
					this.resetAll()
					let transX = this.cn.px2rpx(disX) < 100 ? this.cn.px2rpx(disX) : 100
					// 本条数据样式变化
					this.roomList[index].style = 'left: -' + transX + 'rpx;'
					// 右滑
				} else {
					// 是否在左滑完成状态
					if (this.roomList[index].is_moving == 0) {
						return false
					}

					let transX = this.cn.px2rpx(-disX) < 100 ? this.cn.px2rpx(-disX) - 100 : 0
					// 本条数据样式变化
					this.roomList[index].style = 'left: ' + transX + 'rpx;'
				}
			},

			/**
			 * touch触摸结束
			 * @param {Object} e
			 * @date 2022-09-19
			 */
			touchEnd(e) {
				// 触摸的第index个数据
				let index = e.currentTarget.dataset.index

				// 移动距离
				let disX = this.touchStartX - this.touchEndX

				// 左滑结束
				if (disX > 0) {
					// 左滑超过元素的一半
					if (disX > 50) {
						this.roomList[index].is_moving = 1

						// 本条数据样式变化
						this.roomList[index].style = 'left: -100rpx;'
					} else {
						// 复位其他所有数据格式
						this.resetAll()
					}
					// 右滑结束
				} else if (disX < 0) {
					// 复位其他所有数据格式
					this.resetAll()
				}
			},

			/**
			 * 复位所有样式
			 * @date 2022-09-18
			 */
			resetAll() {
				let roomList = this.roomList
				roomList.forEach((e, index) => {
					// 初始化样式为空
					if (e.style) {
						e.style = ''
						e.is_moving = 0
					}
				})
				this.roomList = roomList
			},

			/**
			 * 删除聊天记录
			 * @param {int} index 第index条数据
			 * @param {int} roomId 房间ID
			 * @date 2022-09-19
			 */
			remove(index, roomId) {
				this.cn.confirm('是否确定删除?').then(res => {
					// 确定按钮
					if (res.confirm) {
						this.rq.getData('chat/api/FriendsChat/deleteChatRoom', {
							room_id: roomId
						}).then(res => {
							if (res.code == 0) {
								let roomList = this.roomList
								roomList.forEach((e, index) => {
									// 移除数据
									if (e.room_id == roomId) {
										roomList.splice(index, 1)
									}
								})
								this.roomList = roomList
							}
						})
					}
				})
			},

			//************************封装方法*******************************
			/**
			 * 获取和好友的聊天列表
			 */
			listChatRoom() {
				// 获取聊天列表（不分页）
				chat.listChatRoom().then(res => {
					let roomList = res.data.room_list
					roomList.forEach((e, index) => {
						// 初始化样式为空
						if (!e.hasOwnProperty("style")) {
							e.style = ''
							// 0--没有在移动 1--在移动
							e.is_moving = 0
						}
					})
					this.roomList = res.data.room_list
				})
			}
		}
	}
</script>

<style>
	/* 未读红点 */
	.unread-red-dot {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background-color: var(--main);
	}

	/* 分割线 */
	.border-line {
		position: absolute;
		bottom: 0;
		right: 0;
		width: calc(100vw - 30rpx - 80rpx - 10rpx);
		height: 2rpx;
		background-color: #ededed;
	}

	/* 删除按钮 */
	.move {
		position: absolute;
		top: 0;
		right: -100rpx;
		width: 100rpx;
		height: 130rpx;
		line-height: 130rpx;
	}
	.emptyPage{
		width: 100vw;
		background: #fff;
		height: 100vh;
		padding-top: 85rpx;
		box-sizing: border-box;
	}
	.chatImg{
		width: 182rpx;
		height: 150rpx;
		display: block;
	}
	.loginBtn{
		width: 200rpx;
		height: 72rpx;
		background: #2F97FF;
		border-radius: 40rpx;
		line-height: 72rpx;
	}
</style>
