<template>
	<view class="container">
		<view class="status_bar"></view>
		<!-- 顶部标题栏 固定 -->
		<view class="top-bar">
			<uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false"
				@clickLeft="narBack" />
		</view>

		<!-- 滚动区域：从banner开始滚动 -->
		<scroll-view class="scroll-container" scroll-y="true" @scrolltolower="loadMoreData"
			:lower-threshold="100">
			<!-- 顶部图片 -->
			<view class="topImg">
				<image src="http://47.104.199.163:9090/images/home/banner.png"
					style="width: 100%;height:100%;"></image>
			</view>

			<!-- 选项卡 -->
			<view class="tabs-container">
				<view class="tab-item" :class="{ 'active': activeTab === 'list' }" @tap="switchTab('list')">
					活动列表
					<view v-if="activeTab === 'list'" class="tab-indicator"></view>
				</view>
				<view class="tab-item" :class="{ 'active': activeTab === 'my' }" @tap="switchTab('my')">
					我的活动
					<view v-if="activeTab === 'my'" class="tab-indicator"></view>
				</view>
			</view>

			<!-- 我的活动状态筛选 -->
			<view v-if="activeTab === 'my'" class="filter-container">
				<scroll-view class="filter-scroll" scroll-x>
					<view class="filter-buttons">
						<view v-for="filter in filters" :key="filter.value" class="filter-btn"
							:class="{ 'active': myFilter === filter.value }" @tap="switchFilter(filter.value)">
							{{ filter.label }}
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 活动列表 -->
			<view class="activity-list">
				<!-- 空状态 -->
				<view v-if="displayedActivities.length === 0" class="empty-state">
					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
					<text class="empty-text">
						{{ activeTab === 'list' ? '暂无活动' : '暂无参与的活动' }}
					</text>
				</view>

				<!-- 活动卡片 -->
				<view v-for="activity in displayedActivities" :key="activity.id" class="activity-card"
					@tap="viewActivityDetail(activity)">
					<view class="status-badge">
						{{activity.statusText}}
					</view>

					<view v-if="activity.applied && activeTab === 'list'" class="signed-badge">
						<uni-icons type="checkbox-filled" size="14" color="#fff"></uni-icons>
						<text>已报名</text>
					</view>

					<view class="activity-info">
						<view class="u-demo-block__content ">
							<up-row justify="space-between" customStyle="margin-bottom: 10px">
								<up-col span="4">
									<view class="info-image-left">
										<image :src="activity.coverImage"
											style="width: 100%;height: 100%;"></image>
									</view>
								</up-col>
								<up-col span="8">
									<view class="demo-layout bg-purple">
										<view class="activity-title">
											{{ activity.title }}
										</view>
										<view class="activity-detail">
											<text class="detail-text">时间：{{ formatDate(activity.startTime) }} 至
												{{ formatDate(activity.endTime) }}</text>
										</view>

										<view class="activity-detail">
											<text class="detail-text">地点：{{ activity.address }}</text>
										</view>

										<view class="activity-detail">
											<text class="detail-text-num">活动名额{{ activity.quota }}人，已报名{{ activity.appliedCount }}人</text>
										</view>
									</view>
								</up-col>
							</up-row>
						</view>

						<view class="action-buttons">
							<button v-if="activeTab === 'list' && !activity.hasSigned" class="action-btn signup-btn"
								@tap.stop="signupActivity(activity)">
								立即报名
							</button>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view v-if="hasMoreData && displayedActivities.length > 0" class="load-more-container">
					<view v-if="!isLoading" class="load-more-btn" @tap="loadMoreData">
						<text>加载更多</text>
						<uni-icons type="arrow-down" size="16" color="#007AFF"></uni-icons>
					</view>
					<view v-else class="loading-container">
						<uni-icons type="spinner-cycle" size="20" color="#007AFF" class="loading-icon"></uni-icons>
						<text>正在加载...</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch
	} from 'vue'
	import moment from 'moment';
	import{getActivityList} from '../api/api.js'

	// 响应式数据
	const activeTab = ref('list') // 'list' 或 'my'
	const myFilter = ref('reviewing') // 我的活动筛选条件
	const isLoading = ref(false)
	const hasMoreData = ref(true)
	const currentPage = ref(1)
	const pageSize = 5
	const total = ref(0)
	// 当前显示的活动列表
	const displayedActivities = ref([])

	// 筛选条件
	const filters = ref([{
			label: '审核中',
			value: 'reviewing'
		},
		{
			label: '已通过',
			value: 'passed'
		},
		{
			label: '未通过',
			value: 'rejected'
		},
		{
			label: '已结束',
			value: 'ended'
		}
	])

	// 模拟活动数据
	const allActivities = ref([])

	// 计算属性：根据当前标签和筛选条件过滤活动
	const filteredActivities = computed(() => {
		if (activeTab.value === 'list') {
			// 活动列表页：显示所有活动
			return allActivities.value
		} else {
			// 我的活动页：根据筛选条件过滤
			if (myFilter.value === 'all') {
				return allActivities.value.filter(activity => activity.hasSigned)
			} else {
				return allActivities.value.filter(activity =>
					activity.hasSigned && activity.myStatus === myFilter.value
				)
			}
		}
	})

	// 返回
	const narBack = () => {
		if (uni.getStorageSync('sourcePage') === "index") {
			uni.switchTab({
				url: "/pages/index/index"
			})
		} else if (uni.getStorageSync('sourcePage') === "serviceIndex") {
			uni.switchTab({
				url: "/pages/serviceIndex/serviceIndex"
			})
		}
	}
	// 切换选项卡
	const switchTab = (tab) => {
		activeTab.value = tab
		resetAndLoad()
	}

	// 切换筛选条件
	const switchFilter = (filter) => {
		myFilter.value = filter
		resetAndLoad()
	}
		// 重置并刷新第一页
		const resetAndLoad = () => {
			currentPage.value = 1
			displayedActivities.value = []
			hasMoreData.value = true
			getActivityListData(1)
		}
	
	// 获取小区列表接口
	const getActivityListData = async (pageNum = 1) => {
			if (isLoading.value) return
			isLoading.value = true
	
			try {
				const params = {
					pageNum: pageNum,
					pageSize: pageSize
				}
				const res = await getActivityList(params)
	
				if (res.code === 200) {
					const list = res.rows || []
					total.value = res.total || 0
					// 第一页 → 覆盖；下一页 → 追加
					if (pageNum === 1) {
						displayedActivities.value = list
					} else {
						displayedActivities.value = [...displayedActivities.value, ...list]
					}
	
					// 是否还有更多数据
					hasMoreData.value = displayedActivities.value.length < total.value
					currentPage.value = pageNum
				} else {
					uni.showToast({ title: res.msg || "加载失败", icon: 'error' })
					if (pageNum === 1) displayedActivities.value = []
				}
			} catch (err) {
				uni.showToast({ title: "网络异常", icon: 'error' })
				if (pageNum === 1) displayedActivities.value = []
			} finally {
				isLoading.value = false
			}
		}

	// 加载更多数据
	const loadMoreData = () => {
		if (isLoading.value || !hasMoreData.value) return
		getActivityListData(currentPage.value + 1)
	}

	// 获取活动状态类名
	const getStatusClass = (status) => {
		const classMap = {
			'ongoing': 'status-ongoing',
		}
		return classMap[status] || ''
	}

	// 获取我的活动状态文本
	const getMyStatusText = (status) => {
		const statusMap = {
			'reviewing': '审核中',
			'passed': '已通过',
			'rejected': '未通过',
			'ended': '已结束'
		}
		return statusMap[status] || '未知'
	}

	// 获取我的活动状态类名
	const getMyStatusClass = (status) => {
		const classMap = {
			'reviewing': 'my-status-reviewing',
			'passed': 'my-status-passed',
			'rejected': 'my-status-rejected',
			'ended': 'my-status-ended'
		}
		return classMap[status] || ''
	}

	// 格式化日期
	function formatDate(date) {
		return moment(date).format('YYYY-MM-DD HH:mm:ss')
	}

	// 报名活动
	const signupActivity = (activity) => {
		uni.navigateTo({
			url: `/pageSubPack/activity-list/activityListDetails?id=${activity.id}&title=${activity.title}`
		})
	}

	// 查看活动详情
	// const viewActivityDetail = (activity) => {
	// 	uni.navigateTo({
	// 		url: `/pages/activityDetail/activityDetail?id=${activity.id}`,
	// 		fail: () => {
	// 			// 如果页面不存在，显示活动信息
	// 			uni.showModal({
	// 				title: activity.title,
	// 				content: `${activity.description}\n\n时间：${formatDate(activity.startTime)} 至 ${formatDate(activity.endTime)}\n地点：${activity.location}\n名额：${activity.totalQuota}人，已报名：${activity.signedCount}人`,
	// 				showCancel: false,
	// 				confirmText: '知道了'
	// 			})
	// 		}
	// 	})
	// }

	// 联系管理员
	const contactAdmin = (activity) => {
		uni.showModal({
			title: '联系管理员',
			content: `您报名"${activity.title}"未通过审核，是否联系管理员了解原因？`,
			success: (res) => {
				if (res.confirm) {
					uni.makePhoneCall({
						phoneNumber: '400-123-4567'
					})
				}
			}
		})
	}

	// 监听筛选条件变化
	watch(() => myFilter.value, () => {
		if (activeTab.value === 'my') {
			currentPage.value = 1
			displayedActivities.value = []
			getActivityListData(1)
		}
	})

	// 初始化
	onMounted(() => {
		getActivityListData(1)
	})
</script>

<style>
	/* 页面容器 */
	.container {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.status_bar {
		height: 46px;
		width: 100%;
	}

	/* 顶部标题 固定 */
	.top-bar {
		width: 100%;
		flex-shrink: 0;
		background: #fff;
	}

	/* 滚动区域 */
	.scroll-container {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.topImg {
		width: 100%;
		height: 280rpx;
		margin: 20rpx 0;
	}

	/* 顶部选项卡 */
	.tabs-container {
		display: flex;
		top: 0;
		z-index: 10;
		margin-bottom: 20rpx
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #007AFF;
		font-weight: 500;
	}

	.tab-indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 6rpx;
		background-color: #007AFF;
		border-radius: 4rpx;
	}

	/* 筛选容器 */
	.filter-container {
		background-color: #fff;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.filter-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.filter-buttons {
		display: inline-flex;
		padding: 0 30rpx;
	}

	.filter-btn {
		display: inline-block;
		padding: 12rpx 30rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #666;
		background-color: #f8f8f8;
		border-radius: 25rpx;
		border: 1px solid #eee;
	}

	.filter-btn.active {
		color: #fff;
		background-color: #2F77FD;
	}

	/* 活动列表 */
	.activity-list {
		width: 100%;
		padding-bottom: 40rpx;
	}

	/* 活动卡片 */
	.activity-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		position: relative;
		border: 1px solid #e1e1e1;
	}

	/* 活动状态标签 */
	.status-badge {
		position: absolute;
		top: 10rpx;
		left: 20rpx;
		padding: 6rpx 20rpx;
		font-size: 22rpx;
		border-radius: 15rpx 0rpx 15rpx 0rpx;
		color: #fff;
		z-index: 1;
		background: repeating-linear-gradient(to right, #FD7373, #FB3F3F);
	}

	/* 已报名标识 */
	.signed-badge {
		position: absolute;
		top: 20rpx;
		right: 8rpx;
		display: flex;
		align-items: center;
		padding: 6rpx 14rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 22rpx;
		border-radius: 20rpx;
		z-index: 1;
	}

	.signed-badge text {
		margin-left: 8rpx;
	}

	/* 活动信息 */
	.activity-info {
		margin-top: 10rpx;
	}

	.info-image-left {
		width: 170rpx;
		height: 220rpx;
	}

	.activity-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #222;
		margin-bottom: 30rpx;
		line-height: 1.4;
		padding-right: 100rpx;
	}

	.activity-detail {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
		color: #999;
		font-size: 24rpx;
		line-height: 1.4;
	}

	.activity-detail .uni-icons {
		margin-right: 15rpx;
		margin-top: 4rpx;
		flex-shrink: 0;
	}

	.detail-text-num {
		font-size: 28rpx;
		color: #666666;
	}

	.detail-text {
		flex: 1;
	}

	/* 操作按钮 */
	.action-buttons {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-end;
	}

	.action-btn {
		padding: 0 40rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		border-radius: 35rpx;
		margin: 0;
	}

	.signup-btn {
		background-color: #007AFF;
		color: #fff;
	}

	.signup-btn:active {
		background-color: #0056cc;
	}

	/* 加载更多 */
	.load-more-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		color: #999;
	}

	.load-more-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		background-color: #f8f8f8;
		border-radius: 50rpx;
		color: #007AFF;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.load-more-btn text {
		margin-right: 10rpx;
	}

	.loading-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 40rpx;
		background-color: #f8f8f8;
		border-radius: 50rpx;
		color: #007AFF;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.loading-icon {
		margin-right: 10rpx;
		animation: rotate 1s linear infinite;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
</style>