<template>
	<view class="chat-window">
		<scroll-view :scroll-y="true" class="message-list" :scroll-into-view="lastMessageId">
			<view v-for="message in messages" :key="message.id" :id="'msg-' + message.id"
				:class="['message-item', message.from === 'me' ? 'my-message' : 'their-message']">
				<u-avatar v-if="message.from !== 'me'" :src="theirAvatar" size="80"></u-avatar>
				<view class="message-content">
					<text>{{ message.content }}</text>
				</view>
				<u-avatar v-if="message.from === 'me'" :src="myAvatar" size="80"></u-avatar>
			</view>
		</scroll-view>

		<view class="input-area">
			<u-input v-model="newMessage" placeholder="输入消息..." class="input-field" :border="false" />
			<u-button type="primary" size="medium" @click="sendMessage" class="send-button">发送</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myAvatar: 'https://via.placeholder.com/80',
				theirAvatar: 'https://via.placeholder.com/80',
				newMessage: '',
				messages: [],
				lastMessageId: '',
			}
		},
		onLoad(options) {
			const userId = options.userId;
			// 动态设置导航栏标题
			uni.setNavigationBarTitle({
				title: `与 ${userId} 的对话`
			});
			this.fetchMessages(userId);
		},
		methods: {
			fetchMessages(userId) {
				// 模拟获取历史消息
				this.messages = [{
						id: 1,
						from: 'them',
						content: '你好！很高兴认识你。'
					},
					{
						id: 2,
						from: 'me',
						content: '你好！我也是。'
					},
					{
						id: 3,
						from: 'them',
						content: '我们下周一开会讨论一下那个项目吧，你觉得怎么样？'
					},
					{
						id: 4,
						from: 'me',
						content: '好啊，没问题。'
					},
				];
				this.scrollToBottom();
			},
			sendMessage() {
				if (this.newMessage.trim() === '') return;
				const newMsg = {
					id: this.messages.length + 1,
					from: 'me',
					content: this.newMessage.trim()
				};
				this.messages.push(newMsg);
				this.newMessage = '';
				this.scrollToBottom();
			},
			scrollToBottom() {
				this.$nextTick(() => {
					if (this.messages.length > 0) {
						this.lastMessageId = `msg-${this.messages[this.messages.length - 1].id}`;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-window {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.message-list {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.message-item {
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-start;
	}

	.my-message {
		justify-content: flex-end;

		.message-content {
			background-color: #409eff;
			color: #fff;
			border-radius: 20rpx 20rpx 4rpx 20rpx;
			margin-right: 20rpx;
		}
	}

	.their-message {
		justify-content: flex-start;

		.message-content {
			background-color: #fff;
			color: #333;
			border-radius: 20rpx 20rpx 20rpx 4rpx;
			margin-left: 20rpx;
		}
	}

	.message-content {
		padding: 20rpx 25rpx;
		max-width: 70%;
		font-size: 30rpx;
		line-height: 1.6;
	}

	.input-area {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #e0e0e0;
	}

	.input-field {
		flex: 1;
		margin-right: 20rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 0 20rpx;
	}

	.send-button {
		height: 70rpx;
		line-height: 70rpx;
	}
</style>