<!--
 * @Author: ch
 * @Date: 2022-03-26 14:32:03
 * @LastEditors: ch
 * @LastEditTime: 2022-05-17 16:22:13
 * @Description: file content
-->
<template>
	<view class="main">
		<view class="msg-item" v-for="item in msgData" :key="item.id">
			<view class="msg-item--title">
				<text>{{item.payload.title }} {{item.id}}</text>
				<text class="msg-item--time">{{item.createTimeStamp}}</text>
			</view>
			<view class="msg-item--con">
				<image class="msg-item--img" src="@/static/message/xt.png" mode="widthFix"/>
				<view class="msg-item--desc">{{item.payload.content}}</view>
			</view>
		</view>
		<u-loadmore status="loading" v-if="!msgData.length"/>
	</view>
</template>
<script>
import {MsbWebSkt, createUUID} from '@/common/utils';
export default {
	data(){
		return {
		}
	},
	computed:{
		curSessionData(){
			return this.$store.state.sessionData.find(i =>i.id == this.$store.state.sessionMsgId)
		},
		msgData (){
			return this.curSessionData ? this.curSessionData.messageList : [];
		}
	},
	
	onReachBottom(){
		this.getHistoryMsg();
	},
	onShow(){
		if(!this.$store.state.sessionMsgId){
			this.$Router.back();
			return false
		}
		uni.setNavigationBarTitle({
			title : this.curSessionData.fromNickname
		});
		
		this.getHistoryMsg();
		this.readMsg();
	},
	methods:{
		/**
		 * 获取历史消息
		 */
		getHistoryMsg(){
			this.loading = true;
			const lastMsg = this.msgData[this.msgData.length - 1] || {};
			MsbWebSkt.send({
				data : JSON.stringify({
					traceId : createUUID(),
					traceType : "2", 
					content: { 
						sessionId : this.$store.state.sessionMsgId,
						topMessageId : lastMsg.id || null
					}
				})
			})
		},
		/**
		 * 已读消息
		 */
		readMsg(){
			MsbWebSkt.send({
				data : JSON.stringify({
					traceId : createUUID(),
					traceType : "6", 
					content: { 
						sessionId : this.$store.state.sessionMsgId
					}
				})
			});
			// 计算页头消息数
			const count = this.$store.state.sessionMsgCount - this.curSessionData.unreadCount;
			// 计算会话列表消息数
			this.curSessionData.unreadCount = 0;
			this.$store.commit('SET_SESSION_MSG_COUNT', count)
		}
	}
}
</script>
<style lang="scss" scoped>
.msg-item{
	padding: 40rpx 0 0 40rpx;
	&--title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 40rpx;
		font-size: $font-size-lg;
		color: $color-grey6;
	}
	&--time{
		font-size: $font-size-sm;
		color: $color-grey4;
	}
	&--con{
		display: flex;
		border-bottom: 1px solid $color-grey2;
		padding: 40rpx 0;
	}
	&--img{
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
		margin-right: 40rpx;
	}
	&--desc{
		width: 455rpx;
		font-size: $font-size-base;
		line-height: 39rpx;
		color: $color-grey5;
	}
}
</style>