<template>
	<view class="notice-list-page">
		<view class="notice-list-section">
			<view v-if="topAnnoun.length>0" class="section-wrap">
				<view class="section-header">
					<view class="section-title-wrap">
						<view class="section-dot"></view>
						<text class="section-title">置顶公告</text>
					</view>
				</view>

				<view class="notice-list">
					<view v-for="(item, index) in topAnnoun" :key="index" class="notice-card" @click="goToNoticeDetail(item)">
						<view class="notice-image-wrapper">
							<image :src="Service.GetMateUrlByImg(item.img)" class="notice-image" mode="aspectFill"></image>
							<view class="notice-tag">置顶</view>
						</view>
						<view class="notice-info">
							<text class="notice-title">{{ item.title }}</text>
							<text class="notice-subtitle">{{ item.fubiaoti }}</text>
							<view class="notice-meta">
								<text class="notice-time">{{ Service.formatDate(item.addTime, 1) }}</text>
							</view>
						</view>
						
					</view>
				</view>
			</view>

			<view class="section-wrap">
				<view class="section-header">
					<view class="section-title-wrap">
						<view class="section-dot"></view>
						<text class="section-title">公告列表</text>
					</view>
				</view>

				<view v-if="noticeList.length > 0" class="notice-list">
					<view v-for="(item, index) in noticeList" :key="index" class="notice-card" @click="goToNoticeDetail(item)">
						<view class="notice-image-wrapper">
							<image :src="Service.GetMateUrlByImg(item.img)" class="notice-image" mode="aspectFill"></image>
						</view>
						<view class="notice-info">
							<text class="notice-title">{{ item.title }}</text>
							<text class="notice-subtitle">{{ item.fubiaoti }}</text>
							<view class="notice-meta">
								<text class="notice-time">{{ Service.formatDate(item.addTime, 1) }}</text>
							</view>
						</view>
					</view>
				</view>

				<view v-else class="empty-state">
					<image :src="Service.GetpayImg('/static/userFunc/null.png')" class="empty-image"></image>
					<text class="empty-text">暂无公告</text>
				</view>
			</view>

			<view class="load-more" v-if="noticeList.length > 0">
				<up-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { Service } from '@/Service/Service';
	import { AnnouncementService } from "@/Service/api/AnnouncementService"

	let noticeList = ref<any[]>([]);
	let topAnnoun = ref<Array<any>>([])
	let page = ref(1)
	let status = ref('nomore')

	onLoad(() => {
		getData();
	});

	onShow(() => {

	});
	onReachBottom(() => {
		getList()
	})

	const getData = () => {
		noticeList.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	};

	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
		AnnouncementService.GetAnnouncementList(page.value).then(res => {
			if (res.code == 0) {
				if (page.value == 1) {
					topAnnoun.value = res.data.topAnnoun
				}

				noticeList.value = [...noticeList.value, ...res.data.list]
				status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	const goToNoticeDetail = (item: any) => {
		Service.GoPage('/pages/userFunc/notice?id=' + item.announcementId)
	};
</script>

<style scoped lang="scss">
	.notice-list-page {
		min-height: 100vh;
		padding-bottom: 40rpx;
		background: #F8F9FA;
	}

	/* ===== 列表区域 ===== */
	.notice-list-section {
		padding: 30rpx 30rpx 0;
	}

	.section-wrap {
		margin-bottom: 30rpx;
	}

	.section-header {
		padding: 0 0 24rpx;
	}

	.section-title-wrap {
		display: flex;
		align-items: center;
		gap: 14rpx;
	}

	.section-dot {
		width: 8rpx;
		height: 32rpx;
		border-radius: 4rpx;
		background: linear-gradient(180deg, var(--nav-mian), var(--nav-vice));
		flex-shrink: 0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 700;
		color: #1F2937;
	}

	/* ===== 公告卡片 ===== */
	.notice-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.notice-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 24rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
		transition: all 0.2s ease;
	}

	.notice-card:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
	}

	.notice-image-wrapper {
		width: 160rpx;
		height: 160rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
		background: linear-gradient(135deg, rgba(255, 106, 0, 0.06), rgba(255, 127, 0, 0.04));
	}

	.notice-image {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

	.notice-tag {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 18rpx;
		font-weight: 700;
		color: #fff;
		background: linear-gradient(135deg, #FF6A00, #FF4500);
		padding: 6rpx 16rpx;
		border-radius: 10rpx 0 20rpx 0;
		line-height: 1.2;
		z-index: 1;
		letter-spacing: 1rpx;
	}

	.notice-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: 6rpx 0;
	}

	.notice-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #1F2937;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 1.4;
		margin-bottom: 8rpx;
	}

	.notice-subtitle {
		font-size: 24rpx;
		color: #9CA3AF;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 1.4;
		margin-bottom: 12rpx;
	}

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

	.notice-time {
		font-size: 22rpx;
		color: #C0C4CC;
	}

	/* ===== 空状态 ===== */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120rpx 20rpx;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 24rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #C0C4CC;
		font-weight: 500;
	}

	/* ===== 加载更多 ===== */
	.load-more {
		margin-top: 20rpx;
	}
</style>
