<template>
	<view class="home-container">
		<!-- 项目列表区域 -->
		<view v-if="projects.length > 0" class="projects-section">
			<!-- 计时器模块 -->
			<view class="timer-card">
				<view class="timer-header">
					<text class="timer-title">计时模块</text>
					<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
						<text class="task-count">1个任务</text>
					</view>
				</view>

				<view @click="Service.GoPage('/pages/userFunc/swiming')" class="timer-content">
					<view class="timer-circle">
						<view class="circle-progress">
							<view class="progress-ring">
								<view class="ring-inner">
									<u-icon name="clock" size="32" color="#1890ff"></u-icon>
								</view>
							</view>
						</view>
					</view>

					<view class="timer-info">
						<text class="timer-name">自由泳500米</text>
						<text class="timer-time">00:00''00</text>
					</view>

				</view>
			</view>
			
			
			<!-- 计时器模块 -->
			<view class="timer-card">
				<view class="timer-header">
					<text class="timer-title">分段模式</text>
					<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
						<text class="task-count">1个任务</text>
					</view>
				</view>
			
				<view @click="Service.GoPage('/pages/userFunc/segmentation')" class="timer-content">
					<view class="timer-circle">
						<view class="circle-progress">
							<view class="progress-ring">
								<view class="ring-inner">
									<u-icon name="clock" size="32" color="#1890ff"></u-icon>
								</view>
							</view>
						</view>
					</view>
			
					<view class="timer-info">
						<text class="timer-name">自由泳500米</text>
						<text class="timer-time">00:00''00</text>
					</view>
			
					
				</view>
			</view>
			
			<!-- 计时器模块 -->
			<view class="timer-card">
				<view class="timer-header">
					<text class="timer-title">包干模式</text>
					<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
						<text class="task-count">1个任务</text>
					</view>
				</view>
			
				<view @click="Service.GoPage('/pages/userFunc/project')" class="timer-content">
					<view class="timer-circle">
						<view class="circle-progress">
							<view class="progress-ring">
								<view class="ring-inner">
									<u-icon name="clock" size="32" color="#1890ff"></u-icon>
								</view>
							</view>
						</view>
					</view>
			
					<view class="timer-info">
						<text class="timer-name">自由泳500米</text>
						<text class="timer-time">00:00''00</text>
					</view>
			
				</view>
			</view>
			
		</view>

		<!-- 空状态 -->
		<view v-else class="empty-state-container">
			<!-- 主卡片 -->
			<view class="main-card" style="position: relative">
				<!-- 顶部计时器图标 -->
				<view  class="timer-icon"
					style="position: absolute; top: -20rpx; right: -20rpx">
					<u-icon name="clock" bold="true" size="24" color="#666"></u-icon>
				</view>
				<!-- 游泳图标 -->
				<view class="swim-icon">
					<img :src="Service.GetIconImg('/static/index/swiming.png')" style="width: 100rpx; height: 100rpx"
						alt="" />
				</view>
			</view>

			<!-- 提示文字 -->
			<view class="message-section">
				<text class="title">暂无项目</text>
				<text class="subtitle"> 您的计时列表目前是空的。点击下方按钮，开始您的第一次游泳训练记录吧。 </text>
			</view>

			<!-- 添加项目按钮 -->
			<view class="action-section">
				<button class="add-project-btn" @click="addProject">
					<u-icon name="plus" size="24" color="#fff"></u-icon>
					<text class="btn-text">添加项目</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, onUnmounted } from 'vue'
	import { Service } from '@/Service/Service'

	// 模拟项目数据
	const projects = ref([{}])

	

	// 计时器状态
	const isTimerRunning = ref(true)
	const timerSeconds = ref(784) // 13分04秒
	let timerInterval : number | null = null


	// 添加项目
	const addProject = () => {
		// 这里可以添加导航到项目设置页面的逻辑
		uni.navigateTo({
			url: '/pages/userFunc/setCourse',
		})
	}

	// 生命周期
	onMounted(() => {
		
	})

	onUnmounted(() => {
		if (timerInterval) {
			clearInterval(timerInterval)
		}
	})
</script>

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

	.home-container {
		padding: 20rpx;
	}

	/* 项目列表区域 */
	.projects-section {
		padding: 20rpx 0;
	}

	/* 计时器卡片 */
	.timer-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.timer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.timer-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}

		.task-count {
			font-size: 24rpx;
			color: #666;
		}
	}

	.timer-content {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.timer-circle {
		position: relative;
	}

	.circle-progress {
		width: 120rpx;
		height: 120rpx;
		position: relative;
	}

	.progress-ring {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: conic-gradient(#1890ff 0deg, #e6f7ff 0deg);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ring-inner {
		width: 90rpx;
		height: 90rpx;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.timer-info {
		flex: 1;
	}

	.timer-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.timer-time {
		font-size: 40rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.timer-status {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.status-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.status-dot.running {
		background-color: #52c41a;
	}

	.status-dot.paused {
		background-color: #faad14;
	}

	.status-dot.waiting {
		background-color: #999;
	}

	.status-text {
		font-size: 22rpx;
		color: #666;
	}

	.timer-control {
		padding-left: 20rpx;
	}

	/* 日常习惯区域 */
	.routine-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.routine-title {
		font-size: 20rpx;
		color: #999;
		margin-bottom: 10rpx;
		display: block;
	}

	.habit-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 5rpx;
		display: block;
	}

	.habit-count {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 30rpx;
		display: block;
	}

	.habit-list {
		space-y: 20rpx;
	}

	.habit-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.habit-item:last-child {
		border-bottom: none;
	}

	.habit-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.habit-info {
		flex: 1;
	}

	.habit-name {
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 5rpx;
		display: block;
	}

	.habit-time {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
	}

	.habit-control {
		padding-right: 20rpx;
	}

	.habit-status {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}



	/* 空状态 */
	.empty-state-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 40rpx;
		position: relative;
	}

	/* 顶部计时器图标 */
	.timer-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 10;
	}

	/* 主卡片 */
	.main-card {
		width: 320rpx;
		height: 320rpx;
		background-color: #fff;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 60rpx;
		position: relative;
	}

	/* 提示文字 */
	.message-section {
		text-align: center;
		margin-bottom: 80rpx;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.subtitle {
			font-size: 26rpx;
			color: #666;
			line-height: 1.5;
			padding: 0 20rpx;
		}
	}

	/* 添加项目按钮 */
	.action-section {
		width: 100%;
		max-width: 600rpx;

		.add-project-btn {
			width: 100%;
			height: 88rpx;
			background-color: #1890ff;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			border-radius: 12rpx;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);

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