<template>
	<view class="chat-list-container">
		<view v-for="chat in chatList" :key="chat.id" class="chat-item" @click="goToChat(chat.user.id)">
			<u-avatar :src="chat.user.avatar" size="90"></u-avatar>
			<view class="chat-content">
				<view class="content-header">
					<text class="user-name">{{ chat.user.name }}</text>
					<text class="last-time">{{ chat.lastMessage.time }}</text>
				</view>
				<view class="content-body">
					<text class="last-message">{{ chat.lastMessage.content }}</text>
					<u-badge :is-dot="true" type="error" v-if="chat.unreadCount > 0"></u-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatList: [{
						id: 1,
						user: {
							id: 'user001',
							name: '张云',
							avatar: 'https://via.placeholder.com/90'
						},
						lastMessage: {
							content: '好的，我们下周一开会讨论一下这个项目。',
							time: '昨天'
						},
						unreadCount: 1
					},
					{
						id: 2,
						user: {
							id: 'user002',
							name: '李经理',
							avatar: 'https://via.placeholder.com/90'
						},
						lastMessage: {
							content: '资料已经发你邮箱了，请查收。',
							time: '14:28'
						},
						unreadCount: 0
					},
					{
						id: 3,
						user: {
							id: 'user003',
							name: '王顾问',
							avatar: 'https://via.placeholder.com/90'
						},
						lastMessage: {
							content: '[图片]',
							time: '周一'
						},
						unreadCount: 3
					}
				]
			}
		},
		methods: {
			goToChat(userId) {
				uni.navigateTo({
					url: `/packages/chat/chatWindow?userId=${userId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-list-container {
		background-color: #fff;
	}

	.chat-item {
		display: flex;
		align-items: center;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.chat-content {
		flex: 1;
		margin-left: 20rpx;
		overflow: hidden;
	}

	.content-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: 500;
	}

	.last-time {
		font-size: 24rpx;
		color: #999;
	}

	.content-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.last-message {
		font-size: 28rpx;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>