<template>
	<!-- 骨架屏 -->
	<view v-if="loading" class="task-list-container skeleton-loading">
		<!-- 顶部标签栏 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item">
				<view class="skeleton-tab-text"></view>
			</view>
		</view>
		<view class="" style="width: 100vw; height: 120rpx"> </view>

		<!-- 骨架屏订单列表 -->
		<view class="order-list">
			<!-- 骨架屏任务卡片 1 -->
			<view  v-for="item in 3" class="task-section skeleton-card">
				<view class=""  style="display: flex; align-items: center; justify-content: space-between;" >
					<view class="skeleton-tag"></view>
					<view class="skeleton-time-group">
						<view class="icon-placeholder"></view>
						<view class="skeleton-time-text"></view>
					</view>
				</view>
				<view class="skeleton-merchant-info">
					<view class="skeleton-merchant-name"></view>
					<view class="skeleton-distance"></view>
				</view>
				<view class="skeleton-address-info">
					<view class="icon-placeholder"></view>
					<view class="skeleton-address-text"></view>
				</view>
				<view class="skeleton-price-time-row">
					<view class="skeleton-price"></view>
					<view class="skeleton-time-group">
						<view class="icon-placeholder"></view>
						<view class="skeleton-time-text"></view>
					</view>
				</view>
				<view class="skeleton-button"></view>
			</view>
		</view>
		<view class=""   style="width: 100vw;  display: flex; justify-content: center; margin-top: 20rpx; " >
			<view class="" style="width: 200rpx; height: 40rpx;  background-color: #fff; border-radius: 4rpx; " >
				
			</view>
		</view>
		
		
	</view>


	<view v-else class="task-list-container"  style="padding-top: 60rpx;" >
		<!-- 顶部标签栏 -->
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
				@click="switchTab(index)">
				<text class="tab-text">{{ tab }}</text>
				<view v-if="activeTab === index" class="active-line"></view>
			</view>
		</view>
		<view class="" style="width: 100vw; height: 120rpx; ">

		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view @click="gopage()" v-for="(orderItem,orderIndex) in 3 " :key="orderIndex" class="task-section">
				<!-- 高价单标签 -->
				<view class="" style="display: flex; align-items: center; justify-content: space-between;">
					<view v-if="activeTab==0" class="high-price-tag"  style="border-radius: 8rpx;" >
						<image :src="Service.GetIconImg('/static/index/task/fire.png')"  style="width: 24rpx;  height: 24rpx;" mode=""></image>
						<text class="high-price-text" style="margin-left: 4rpx;" >高价单</text>
					</view>
					<view v-else class="high-price-tag"   :style="{'border':activeTab==1?'1rpx solid #52C41A':'1rpx solid #FAAD14','color':activeTab==1?'#52C41A':'#FAAD14' }"  style="background-color: #fff;" >
						<text class="high-price-text">{{activeTab==1?'待取单':'配送中'}}</text>
					</view>
					<view class="" v-if="activeTab!==0" style="display: flex; align-items: baseline;">
						<up-icon name="phone" color="var(--nav-mian)" size="20"></up-icon>
						<text style="margin-left: 10rpx;  color: var(--nav-mian); ">拨打商家</text>
					</view>
				</view>

				<!-- 商家信息 -->
				<view class="merchant-info">
					<text class="merchant-name">老北京炸酱面</text>
					<text class="distance">500m</text>
				</view>

				<!-- 地址信息 -->
				<view class="address-info">
					<up-icon name="map" color="#999" size="24rpx" />
					<text class="address-text">北京市朝阳区三里屯SOHO</text>
					<text v-if="activeTab!==0" class="address-text">共3件商品</text>
				</view>
				<!-- 商品次数-->
				<view v-if="activeTab==1" class="address-info">
					<text class="address-text">共3件商品</text>
				</view>

				<!-- 价格和取餐时间 -->
				<view class="price-time-row">
					<view v-if="activeTab==0" class="">
						<text class="price">¥5.50</text>
						<text style="color: var(--nav-mian); font-weight: 600; margin-left: 10rpx; ">/单</text>
					</view>
					<view v-if="activeTab==1" class="">
						<text style="font-size: 30rpx; font-weight: 600; color: #1890FF; ">取件码: </text>
						<text style="color: var(--nav-mian); font-weight: 600; margin-left: 10rpx; ">A121</text>
					</view>
					<view v-if="activeTab==2" class="">
						<text class="address-text">据您1.2km</text>
					</view>
					<view class="pickup-time">
						<up-icon name="clock" color="#FF9500" size="24rpx" />
						<text class="time-text"  :style="{'color':activeTab==0?'#FAAD14':'#FF0000'}" >{{activeTab==0?'12:30 前取餐':'12:30 前送达'}}</text>
					</view>
				</view>

				<!-- 立即抢单按钮 -->
				<up-button type="primary" @click="buttonClick()"  :color="activeTab==0?'#1890FF':(activeTab==1?'#52C41A':'#52C41A')"  size="large" class="grab-btn">{{ activeTab==0?'立即抢单':(activeTab==1?'我已取餐':'确认送达') }}</up-button>
			</view>

			<!-- 没有更多任务提示 -->
			<up-loadmore :status="status" />
			<view class="" style="width: 100vw; height: 60rpx; " ></view>
		</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)
	// 标签数据
	const tabs = ['新任务', '待取货', '配送中']
	const activeTab = ref(0)
	let status = ref('nomore')



	onLoad(() => {
		setTimeout(() => {
			loading.value = false
		}, 1000)
	})

	// 页面跳转
	const gopage = () => {
		if (activeTab.value == 0) {
			Service.GoPage('/pages/order/grabOrder')
		} else {
			Service.GoPage('/pages/order/orderDetail')
		}
	}
	
	
	const buttonClick=()=>{
		
		if(activeTab.value==2){
			Service.GoPage('/pages/order/finish')
		}
	}

	// 切换标签
	const switchTab = (index : number) => {
		activeTab.value = index
	}
</script>

<style scoped>
	page {
		background-color: #F5F5F5;
	}

	/* 顶部标签栏 */
	.tab-bar {
		display: flex;
		background-color: #FFFFFF;
		padding: 20rpx 0 0;
		border-bottom: 1rpx solid #E5E5E5;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		background-color: #fff;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
		position: relative;
	}

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

	.tab-item.active .tab-text {
		color: var(--nav-mian);
		font-weight: 600;
	}

	.active-line {
		position: absolute;
		bottom: 0;
		width: 110rpx;
		height: 6rpx;
		background-color: var(--nav-mian);
		border-radius: 3rpx;
	}

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

	.task-section {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}


	/* 标签样式 */
	.high-price-tag {
		width: fit-content;
		background-color: #FF7875;
		color: #FFFFFF;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.status-tag {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		z-index: 10;
	}

	.status-tag.pending {
		background-color: #4CD964;
		color: #FFFFFF;
	}

	.status-tag.delivering {
		background-color: #FF9500;
		color: #FFFFFF;
	}

	/* 右侧操作按钮 */
	.right-action {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.call-btn {
		padding: 5rpx 15rpx;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	/* 信息展示 */
	.merchant-info {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.merchant-name {
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
	}

	.distance {
		font-size: 28rpx;
		color: #666666;
	}

	.address-info {
		display: flex;
		align-items: baseline;
		margin-top: 15rpx;
	}

	.address-text {
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #666666;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 价格和时间 */
	.price-time-row {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		font-size: 36rpx;
		font-weight: 600;
		color: #FF3B30;
	}

	.pickup-code {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.pickup-time {
		display: flex;
		align-items: center;
	}

	.time-text {
		margin-left: 8rpx;
		font-size: 26rpx;
	}

	/* 按钮样式 */
	.grab-btn {
		margin-top: 25rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}

	.grab-btn {
		background-color: #007AFF;
	}

	/* 没有更多任务 */
	.no-more-tasks {
		margin-top: 40rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.no-more-text {
		font-size: 28rpx;
		color: #999999;
	}

	/* 骨架屏样式 */
	.skeleton-loading .skeleton-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.skeleton-tab-text {
		width: 80rpx;
		height: 30rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
	}

	.skeleton-tag {
		width: 100rpx;
		height: 30rpx;
		background-color: #f0f0f0;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}

	.skeleton-merchant-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.skeleton-merchant-name {
		width: 200rpx;
		height: 34rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
	}

	.skeleton-distance {
		width: 60rpx;
		height: 28rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
	}

	.skeleton-address-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.icon-placeholder {
		width: 24rpx;
		height: 24rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}

	.skeleton-address-text {
		width: 400rpx;
		height: 28rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
	}

	.skeleton-price-time-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.skeleton-price {
		width: 80rpx;
		height: 36rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
	}

	.skeleton-time-group {
		display: flex;
		align-items: center;
	}

	.skeleton-time-text {
		width: 150rpx;
		height: 26rpx;
		background-color: #f0f0f0;
		border-radius: 4rpx;
	}

	.skeleton-button {
		width: 100%;
		height: 80rpx;
		background-color: #f0f0f0;
		border-radius: 40rpx;
	}

	/* 骨架屏动画 */
	.skeleton-card .skeleton-tag::after,
	.skeleton-card .skeleton-merchant-name::after,
	.skeleton-card .skeleton-distance::after,
	.skeleton-card .skeleton-address-text::after,
	.skeleton-card .icon-placeholder::after,
	.skeleton-card .skeleton-price::after,
	.skeleton-card .skeleton-time-text::after,
	.skeleton-card .skeleton-button::after,
	.skeleton-loading .skeleton-tab-text::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		animation: shimmer 1.5s infinite;
	}

	@keyframes shimmer {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}
</style>