<template>
	<view class="project-list-container">
		<!-- 页面标题区域 -->
		<view class="header-section">
			<view class="header-title" style="display: flex; align-items: center; justify-content: space-between;">
				<text class="title">项目列表</text>
				<text class="subtitle">{{ projects.length }}个项目</text>
			</view>
		</view>

		<!-- 项目列表 -->
		<view class="projects-section">
			<view v-if="projects.length === 0" class="empty-state">
				<view class="empty-icon">
					<u-icon name="list" size="64" color="#ddd"></u-icon>
				</view>
				<text class="empty-text">暂无项目</text>
				<text class="empty-desc">点击下方按钮创建第一个项目</text>
			</view>

			<view v-else class="projects-list">
				<view v-for="(project, index) in projects" :key="project.planId" class="project-card"
					@click="viewProjectDetail(project)">
					<view class="project-delete" @click.stop="deleteProject(project, index)">
						<u-icon name="trash" size="18" color="#ff4d4f"></u-icon>
					</view>

					<view class="project-info">
						<view class="project-title-row">
							<text class="project-name">{{ project.name }}</text>
							<view class="project-mode" :class="getModeClass(project.mode)">
								<text class="mode-text">{{ project.mode }}</text>
							</view>
						</view>
						<view class="project-stats">
							<view class="stat-badge">
								<u-icon name="account" size="14" color="#1890ff"></u-icon>
								<text class="badge-text">{{ project.users.length }}位学员</text>
							</view>
						</view>
					</view>

					<view class="project-footer">
						<view class="">

						</view>
						<view class="project-time">
							<u-icon name="clock" size="14" color="#999"></u-icon>
							<text class="time-text">{{ Service.formatDate(project.addTime,1) }}</text>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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


	// 分页相关
	let page = ref(1)
	let status = ref('loadmore')

	// 项目列表数据
	const projects = ref<Array<any>>([])

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

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

	// 获取模式对应的样式类
	const getModeClass = (mode : string) : string => {
		const classMap : Record<string, string> = {
			'计时': 'mode-timing',
			'包干': 'mode-package',
			'分段': 'mode-segment'
		}
		return classMap[mode] || ''
	}

	// 查看项目详情
	const viewProjectDetail = (project : any) => {
		Service.Msg(`查看「${project.name}」详情`)
	}

	// 删除项目
	const deleteProject = (project : any, index : number) => {
		Service.Confirm(`确定要删除「${project.name}」吗？`, () => {
			PlanService.DeletePlan(project.planId).then(res => {
				if (res.code == 0) {
					getData()
					Service.Msg('删除成功')
				} else {
					Service.Msg(res.msg)
				}
			})
		})
	}

	// 获取项目列表数据
	const getData = () => {
		projects.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	}

	// 获取项目列表
	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return
		}
		status.value = 'loading'
		PlanService.GetPlanList( '', page.value.toString()).then(res => {
			if (res.code == 0) {
				projects.value = [...projects.value, ...res.data]
				status.value = res.data.length == 10 ? 'loadmore' : 'nomore'
				page.value++
			} else {
				Service.Msg(res.msg)
			}
		})
	}

	// 添加项目
	const addProject = () => {
		Service.GoPage('/pages/userFunc/setCourse')
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.project-list-container {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 180rpx;
	}

	/* 页面标题区域 */
	.header-section {
		margin-bottom: 24rpx;

		.header-title {
			.title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}

			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 项目列表区域 */
	.projects-section {
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.section-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}

			.section-count {
				font-size: 24rpx;
				color: #999;
				background-color: #f5f5f5;
				padding: 6rpx 16rpx;
				border-radius: 16rpx;
			}
		}

		.empty-state {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 100rpx 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

			.empty-icon {
				margin-bottom: 24rpx;
				opacity: 0.6;
			}

			.empty-text {
				font-size: 30rpx;
				font-weight: 600;
				color: #666;
				margin-bottom: 12rpx;
			}

			.empty-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.projects-list {
		.project-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 28rpx 24rpx;
			margin-bottom: 16rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 6rpx;
				background: linear-gradient(180deg, #1890ff 0%, #096dd9 100%);
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&:active {
				transform: scale(0.98);
				box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.04);

				&::before {
					opacity: 1;
				}
			}

			.project-delete {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4rpx 12rpx rgba(255, 77, 79.3);
				transition: all 0.3s ease;
				z-index: 2;

				&:active {
					transform: scale(0.9);
					background: linear-gradient(135deg, #ffccc7 0%, #ffa39e 100%);
				}
			}

			.project-info {
				padding-right: 80rpx;

				.project-title-row {
					display: flex;
					align-items: center;
					gap: 12rpx;
					margin-bottom: 16rpx;
					flex-wrap: wrap;
				}

				.project-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}

				.project-mode {
					padding: 6rpx 14rpx;
					border-radius: 12rpx;
					font-size: 22rpx;
					font-weight: 600;
					flex-shrink: 0;

					&.mode-timing {
						background-color: #e6f7ff;
						color: #1890ff;
					}

					&.mode-package {
						background-color: #fff7e6;
						color: #faad14;
					}

					&.mode-segment {
						background-color: #f6ffed;
						color: #52c41a;
					}

					.mode-text {
						font-size: 22rpx;
						font-weight: 600;
					}
				}

				.project-stats {
					display: flex;
					gap: 12rpx;
					flex-wrap: wrap;

					.stat-badge {
						display: flex;
						align-items: center;
						gap: 6rpx;
						padding: 8rpx 14rpx;
						background-color: #f5f5f5;
						border-radius: 12rpx;

						&.record-badge {
							background-color: #f6ffed;
						}

						.badge-text {
							font-size: 22rpx;
							color: #666;
							font-weight: 500;
						}
					}
				}
			}

			.project-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;
				padding-top: 16rpx;
				border-top: 1rpx solid #f0f0f0;

				.project-time {
					display: flex;
					align-items: center;
					gap: 6rpx;

					.time-text {
						font-size: 22rpx;
						color: #999;
					}
				}

				.project-arrow {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.04);
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s ease;
				}
			}

			&:active .project-arrow {
				transform: translateX(6rpx);
				background-color: rgba(24, 144, 255, 0.1);
			}
		}
	}

	/* 底部添加按钮 */
	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
		z-index: 100;

		.add-btn {
			width: 100%;
			height: 96rpx;
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			border-radius: 20rpx;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.4);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.97);
				box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
			}

			.btn-text {
				font-size: 32rpx;
				color: #fff;
				font-weight: 700;
			}
		}
	}
</style>