<template>

	<view v-if="loading" class="skeleton-container">
		<!-- 骨架屏 - 订单成功区域 -->
		<view class="skeleton-card">
			<view class="skeleton-success-icon"></view>
			<view class="skeleton-line skeleton-success-title"></view>
			<view class="skeleton-line skeleton-success-desc"></view>
		</view>

		<!-- 骨架屏 - 订单详情卡片 -->
		<view class="skeleton-card">
			<view class="skeleton-line skeleton-order-id"></view>
			<view class="skeleton-line skeleton-order-item"></view>
			<view class="skeleton-line skeleton-order-item"></view>
			<view class="skeleton-line skeleton-order-item"></view>
			<view class="skeleton-product-image"></view>
		</view>

		<!-- 骨架屏 - 收入详情卡片 -->
		<view class="skeleton-card">
			<view class="skeleton-line skeleton-section-title"></view>
			<view class="skeleton-income-item">
				<view class="skeleton-line skeleton-income-label"></view>
				<view class="skeleton-line skeleton-income-amount"></view>
			</view>
			<view class="skeleton-income-item">
				<view class="skeleton-line skeleton-income-label"></view>
				<view class="skeleton-line skeleton-income-amount"></view>
			</view>
			<view class="skeleton-divider"></view>
			<view class="skeleton-income-item">
				<view class="skeleton-line skeleton-income-label"></view>
				<view class="skeleton-line skeleton-income-total"></view>
			</view>
		</view>

		<!-- 骨架屏 - 底部按钮 -->
		<view class="skeleton-buttons">
			<view class="skeleton-button skeleton-button-outline"></view>
			<view class="skeleton-button skeleton-button-filled"></view>
		</view>
	</view>

	<view  v-else class="order-complete-page">
		<!-- 订单成功区域 -->
		<view class="success-card">
			<view class="success-icon">
				<up-icon name="checkmark-circle" size="60" color="#07C160" />
			</view>
			<view class="success-title">订单已送达！</view>
			<view class="success-desc">感谢您的服务，本次配送费¥5.50已入账</view>
		</view>

		<!-- 订单详情卡片 -->
		<view class="order-detail-card">
			<view class="order-info-item">
				<text class="label">订单号：</text>
				<text class="value">MT20251017123456</text>
			</view>
			<view class="order-info-item">
				<text>共3件商品</text>
			</view>
			<view class="order-info-item">
				<text>XX小区3栋502室</text>
			</view>
			<view class="order-info-item">
				<text class="highlight-text">请放门口，勿按门铃</text>
			</view>

			<!-- 商品图片占位 -->
			<view class="product-image-placeholder"></view>
		</view>

		<!-- 收入详情卡片 -->
		<view class="income-detail-card">
			<view class="section-title">本单收入</view>
			<view class="income-item">
				<text class="label">配送费</text>
				<text class="amount positive">+¥5.50</text>
			</view>
			<view class="income-item">
				<text class="label">冲单奖</text>
				<text class="amount bonus">+¥3.00</text>
			</view>
			<view class="divider"></view>
			<view class="income-item total">
				<text class="label">总收入</text>
				<text class="amount total-amount">¥8.50</text>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="bottom-buttons">
			<up-button class="view-income-btn" shape="circle" type="default"
				@click="Service.GoPageTab('/pages/index/income')">
				查看收入
			</up-button>
			<up-button class="continue-btn" shape="circle" type="primary"
				@click="Service.GoPageTab('/pages/index/task')">
				继续接单
			</up-button>
		</view>
	</view>
</template>

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

	let loading = ref(true)

	// 页面加载时的逻辑
	onLoad(() => {
		setTimeout(() => {
			loading.value = false;
		}, 1500);
	})
</script>

<style lang="scss">
	.order-complete-page {
		overflow: hidden;
		padding-bottom: 40rpx;

		// 导航栏样式
		.nav-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 30rpx;
			background-color: #fff;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.nav-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
		}

		// 成功卡片样式
		.success-card {
			margin: 30rpx;
			padding: 60rpx 30rpx;
			background-color: #f0f9ff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.success-icon {
				margin-bottom: 20rpx;
			}

			.success-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 10rpx;
			}

			.success-desc {
				font-size: 28rpx;
				color: #666;
			}
		}

		// 订单详情卡片样式
		.order-detail-card {
			margin: 0 30rpx 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			.order-info-item {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #333;

				.label {
					color: #666;
				}

				.value {
					color: #333;
				}

				.highlight-text {
					color: #ff6b35;
				}
			}

			// 商品图片占位
			.product-image-placeholder {
				width: 200rpx;
				height: 200rpx;
				border: 2rpx solid #333;
				background-color: #fff;
				margin-top: 20rpx;
				border-radius: 8rpx;
			}
		}

		// 收入详情卡片样式
		.income-detail-card {
			margin: 0 30rpx 40rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

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

			.income-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				font-size: 28rpx;

				.label {
					color: #666;
				}

				.amount {
					font-weight: 600;

					&.positive {
						color: #07C160;
					}

					&.bonus {
						color: #f79009;
					}

					&.total-amount {
						color: #ff3b30;
						font-size: 34rpx;
					}
				}

				&.total {
					margin-top: 10rpx;
				}
			}

			.divider {
				height: 1rpx;
				background-color: #e0e0e0;
				margin: 10rpx 0;
			}
		}

		// 底部按钮样式
		.bottom-buttons {
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			width: 100vw;
			display: flex;
			padding: 20rpx 30rpx;
			gap: 30rpx;

			.view-income-btn,
			.continue-btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 45rpx;
			}

			.view-income-btn {
				border: 2rpx solid #007aff;
				color: #007aff;
				background-color: #fff;
			}

			.continue-btn {
				background-color: #007aff;
				color: #fff;
			}
		}
	}

	// 骨架屏基础样式
	.skeleton-loading {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s infinite;
	}

	@keyframes skeleton-loading {
		0% {
			background-position: 200% 0;
		}

		100% {
			background-position: -200% 0;
		}
	}

	// 骨架屏容器样式
	.skeleton-container {
	}

	// 骨架屏卡片样式
	.skeleton-card {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	// 骨架屏线条通用样式
	.skeleton-line {
		height: 32rpx;
		background-color: #f0f0f0;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		
	}

	// 成功区域骨架
	.skeleton-success-icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #f0f0f0;
		border-radius: 50%;
		margin: 0 auto 30rpx;
		
	}

	.skeleton-success-title {
		width: 50%;
		height: 40rpx;
		margin: 0 auto 20rpx;
	}

	.skeleton-success-desc {
		width: 80%;
		height: 32rpx;
		margin: 0 auto;
	}

	// 订单详情骨架
	.skeleton-order-id {
		width: 100%;
	}

	.skeleton-order-item {
		width: 70%;
	}

	.skeleton-product-image {
		width: 200rpx;
		height: 200rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		margin-top: 20rpx;
		
	}

	// 收入详情骨架
	.skeleton-section-title {
		width: 40%;
		height: 36rpx;
		margin-bottom: 30rpx;
	}

	.skeleton-income-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.skeleton-income-label {
		width: 30%;
		margin-bottom: 0;
	}

	.skeleton-income-amount {
		width: 25%;
		margin-bottom: 0;
	}

	.skeleton-income-total {
		width: 25%;
		margin-bottom: 0;
		height: 36rpx;
	}

	.skeleton-divider {
		height: 1rpx;
		background-color: #e0e0e0;
		margin: 20rpx 0;
	}

	// 按钮骨架
	.skeleton-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100vw;
		display: flex;
		padding: 20rpx 30rpx;
		gap: 30rpx;
	}

	.skeleton-button {
		flex: 1;
		height: 80rpx;
		border-radius: 45rpx;
	}

	.skeleton-button-outline {
		background-color: #f0f0f0;
	}

	.skeleton-button-filled {
		background-color: #f0f0f0;
	}
</style>