<template>

	<view v-if="loading" class="skeleton-container">
		<!-- 成功提示区域骨架 -->
		<view class="success-section skeleton-success-section">
			<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="order-card skeleton-order-card">
			<view class="order-item" v-for="i in 4" :key="i">
				<view class="skeleton-line skeleton-order-label"></view>
				<view class="skeleton-line skeleton-order-value"></view>
			</view>

			<!-- 查看详情按钮骨架 -->
			<view class="skeleton-line skeleton-view-detail-btn"></view>
		</view>

		<!-- 底部占位 -->
		<view class="bottom-space"></view>

		<!-- 底部按钮区域骨架 -->
		<view class="bottom-buttons skeleton-bottom-buttons">
			<view class="skeleton-line skeleton-continue-btn"></view>
			<view class="skeleton-line skeleton-view-progress-btn"></view>
		</view>
	</view>

	<view v-else class="abnormal-reported-page">
		<!-- 成功提示区域 -->
		<view class="success-section">
			<view class="success-icon">
				<up-icon name="checkmark-circle-fill" size="80" color="#4CD964"></up-icon>
			</view>
			<view class="success-title">异常已上报！</view>
			<view class="success-desc">配送计时已暂停，不影响您的准时率</view>
		</view>

		<!-- 订单信息卡片 -->
		<view class="order-card">
			<view class="order-item">
				<text class="order-label">订单号</text>
				<text class="order-value" style="font-weight: 600;">MT20251017123456</text>
			</view>
			<view class="order-item">
				<text class="order-label">商品信息</text>
				<text class="order-value">共3件商品</text>
			</view>
			<view class="order-item">
				<text class="order-label">配送地址</text>
				<text class="order-value">XX小区3栋502室</text>
			</view>
			<view class="order-item">
				<text class="order-label">用户备注</text>
				<text class="order-value remark-text">请放门口，勿按门铃</text>
			</view>

			<!-- 查看详情按钮 -->
			<view @click="Service.GoPage('/pages/my/abnormalDetail')" class="view-detail-btn">
				<text>查看详情</text>
				<up-icon name="arrow-right" size="20" color="#999"></up-icon>
			</view>
		</view>

		<!-- 底部占位 -->
		<view class="bottom-space"></view>

		<!-- 底部按钮区域 -->
		<view class="bottom-buttons">
			<up-button @click="Service.GoPageTab('/pages/index/task')" type="primary" size="default" class="continue-btn">
				继续接单
			</up-button>
			<up-button @click="Service.GoPage('/pages/my/abnormalDetail')" type="default" size="default" class="view-progress-btn">
				查看异常进度
			</up-button>
		</view>
	</view>
</template>

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

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

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


	// 成功提示区域样式
	.success-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 30rpx;
		background-color: #F6FFFB;
		margin: 20rpx;
	}

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

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

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

	// 订单卡片样式
	.order-card {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 12rpx;
		margin: 0 30rpx;
		box-shadow: 0 0 10rpx 0 #e2e2e2;
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.order-item:last-child {
		margin-bottom: 0;
	}

	.order-label {
		font-size: 28rpx;
		color: #666;
	}

	.order-value {
		font-size: 28rpx;
		color: #333;
		text-align: right;
		flex: 1;
		margin-left: 30rpx;
	}

	.remark-text {
		color: #FF6F00;
	}

	// 查看详情按钮样式
	.view-detail-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		color: #999;
		font-size: 28rpx;
	}

	// 底部占位
	.bottom-space {
		height: 280rpx;
	}

	// 底部按钮区域样式
	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		gap: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
		display: flex;
	}

	.continue-btn {
		border-radius: 50rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		background-color: #007AFF;
		margin-bottom: 20rpx;
	}

	.view-progress-btn {
		border-radius: 50rpx;
		height: 100rpx;
		line-height: 98rpx;
		font-size: 32rpx;
		color: #007AFF;
		border: 1rpx solid #007AFF;
		background-color: #fff;
	}


	// 骨架屏基础样式和动画
	.skeleton-line,
	.skeleton-success-icon,
	.skeleton-loading {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s infinite;
		border-radius: 8rpx;
	}

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

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

	// 骨架屏公共样式
	.skeleton-line {
		background-color: #f0f0f0;
	}

	// 骨架屏容器
	.skeleton-container {
		width: 100%;
	}

	// 成功提示区域骨架样式
	.skeleton-success-section {
		background-color: #f5f5f5;
	}

	.skeleton-success-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
		margin-bottom: 30rpx;
	}

	.skeleton-success-title {
		width: 40%;
		height: 40rpx;
		margin-bottom: 16rpx;
		border-radius: 20rpx;
	}

	.skeleton-success-desc {
		width: 70%;
		height: 30rpx;
		border-radius: 15rpx;
	}

	// 订单卡片骨架样式
	.skeleton-order-card {
		background-color: #f8f8f8;
	}

	.skeleton-order-label {
		width: 20%;
		height: 32rpx;
		border-radius: 16rpx;
	}

	.skeleton-order-value {
		width: 50%;
		height: 32rpx;
		border-radius: 16rpx;
	}

	.skeleton-view-detail-btn {
		width: 25%;
		height: 32rpx;
		border-radius: 16rpx;
		margin-top: 30rpx;
		margin-left: auto;
	}

	// 底部按钮区域骨架样式
	.skeleton-bottom-buttons {
		background-color: #fff;
	}

	.skeleton-continue-btn {
		width: 49%;
		height: 100rpx;
		border-radius: 50rpx;
		margin-bottom: 20rpx;
	}

	.skeleton-view-progress-btn {
		width: 49%;
		height: 100rpx;
		border-radius: 50rpx;
	}
</style>