<template>
	
	<!-- 顶部导航栏 -->
	<uni-nav-bar
		left-icon="left"
		title="消息"
		@clickLeft="goBack"
		fixed
		color="#8B2316" 
		height="140rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	></uni-nav-bar>
	<view class="msg-page">
		

		<!-- 四宫格入口 -->
		<view class="shortcut-grid">
			<view class="grid-item" @click="goBenefit">
				<view class="icon-wrap gift">
					<uni-icons type="gift" size="34" color="#fff"></uni-icons>
				</view>
				<text class="label">福利</text>
			</view>
			<view class="grid-item" @click="goOrder">
				<view class="icon-wrap order">
					<uni-icons type="list" size="34" color="#fff"></uni-icons>
				</view>
				<text class="label">订单</text>
			</view>
			<view class="grid-item" @click="goFollow">
				<view class="icon-wrap visit">
					<uni-icons type="heart" size="34" color="#fff"></uni-icons>
					<view class="badge" v-if="followBadge > 0">{{ followBadge }}</view>
				</view>
				<text class="label">随访</text>
			</view>
			<view class="grid-item" @click="goReply">
				<view class="icon-wrap reply">
					<uni-icons type="chatbubble" size="34" color="#fff"></uni-icons>
				</view>
				<text class="label">回复我的</text>
			</view>
		</view>

		<!-- 消息列表 -->
		<scroll-view 
			class="msg-list" 
			scroll-y="true" 
			:show-scrollbar="false"
			refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore"
			lower-threshold="80"
		>
			<view class="group" v-for="(group, gIdx) in msgGroups" :key="gIdx">
				<view class="group-time">{{ group.time }}</view>
				<view class="card" v-for="(msg, idx) in group.items" :key="idx">
					<view class="card-title">系统消息</view>
					<view class="card-content">{{ msg }}</view>
				</view>
			</view>
			<!-- 加载更多提示 -->
			<view v-if="loading" class="loading-more">
				<text class="loading-text">加载中...</text>
			</view>
			<!-- 没有更多数据提示 -->
			<view v-if="noMore" class="no-more">
				<text class="no-more-text">没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const followBadge = ref(5);

	const msgGroups = ref([
		{
			time: '2022-04-22 16:32:54',
			items: ['恭喜您，您的肝胆积分又增加了，快去查看吧']
		},
		{
			time: '2022-04-20 13:33:23',
			items: ['恭喜您，您的肝胆积分又增加了，快去查看吧']
		},
		{
			time: '2022-04-15 13:36:23',
			items: ['恭喜您，您的肝胆积分又增加了，快去查看吧']
		}
	]);

	// 刷新/加载状态
	const refreshing = ref(false);
	const loading = ref(false);
	const noMore = ref(false);
	const page = ref(1);
	const pageSize = ref(10);

	// 模拟更多数据（请在接入接口后替换）
	const mockMore = [
		{ time: '2022-04-10 09:20:11', items: ['系统保养完成，服务更稳定～'] },
		{ time: '2022-04-05 18:06:42', items: ['积分到账提醒，请注意查收。'] },
		{ time: '2022-03-30 08:15:00', items: ['本周学术会议日程已发布。'] },
		{ time: '2022-03-25 10:05:16', items: ['您有新的随访任务待处理。'] }
	];

	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};

	const goBenefit = () => uni.showToast({ title: '福利', icon: 'none' });
	const goOrder = () => uni.showToast({ title: '订单', icon: 'none' });
	const goFollow = () => uni.showToast({ title: '随访', icon: 'none' });
	const goReply = () => uni.showToast({ title: '回复我的', icon: 'none' });

	// 下拉刷新
	const onRefresh = async () => {
		if (refreshing.value) return;
		refreshing.value = true;
		try {
			await new Promise(r => setTimeout(r, 800));
			page.value = 1;
			noMore.value = false;
			msgGroups.value.unshift({
				time: new Date().toISOString().slice(0, 19).replace('T', ' '),
				items: ['您有一条新的系统通知，欢迎查看。']
			});
		} finally {
			refreshing.value = false;
		}
	};

	// 上拉加载
	const onLoadMore = async () => {
		if (loading.value || noMore.value) return;
		loading.value = true;
		try {
			await new Promise(r => setTimeout(r, 800));
			const start = (page.value - 1) * 2;
			const chunk = mockMore.slice(start, start + 2);
			if (chunk.length === 0) {
				noMore.value = true;
			} else {
				msgGroups.value.push(...chunk);
				page.value += 1;
			}
		} finally {
			loading.value = false;
		}
	};
</script>

<style lang="scss" scoped>
	$bg: #f5f6f7;
	$text-primary: #333;
	$text-secondary: #666;
	$muted: #999;
	$divider: #eeeeee;
	$theme: #8B2316;
	$nav-h: 140rpx; // 与 uni-nav-bar 保持一致
	$grid-h: 200rpx; // 四宫格区域高度

	@mixin flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.msg-page {
		min-height: 100vh;
		background: $bg;
		padding-top: $nav-h; // 与导航栏高度一致
	}

	.shortcut-grid {
		position: fixed;
		top: $nav-h;
		left: 0;
		right: 0;
		z-index: 9;
		height: $grid-h;
		background: #fff;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		padding: 30rpx 20rpx 10rpx;
		column-gap: 10rpx;
		row-gap: 10rpx;
		border-bottom: 1rpx solid $divider;

		.grid-item {
			@include flex-center;
			flex-direction: column;
			gap: 12rpx;

			.icon-wrap {
				position: relative;
				width: 92rpx;
				height: 92rpx;
				border-radius: 20rpx;
				@include flex-center;
				&.gift { background: linear-gradient(180deg, #ff6680, #ff4d6a); }
				&.order { background: linear-gradient(180deg, #ffcc66, #ffb300); }
				&.visit { background: linear-gradient(180deg, #4dd0e1, #2ec4b6); }
				&.reply { background: linear-gradient(180deg, #6edc82, #2ecc71); }

				.badge {
					position: absolute;
					right: -6rpx;
					top: -6rpx;
					min-width: 32rpx;
					height: 32rpx;
					border-radius: 50rpx;
					background: #ff3b30;
					color: #fff;
					font-size: 22rpx;
					@include flex-center;
					padding: 0 6rpx;
				}
			}

			.label {
				font-size: 26rpx;
				color: $text-secondary;
			}
		}
	}

	.msg-list {
		position: fixed;
		// 减去导航与宫格的高度
		top: 360rpx; // 让列表起始位置在宫格下方
		padding: 20rpx 24rpx 40rpx;
		box-sizing: border-box;
	     bottom: 0rpx;
		// 加载状态样式
		.loading-more, .no-more {
			@include flex-center;
			padding: 28rpx 0;
			.loading-text, .no-more-text {
				font-size: 26rpx;
				color: $muted;
			}
		}
		
		.group {
			.group-time {
				text-align: center;
				color: $muted;
				font-size: 24rpx;
				margin: 26rpx 0 16rpx;
			}

			.card {
				background: #fff;
				border-radius: 16rpx;
				padding: 26rpx;
				box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
				margin-bottom: 26rpx;

				.card-title {
					font-size: 30rpx;
					color: $text-primary;
					font-weight: 600;
					margin-bottom: 14rpx;
				}

				.card-content {
					font-size: 28rpx;
					color: $text-secondary;
					line-height: 1.6;
				}
			}
		}
	}
</style>
