<template>
	<view class="container">
		<view class="toolbar flex-row-sb">
			<view class="summary">共 {{ total }} 条通知</view>
			<button class="btn-apple btn-secondary mark-all" :disabled="unreadCount === 0" @tap="markAllRead">
				全部已读
			</button>
		</view>

		<view v-if="notifications.length === 0 && !loading" class="empty-state">
			<image src="/static/tips.png" mode="aspectFit" class="empty-icon" />
			<view class="empty-title">暂无通知</view>
			<view class="empty-desc">当前没有可查看的业务通知</view>
		</view>

		<view v-else class="notification-list">
			<view v-for="item in notifications" :key="item.id" class="card notification-card"
				:class="{ unread: !item.is_read }" @tap="markItemRead(item)">
				<view class="notification-header flex-row-sb">
					<view class="notification-title">{{ item.title || '业务通知' }}</view>
					<view v-if="!item.is_read" class="unread-dot"></view>
				</view>
				<view class="notification-body">{{ item.body || '-' }}</view>
				<view class="notification-footer flex-row-sb">
					<view class="notification-meta">{{ getCategoryText(item.category) }} · {{ getSeverityText(item.severity) }}</view>
					<view class="notification-time">{{ formatDate(item.created_at) }}</view>
				</view>
			</view>
		</view>

		<view v-if="notifications.length > 0" class="load-more" @tap="loadMore">
			<text v-if="loading">加载中...</text>
			<text v-else-if="noMore">没有更多了</text>
			<text v-else>点击加载更多</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { notificationApi } from '@/api/index.js';

	const pageSize = 20;
	const notifications = reactive([]);
	const page = ref(1);
	const total = ref(0);
	const unreadCount = ref(0);
	const loading = ref(false);
	const noMore = ref(false);

	const formatDate = (value) => {
		if (!value) return '-';
		return value.replace('T', ' ').slice(0, 16);
	};

	const getCategoryText = (category) => ({
		approval: '审批',
		expiry: '临期',
		sync: '同步',
		system: '系统'
	}[category] || '通知');

	const getSeverityText = (severity) => ({
		info: '提示',
		warning: '警告',
		error: '错误',
		critical: '严重'
	}[severity] || '提示');

	const loadUnreadCount = async () => {
		try {
			const data = await notificationApi.getUnreadCount();
			unreadCount.value = Number(data?.count || 0);
		} catch (error) {
			console.error('加载通知未读数失败', error);
		}
	};

	const loadNotifications = async (append = false) => {
		if (loading.value || (append && noMore.value)) return;
		loading.value = true;
		try {
			const data = await notificationApi.getList(page.value, pageSize);
			const items = data?.items || [];
			if (append) {
				notifications.push(...items);
			} else {
				notifications.splice(0, notifications.length, ...items);
			}
			total.value = Number(data?.total || 0);
			noMore.value = notifications.length >= total.value || items.length < pageSize;
			if (!noMore.value) page.value += 1;
		} catch (error) {
			console.error('加载通知列表失败', error);
		} finally {
			loading.value = false;
		}
	};

	const markItemRead = async (item) => {
		if (item.is_read) return;
		try {
			await notificationApi.markRead(item.id);
			item.is_read = true;
			item.read_at = new Date().toISOString();
			unreadCount.value = Math.max(unreadCount.value - 1, 0);
		} catch (error) {
			console.error('标记通知已读失败', error);
		}
	};

	const markAllRead = async () => {
		if (!unreadCount.value) return;
		try {
			await notificationApi.markAllRead();
			notifications.forEach(item => {
				item.is_read = true;
				item.read_at = item.read_at || new Date().toISOString();
			});
			unreadCount.value = 0;
			uni.showToast({ title: '已全部标记为已读', icon: 'success' });
		} catch (error) {
			console.error('全部标记通知已读失败', error);
		}
	};

	const loadMore = () => {
		if (!noMore.value) loadNotifications(true);
	};

	onMounted(() => {
		loadNotifications();
		loadUnreadCount();
	});

	onShow(() => {
		loadUnreadCount();
	});
</script>

<style lang="scss" scoped>
	.container { padding-bottom: 40rpx; }
	.toolbar { margin-bottom: var(--space-md); }
	.summary { color: var(--text-tertiary); font-size: 24rpx; }
	.mark-all { margin: 0; padding: 0 24rpx; height: 64rpx; line-height: 64rpx; font-size: 24rpx; }
	.notification-card { margin-bottom: var(--space-md); border-left: 6rpx solid transparent; }
	.notification-card.unread { border-left-color: var(--primary); }
	.notification-header { margin-bottom: var(--space-sm); }
	.notification-title { color: var(--text-primary); font-size: 30rpx; font-weight: 600; flex: 1; }
	.unread-dot { width: 14rpx; height: 14rpx; margin-left: 16rpx; border-radius: 50%; background: var(--primary); }
	.notification-body { color: var(--text-secondary); font-size: 26rpx; line-height: 1.6; white-space: pre-wrap; }
	.notification-footer { margin-top: var(--space-md); }
	.notification-meta, .notification-time { color: var(--text-tertiary); font-size: 22rpx; }
	.empty-state { display: flex; flex-direction: column; align-items: center; padding: 140rpx 40rpx; }
	.empty-icon { width: 100rpx; height: 100rpx; opacity: 0.6; margin-bottom: 24rpx; }
	.empty-title { color: var(--text-primary); font-size: 30rpx; font-weight: 600; }
	.empty-desc { color: var(--text-tertiary); font-size: 24rpx; margin-top: 12rpx; }
	.load-more { padding: var(--space-lg); color: var(--text-tertiary); text-align: center; font-size: 24rpx; }
</style>
