<template>
	<view class="container">
		<view class="message-list">
			<scroll-view scroll-y>
				<view v-for="(item, index) in messagesList" :key="index">
					<!-- 接收到的消息 -->
					<view v-if="isSelf(item.receiveUserId)">
						<view class="flex-center-center mtb-30">
							<text class="fs-28" style="color: #878787;">{{item.sendTime}}</text>
						</view>
						<view class="flex mlr-24">
							<image class="wh-100 br-50" :src="item.sendUserAvatar"></image>
							<view class="pad-20 ml-20"
								style="border-radius:2rpx 20rpx 20rpx 20rpx;background-color: #FFF4CF;max-width: 400rpx;">
								<text class="fs-28" style="color: #333333;">{{item.messageContent}}</text>
							</view>
						</view>
					</view>
					<!-- 发送的消息 -->
					<view v-else>
						<view class="flex-center-center mtb-30">
							<text class="fs-28" style="color: #878787;">{{item.sendTime}}</text>
						</view>
						<view class="flex mt-30 mlr-24">
							<view class="flex-1"></view>
							<view class="pad-20 mr-20" style="border-radius:20rpx 2rpx 20rpx 20rpx;background-color: #FFF4CF; 
								display: flex;justify-content: flex-end;max-width: 400rpx;">
								<text class="fs-28" style="color:#333333;">{{item.messageContent}}</text>
							</view>
							<image class="wh-100 br-50" :src="item.sendUserAvatar"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mtb-30 flex-center-center">
			<view class="flex br-30 pad-30 fs-28 mlr-24" style="width: 90%;background-color: #212121;color: #878787;">
				<view class="flex-1 flex align-center">
					<textarea v-model="messageContent" placeholder="请输入聊天内容…" auto-height></textarea>
				</view>
				<view class="flex align-end" @click="getSend">
					<image class="wh-74" src="/pagesMine/static/icon_send.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				batchNo: '',
				receiveUserId: '',
				messageContent: '',
				title: '',
				messagesList: [],
			};
		},
		onLoad(e) {
			this.batchNo = e.batchNo
			this.receiveUserId = e.receiveUserId
			uni.setNavigationBarTitle({
				title: e.title
			});
		},
		onShow() {
			this.getList()
		},
		methods: {
			isSelf(userId) {
				if (userId == uni.getStorageSync('id')) {
					return true
				} else {
					return false
				}

			},
			getList() {
				const params = {
					url: '/app/message/searchMessagePageList',
					method: "GET",
					data: {
						batchNo: this.batchNo || '',
						receiveUserId: this.receiveUserId,
					}
				}
				this.$request(params).then(res => {
					console.log("LMG", res);
					this.messagesList = res.rows
				})
			},
			getSend() {
				const params = {
					url: '/app/message/sendMessage',
					data: {
						receiveUserId: this.receiveUserId,
						messageContent: this.messageContent,
						batchNo: this.batchNo
					}
				}
				this.$request(params).then(res => {
					this.batchNo = res.data
					this.messageContent = ''
					this.getList()
				})
			},
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #000000;
		display: flex;
		flex-direction: column;
	}

	.message-list {
		flex: 1;
		overflow-y: auto;
	}
</style>