<template>
	<view class="space-page">
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="nav-title">{{ ownerName }}的空间</view>
		</view>

		<view class="owner-card">
			<image class="owner-avatar-img" v-if="ownerAvatarUrl" :src="ownerAvatarUrl" mode="aspectFill"></image>
			<view class="owner-avatar" v-else>{{ ownerAvatarText }}</view>
			<view class="owner-name">{{ ownerName }}</view>
			<view class="owner-mode">{{ ownerMode === 'e' ? 'e 人 · 轻轻热闹' : 'i 人 · 安静陪伴' }}</view>
		</view>

		<view class="moment-empty" v-if="!moments.length && !loading">TA 还没有发过动态</view>
		<view class="moment-card" v-for="item in moments" :key="item.id">
			<view class="moment-time">{{ momentTime(item.createTime) }}</view>
			<view class="moment-text" v-if="item.content">{{ item.content }}</view>
			<view class="moment-grid" v-if="item.imageList && item.imageList.length" :class="'g' + item.imageList.length">
				<image v-for="(img, idx) in item.imageList" :key="idx" :src="img" mode="aspectFill" @tap="previewImages(item, idx)"></image>
			</view>
			<view class="moment-video" v-if="item.videoUrl" @tap="playVideo(item)">
				<image class="moment-video-poster" v-if="item.videoPoster" :src="item.videoPoster" mode="aspectFill"></image>
				<view class="moment-video-holder" v-else></view>
				<view class="moment-play">▶</view>
			</view>
		</view>
		<view class="load-line" v-if="loading">加载中...</view>
		<view class="load-line" v-else-if="!hasMore && moments.length">没有更多动态了</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				menuButtonInfo: { top: 44 },
				userId: null,
				roomId: '',
				ownerName: 'TA',
				ownerAvatarText: 'TA',
				ownerAvatarUrl: '',
				ownerMode: 'i',
				moments: [],
				page: 1,
				hasMore: true,
				loading: false
			}
		},
		onLoad(options = {}) {
			if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.userId = options.userId || null
			this.roomId = options.roomId || ''
			if (options.name) this.ownerName = decodeURIComponent(options.name)
			if (options.avatar) this.ownerAvatarText = decodeURIComponent(options.avatar)
			if (options.avatarUrl) this.ownerAvatarUrl = decodeURIComponent(options.avatarUrl)
			if (options.mode) this.ownerMode = options.mode
			this.loadMoments(true)
		},
		onReachBottom() {
			this.loadMoments(false)
		},
		methods: {
			back() {
				uni.navigateBack({ fail: () => uni.redirectTo({ url: '/package1/ieBrowser/index' }) })
			},
			async loadMoments(reset) {
				if (this.loading) return
				if (!reset && !this.hasMore) return
				if (!this.userId) return
				this.loading = true
				try {
					const result = await pageIeMoments(this.userId, reset ? 1 : this.page, 10, this.roomId)
					const records = (result && result.records) || []
					this.moments = reset ? records : this.moments.concat(records)
					this.hasMore = records.length >= 10
					this.page = (reset ? 1 : this.page) + 1
					const first = records.find(item => item.anonymousName)
					if (first) {
						this.ownerName = first.anonymousName || this.ownerName
						this.ownerAvatarText = first.avatarText || this.ownerAvatarText
						this.ownerAvatarUrl = first.avatarUrl || this.ownerAvatarUrl
						this.ownerMode = first.currentMode || this.ownerMode
					}
				} finally {
					this.loading = false
				}
			},
			momentTime(timeStr) {
				if (!timeStr) return ''
				const time = new Date(String(timeStr).replace(/-/g, '/')).getTime()
				if (!time) return ''
				const diff = Date.now() - time
				if (diff < 60000) return '刚刚'
				if (diff < 3600000) return Math.floor(diff / 60000) + ' 分钟前'
				if (diff < 86400000) return Math.floor(diff / 3600000) + ' 小时前'
				if (diff < 172800000) return '昨天'
				const d = new Date(time)
				return (d.getMonth() + 1) + '月' + d.getDate() + '日'
			},
			previewImages(item, index) {
				uni.previewImage({ urls: item.imageList || [], current: item.imageList[index] })
			},
			playVideo(item) {
				if (!item.videoUrl) return
				uni.navigateTo({ url: '/package1/ieBrowser/videoPreview?url=' + encodeURIComponent(item.videoUrl) })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #f7f9ff; }
	.space-page { min-height: 100vh; padding: 0 32rpx 80rpx; box-sizing: border-box; color: #161b2e; background: radial-gradient(circle at 50% 8%, rgba(169,255,231,.36), transparent 320rpx), linear-gradient(180deg, #fbfdff, #eef4ff 62%, #fff4e8); }
	.nav { display: flex; align-items: center; padding-bottom: 16rpx; }
	.back { width: 64rpx; height: 64rpx; line-height: 58rpx; text-align: center; border-radius: 50%; background: rgba(255,255,255,.7); font-size: 44rpx; color: rgba(22,27,46,.66); box-shadow: 0 10rpx 26rpx rgba(96,112,160,.12); }
	.nav-title { margin-left: 20rpx; font-size: 32rpx; font-weight: 800; }
	.owner-card { margin-top: 10rpx; padding: 34rpx; text-align: center; border-radius: 36rpx; background: rgba(255,255,255,.66); border: 1rpx solid rgba(255,255,255,.8); box-shadow: 0 20rpx 60rpx rgba(96,112,160,.12); }
	.owner-avatar, .owner-avatar-img { width: 120rpx; height: 120rpx; margin: 0 auto; border-radius: 50%; }
	.owner-avatar { line-height: 120rpx; text-align: center; background: linear-gradient(145deg, #effffb, #a9ffe7); font-size: 40rpx; font-weight: 800; color: #11162a; }
	.owner-name { margin-top: 18rpx; font-size: 34rpx; font-weight: 800; }
	.owner-mode { margin-top: 8rpx; color: #6c69d8; font-size: 23rpx; }
	.moment-empty { margin-top: 60rpx; text-align: center; color: rgba(22,27,46,.4); font-size: 25rpx; }
	.moment-card { margin-top: 24rpx; padding: 26rpx; border-radius: 28rpx; background: rgba(255,255,255,.85); border: 1rpx solid rgba(255,255,255,.9); box-shadow: 0 12rpx 32rpx rgba(96,112,160,.08); }
	.moment-time { color: rgba(22,27,46,.42); font-size: 21rpx; }
	.moment-text { margin-top: 14rpx; font-size: 27rpx; line-height: 42rpx; word-break: break-all; }
	.moment-grid { display: flex; flex-wrap: wrap; margin-top: 16rpx; }
	.moment-grid image { width: 196rpx; height: 196rpx; margin: 0 10rpx 10rpx 0; border-radius: 16rpx; background: rgba(22,27,46,.05); }
	.moment-grid.g1 image { width: 400rpx; height: 400rpx; border-radius: 22rpx; }
	.moment-grid.g2 image { width: 300rpx; height: 300rpx; }
	.moment-video { position: relative; margin-top: 16rpx; width: 440rpx; height: 290rpx; border-radius: 22rpx; overflow: hidden; background: #1a2034; }
	.moment-video-poster, .moment-video-holder { width: 100%; height: 100%; }
	.moment-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84rpx; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.45); font-size: 32rpx; }
	.load-line { margin-top: 26rpx; text-align: center; color: rgba(22,27,46,.36); font-size: 22rpx; }
</style>
