<template>
	<view class="messages-page">
		<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
		<view class="nav">
			<view class="back" @tap="back">‹</view>
			<view class="nav-title">消息</view>
			<view class="ghost"></view>
		</view>
		<view class="head">
			<view class="title">消息</view>
			<view class="sub">这里不是聊天列表，只放未完成的陪伴。</view>
		</view>
		<view class="room-card" v-for="item in requests" :key="item.id" @tap="openRecord(item)">
			<view class="avatar">{{ item.avatar }}</view>
			<view class="main">
				<view class="name">{{ item.name }}</view>
				<view class="desc">{{ item.desc }}</view>
			</view>
			<view class="tag soft" v-if="item.remeet">再遇见</view>
		</view>
		<view class="empty" v-if="!loading && !requests.length">没有未完成的关系，也是一种轻松。</view>
		<view class="empty" v-else>{{ loading ? '正在加载...' : (hasMore ? '上滑加载更多' : '没有更多消息了') }}</view>
	</view>
</template>

<script>
	import { pageIeRecords } from '@/common/ieApi.js'

	export default {
		data() {
			return {
				menuButtonInfo: { top: 44 },
				requests: [],
				pageNumber: 1,
				pageSize: 10,
				hasMore: true,
				loading: false
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.loadRecords()
		},
		onReachBottom() {
			this.loadRecords()
		},
		methods: {
			normalizeRecord(item) {
				const remeet = item.remeetAvailable === 1
				return {
					id: item.id,
					roomId: item.roomId,
					targetUserId: item.targetUserId,
					mode: item.mode || 'i',
					name: item.anonymousName || '半匿名漂流者',
					avatar: item.mode === 'e' ? '光' : '月',
					desc: (item.unreadCount > 0 ? `${item.unreadCount} 条未读 · ` : '') + (remeet ? '可以从聊天记录继续这段对话。' : (item.summary || '这段聊天已保留在记录里。')),
					remeet
				}
			},
			async loadRecords() {
				if (this.loading || !this.hasMore) return
				this.loading = true
				try {
					const page = await pageIeRecords(this.pageNumber, this.pageSize)
					const list = page && page.records ? page.records.map(this.normalizeRecord) : []
					const exists = new Set(this.requests.map(item => item.id))
					this.requests = this.requests.concat(list.filter(item => !exists.has(item.id)))
					this.hasMore = page ? (page.current || this.pageNumber) < (page.pages || this.pageNumber) : false
					this.pageNumber += 1
				} finally {
					this.loading = false
				}
			},
			back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) },
			openRecord(item) {
				if (!item || !item.roomId) return
				uni.navigateTo({
					url: '/package1/ieBrowser/chat?mode=' + item.mode +
						'&roomId=' + item.roomId +
						'&targetUserId=' + (item.targetUserId || '') +
						'&name=' + encodeURIComponent(item.name || '半匿名漂流者') +
						'&avatar=' + encodeURIComponent(item.avatar || '◌') +
						'&quote=' + encodeURIComponent(item.desc || '')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #f7f9ff; }
	.messages-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 18% 8%, rgba(169,255,231,.42), transparent 280rpx), linear-gradient(180deg, #fbfdff, #eef4ff); }
	.nav { height: 90rpx; display: flex; align-items: center; }
	.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21,26,45,.55); }
	.nav-title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; }
	.head { padding-top: 10rpx; }
	.title { font-size: 52rpx; font-weight: 800; }
	.sub { margin-top: 12rpx; color: rgba(21,26,45,.5); font-size: 25rpx; }
	.room-card { display: flex; align-items: center; margin-top: 26rpx; padding: 28rpx; border-radius: 36rpx; background: rgba(255,255,255,.64); border: 1rpx solid rgba(255,255,255,.86); box-shadow: 0 22rpx 60rpx rgba(96,112,160,.12); }
	.room-card.active { background: rgba(17,22,42,.92); color: #fff; }
	.pulse, .avatar { width: 78rpx; height: 78rpx; margin-right: 20rpx; border-radius: 50%; text-align: center; line-height: 78rpx; background: #a9ffe7; color: #11162a; font-weight: 800; }
	.pulse { animation: breath 2.4s ease-in-out infinite; }
	.main { flex: 1; }
	.name { font-size: 29rpx; font-weight: 800; }
	.desc { margin-top: 8rpx; color: rgba(21,26,45,.52); font-size: 23rpx; line-height: 36rpx; }
	.active .desc { color: rgba(255,255,255,.58); }
	.tag { padding: 8rpx 16rpx; border-radius: 999rpx; color: #11162a; background: #a9ffe7; font-size: 20rpx; }
	.tag.soft { color: #7771d8; background: rgba(119,113,216,.1); }
	.empty { margin-top: 42rpx; text-align: center; color: rgba(21,26,45,.36); font-size: 23rpx; }
	@keyframes breath { 0%, 100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }
</style>
