<template>
	<view class="dynamics-page">
		<view class="dynamics-hd" :style="{ paddingTop: (statusBar + 12) + 'px' }">
			<view class="dynamics-hd-row">
				<view class="dynamics-hd-title-row">
					<text class="dynamics-hd-title">{{ copy.title }}</text>
					<text class="dynamics-hd-tag">{{ copy.titleTag }}</text>
				</view>
				<view class="dynamics-actions">
					<view class="dynamics-action-btn" @tap="onCreate">
						<text class="dynamics-action-icon">＋</text>
					</view>
				</view>
			</view>
		</view>

		<find-feed-list
			ref="feed"
			:scroll-height="listHeight"
			:bottom-inset="listBottomInset"
			:empty-text="copy.emptyFeed"
			:loading-text="copy.loading"
			:no-more-text="copy.noMore"
			:guest-label="copy.guest"
			:load-failed-text="copy.loadFailed"
			:action-failed-text="copy.actionFailed"
			:content-unavailable-text="copy.contentUnavailable"
			:user-profile-dev-text="copy.userProfileDev"
			:bookmark-dev-text="copy.bookmarkDev"
			:live-replay-text="copy.liveReplay"
		/>

		<app-tabbar active="dynamics" />
	</view>
</template>

<script>
import AppTabbar from '@/components/app-tabbar/app-tabbar.vue'
import FindFeedList from '@/components/dynamics/find-feed-list.vue'

const TABBAR_H = 100

export default {
	components: { AppTabbar, FindFeedList },
	data() {
		return {
			statusBar: 0,
			safeBottom: 0,
			windowHeight: 667
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('dynamics.title'),
				titleTag: t('dynamics.titleTag'),
				emptyFeed: t('dynamics.emptyFeed'),
				loading: t('dynamics.loading'),
				noMore: t('dynamics.noMore'),
				guest: t('dynamics.guest'),
				loadFailed: t('dynamics.loadFailed'),
				actionFailed: t('dynamics.actionFailed'),
				contentUnavailable: t('dynamics.contentUnavailable'),
				userProfileDev: t('dynamics.userProfileDev'),
				bookmarkDev: t('dynamics.bookmarkDev'),
				liveReplay: t('dynamics.liveReplay')
			}
		},
		tabbarPad() {
			return uni.upx2px(TABBAR_H)
		},
		headerHeight() {
			// 与 .dynamics-hd 实际占位一致：顶内边距 + 标题行(约72rpx) + 底内边距20rpx
			return this.statusBar + 12 + uni.upx2px(92)
		},
		tabbarTotalHeight() {
			return this.tabbarPad + this.safeBottom
		},
		listHeight() {
			return Math.max(200, this.windowHeight - this.headerHeight - this.tabbarTotalHeight)
		},
		/** 列表内容底部留白，避免最后一项 / footer 贴边被 tabbar 挡住 */
		listBottomInset() {
			return this.tabbarTotalHeight + uni.upx2px(24)
		},
		signedIn() {
			return !!(this.$store && this.$store.state && this.$store.state.user.isLogin)
		}
	},
	onLoad() {
		try {
			const info = uni.getSystemInfoSync()
			this.statusBar = info.statusBarHeight || 0
			this.safeBottom = (info.safeAreaInsets && info.safeAreaInsets.bottom) || 0
			this.windowHeight = info.windowHeight || 667
		} catch (_) {}
	},
	onShow() {
		setTimeout(() => {
			try { uni.hideTabBar({ animation: false }) } catch (_) {}
		}, 0)
		const app = getApp()
		if (app.globalData && app.globalData.dynamicsNeedRefresh) {
			app.globalData.dynamicsNeedRefresh = false
			if (this.$refs.feed && typeof this.$refs.feed.reload === 'function') {
				this.$refs.feed.reload()
			}
		}
	},
	onPullDownRefresh() {
		const feed = this.$refs.feed
		if (feed && typeof feed.pullRefresh === 'function') {
			feed.pullRefresh()
			return
		}
		if (feed && typeof feed.reload === 'function') {
			feed.reload().finally(() => {
				try {
					uni.stopPullDownRefresh()
				} catch (_) {}
			})
			return
		}
		try {
			uni.stopPullDownRefresh()
		} catch (_) {}
	},
	methods: {
		onCreate() {
			if (!this.signedIn) {
				this.$appKit && this.$appKit.to('/pages/passport/lobby')
				return
			}
			uni.navigateTo({ url: '/pages/dynamics/publish' })
		}
	}
}
</script>

<style scoped>
.dynamics-page {
	min-height: 100vh;
	background-color: #eef3fb;
}
.dynamics-hd {
	flex-shrink: 0;
	padding-left: 32rpx;
	padding-right: 32rpx;
	padding-bottom: 20rpx;
}

.dynamics-hd-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.dynamics-hd-title-row {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex: 1;
	min-width: 0;
}

.dynamics-hd-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a1d26;
	line-height: 1.2;
}

.dynamics-hd-tag {
	margin-left: 12rpx;
	font-size: 20rpx;
	font-weight: 600;
	letter-spacing: 2rpx;
	color: #8a8d9e;
}
.dynamics-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.dynamics-action-btn {
	position: relative;
	width: 72rpx;
	height: 72rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	box-shadow: 0 6rpx 20rpx rgba(74, 140, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dynamics-action-icon {
	font-size: 34rpx;
	color: #4a8cff;
}
</style>
