<template>

	<view v-if="loading" class="">
		<view class="tab-bar-skeleton">
			<view class="skeleton-slot skeleton-tab-item"></view>
			<view class="skeleton-slot skeleton-tab-item"></view>
		</view>
		<view class="skeleton-container">
			<view class="skeleton-order-item" v-for="index in 3" :key="'skeleton-' + index">
				<!-- 订单头部骨架 -->
				<view class="skeleton-header">
					<view class="skeleton-slot skeleton-order-number"></view>
					<view class="skeleton-slot skeleton-status-badge"></view>
				</view>

				<!-- 异常类型骨架 -->
				<view class="skeleton-slot skeleton-type"></view>

				<!-- 异常描述骨架 -->
				<view class="skeleton-slot skeleton-description"></view>

				<!-- 底部信息骨架 -->
				<view class="skeleton-footer">
					<view class="skeleton-slot skeleton-time"></view>
					<view class="skeleton-actions">
						<view class="skeleton-slot skeleton-btn"></view>
						<view class="skeleton-slot skeleton-btn"></view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100vw; display: flex; justify-content: center; ">
				<view class="skeleton-slot " style="width: 160rpx; height: 30rpx; "></view>
			</view>
		</view>
	</view>


	<view v-else class="abnormal-orders-page">
		<!-- 选项卡 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
				<text class="tab-text" :class="{ active: activeTab === 0 }">待处理</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
				<text class="tab-text" :class="{ active: activeTab === 1 }">已处理</text>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-item" v-for="(orderItem,orederIndex) in dataList" :key="orederIndex">
				<!-- 订单头部 -->
				<view class="order-header">
					<text class="order-number">订单号: {{ orderItem.orderId}}</text>
					<view class="order-status pending">
						<text class="status-text">{{ orderItem.status===0?'待处理':'已处理' }}</text>
					</view>
				</view>

				<!-- 订单内容 -->
				<view class="">
					<text class="abnormal-type">{{orderItem.type }}</text>
					<text class="abnormal-description">{{ orderItem.remark }}</text>
					<view class="" style="display: flex; align-items: center; justify-content: space-between;">
						<text class="order-time"
							style="font-size: 26rpx; color: #666;">{{ Service.formatDate(orderItem.addTime,1) }}</text>
						<!-- 操作按钮 -->
						<view class="order-actions">
							<text @click="Service.GoPage('/pages/my/abnormalDetail?orderId='+orderItem.orderId)"
								class="action-btn detail-btn">查看详情</text>
						</view>
					</view>
				</view>
			</view>
			<up-loadmore :status="status" />
			<view class="" style="width: 100%; height: 20rpx;" >
				
			</view>
		</view>
	</view>
</template>

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


	let loading = ref(true)
	// 响应式数据
	const activeTab = ref(0);

	let status = ref('nomore')
	let page = ref(1)
	let dataList = ref<Array<any>>([])
	onLoad(() => {
		getData()
	})

	onReachBottom(()=>{
		getList()
	})
	
	const getData = () => {
		dataList.value = []
		page.value = 1
		status.value = 'loadmore'
		getList()
	}

	const getList = () => {
		if (status.value == 'nomore' || status.value == 'loading') {
			return
		}
		status.value == 'loadmore'
		CNRiderOrderService.GetRiderOrderServiceList(activeTab.value, page.value).then(res => {
			loading.value = false
			if (res.data) {
				dataList.value = [...dataList.value, ...res.data.list]
				status.value = res.data.list == 10 ? 'loadmore' : 'nomore'
				page.value++
			}
		})
	}

	// 切换选项卡
	const switchTab = (tab : any) => {
		activeTab.value = tab;
		getData()
	};


	// 重新上报
	const reportAgain = (orderNo : string) => {
		uni.showModal({
			title: '重新上报',
			content: '确定要重新上报此订单异常吗？',
			success: (res) => {
				if (res.confirm) {
					// 模拟重新上报
					uni.showToast({
						title: '已提交重新上报申请',
						icon: 'success'
					});
				}
			}
		});
	};
</script>

<style scoped lang="scss">
	/* 页面基础样式 */
	.abnormal-orders-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏 */
	.nav-bar {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-left,
	.nav-right {
		width: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-center {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}

	/* 选项卡 */
	.tab-bar {
		height: 88rpx;
		display: flex;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 50rpx;
		height: 6rpx;
		background-color: #1890ff;
		border-radius: 3rpx;
	}

	.tab-text {
		font-size: 28rpx;
		color: #666;
	}

	.tab-text.active {
		color: #1890ff;
		font-weight: 500;
	}

	/* 订单列表 */
	.order-list {
		padding: 0 20rpx;
	}

	.order-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	/* 订单头部 */
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.order-number {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.order-status {
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}

	.order-status.pending {
		background-color: #fff2e8;
	}

	.order-status.processed {
		background-color: #f6ffed;
	}

	.status-text {
		font-size: 24rpx;
	}

	.order-status.pending .status-text {
		color: #fa5151;
	}

	.order-status.processed .status-text {
		color: #52c41a;
	}



	.abnormal-type {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		display: block;
		margin-bottom: 12rpx;
	}

	.abnormal-description {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 12rpx;
		line-height: 1.5;
	}

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

	/* 操作按钮 */
	.order-actions {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.action-btn {
		font-size: 26rpx;
		padding: 8rpx 20rpx;
	}

	.detail-btn {
		color: #1890ff;
	}

	.report-btn {
		color: #52c41a;
	}

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

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

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 骨架屏样式 - 纯CSS实现 */
	/* 选项卡骨架屏 */
	.tab-bar-skeleton {
		height: 88rpx;
		display: flex;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 0 40rpx;
	}

	.skeleton-tab-item {
		flex: 1;
		height: 36rpx;
		align-self: center;
		margin: 0 20rpx;
		border-radius: 18rpx;
	}

	/* 订单列表骨架屏 */
	.skeleton-container {
		padding: 0 20rpx;
	}

	/* 订单项骨架 */
	.skeleton-order-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 订单头部布局 */
	.skeleton-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	/* 底部布局 */
	.skeleton-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 操作按钮区域 */
	.skeleton-actions {
		display: flex;
		gap: 20rpx;
	}

	/* 通用骨架占位元素 */
	.skeleton-slot {
		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s infinite ease-in-out;
		border-radius: 8rpx;
	}

	/* 特定元素尺寸 */
	.skeleton-order-number {
		width: 60%;
		height: 36rpx;
	}

	.skeleton-status-badge {
		width: 120rpx;
		height: 40rpx;
		border-radius: 20rpx;
	}

	.skeleton-type {
		width: 30%;
		height: 36rpx;
		margin-bottom: 16rpx;
	}

	.skeleton-description {
		width: 100%;
		height: 32rpx;
		margin-bottom: 16rpx;
	}

	.skeleton-time {
		width: 25%;
		height: 30rpx;
	}

	.skeleton-btn {
		width: 100rpx;
		height: 30rpx;
	}

	/* 骨架屏动画 */
	@keyframes skeleton-loading {
		0% {
			background-position: 200% 0;
		}

		100% {
			background-position: -200% 0;
		}
	}
</style>