<template>
	<view class="tab-menu">
		<view v-for="(tab, index) in tabs" :key="tab.name" class="tab-item" :class="{ active: currentIndex === index }"
			@click="switchTab(index)">
			{{ tab.name }}
		</view>
	</view>
	<uni-notice-bar show-icon scrollable text="今日放假" />
	<view class="content">
		<template v-if="currentIndex === 0">
			<view class="order-card" v-for="(item,index) in errandOrder" :key="index">
				<view class="delivery-info">
					<view class="time-id">#{{item.id}}</view>
					<view class="price">￥1.7</view>
				</view>
				<view class="delivery-info">
					<view class="time">{{formatDate(item.pickupEndTime)}}内送达</view>
				</view>
				
				<view class="address-info">
					<view class="address-item">
						<view class="circle">取</view>
						<view class="distance">1km</view>
						<view class="address-name">{{item.address}}·{{item.businessVO?.businessName}}</view>
					</view>
					<view class="address-item">
						<view class="circle">送</view>
						<view class="distance">1.5km</view>
						<view class="address-name">{{item.location}}</view>
					</view>
				</view>
				<view class="button-container">
					<view class="order-button" @click="plunder(item.id)">抢单</view>
				</view>
			</view>
		</template>
		<template v-if="currentIndex === 1">
			<view class="order-card" v-for="(item,index) in errandOrder" :key="index" @click.stop="orderDetail(item)">
				<view class="delivery-info">
					<view class="time-id">#{{item.id}}</view>
					<view class="price">￥1.7</view>
				</view>
				<view class="delivery-info">
					<view class="time">{{formatDate(item.pickupEndTime)}}内送达</view>
				</view>
				<view class="address-info">
					<view class="address-item">
						<view class="circle">取</view>
						<view class="distance">1km</view>
						<view class="address-name">{{item.address}}·{{item.businessVO?.businessName}}</view>
					</view>
					<view class="address-item">
						<view class="circle">送</view>
						<view class="distance">1.5km</view>
						<view class="address-name">{{item.location}}</view>
					</view>
				</view>
				<view class="button-container" @click.stop="obtain(item.id)">
					<view class="order-button">确认取货</view>
				</view>
			</view>
		</template>
		<template v-if="currentIndex === 2">
			<view class="order-card" v-for="(item,index) in errandOrder" :key="index" @click.stop="deliveryDetail(item)">
				<view class="delivery-info">
					<view class="time-id">#{{item.id}}</view>
					<view class="price">￥1.7</view>
				</view>
				<view class="delivery-info">
					<view class="time">{{formatDate(item.pickupEndTime)}}内送达</view>
					
				</view>
				<view class="address-info">
					<view class="address-item">
						<view class="circle">取</view>
						<view class="distance">1km</view>
						<view class="address-name">{{item.address}}·{{item.businessVO?.businessName}}</view>
					</view>
					<view class="address-item">
						<view class="circle">送</view>
						<view class="distance">1.5km</view>
						<view class="address-name">{{item.location}}</view>
					</view>
				</view>
				<view class="button-container">
					<view class="order-button">确认送达</view>
				</view>
			</view>
		</template>
	</view>
	<view class="fixed-buttons">
		<view class="button-container" @click="toggle('bottom')">
			<uni-icons type="gear-filled" size="24"></uni-icons>
			<text class="fixed-font">跑单设置</text>
		</view>
		<view class="button-container" @click="map">
			<uni-icons type="location-filled" size="24"></uni-icons>
			<text class="fixed-font">配送范围</text>
		</view>
		<button @click="refreshOrders" class="refresh-button">刷新订单</button>
	</view>

	<!-- 通弹窗 -->
	<uni-popup ref="popupRef" background-color="#fff" @change="change">
		<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
			<view class="modal-header">
				<button class="tab-button" :class="{ active: activeTab === 0 }" @click="switchTabs(0)">跑单设置</button>
				<button class="tab-button" :class="{ active: activeTab === 1 }" @click="switchTabs(1)">运单排序</button>
			</view>
			<view class="modal-body">
				<view v-if="activeTab === 0">
					<view class="modal-item">
					  <text class="modal-label">配送区域</text>
					  <!-- 使用 currentUser 的 distributionScope 来设置 picker 的默认值 -->
					  <picker :value="array.indexOf(radius.value)" :range="array" @change="bindPickerChange" class="modal-value">
					    <view>{{ radius.value || '修改配送区域' }}</view> <!-- 如果没有设置则显示提示 -->
					  </picker>
					</view>
					<view class="modal-item">
						<text class="modal-label">同时接单量</text>
						<text class="modal-value">15个</text>
					</view>
				</view>
				<view v-if="activeTab === 1">
					<view class="modal-item">
						<text class="modal-label">智能排序</text>
						<view class="modal-value">
							<text>未设置</text>
							<text class="arrow">&gt;</text>
						</view>
					</view>
					<view class="modal-list">
						<view class="item" @click="handleClick(item)" v-for="(item, index) in items" :key="index"
							:class="{ selected: selectedItem === item }">
							{{ item }}
						</view>
					</view>

					<view class="modal-item">
						<text class="modal-label">置顶</text>
						<view class="modal-value">
							<switch color="#FFCC33" style="transform:scale(0.7)" />
						</view>
					</view>
					<text class="tips">关闭之后，订单将按默认顺序排序</text>
					<view class="modal-list">
						<view class="item" @click="handleClick(item)" v-for="(item, index) in tipsItems" :key="index"
							:class="{ selected: selectedItem === item }">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		apiImageUrl
	} from '../../API/api';
	import {
		onShow
	} from "@dcloudio/uni-app";
	
	const radius=ref(uni.getStorageSync("currentUser.distributionScope"))

	const currentIndex = ref(0);
	const tabs = [{
			name: '待抢单'
		},
		{
			name: '待取货'
		},
		{
			name: '待送达'
		}
	];

// 修改选项卡切换逻辑
const switchTab = (index) => {
  currentIndex.value = index;
  // 根据文档状态映射关系：0-待抢单对应errandState=1，1-待取货对应errandState=2，2-待送达对应errandState=3
  const stateMap = [1, 2, 3];
  if (index >= 0 && index < stateMap.length) {
    robOrder(stateMap[index]);
  }
};

	const switchTabs = (index) => {
		activeTab.value = index;
	};
	// 定义响应式变量
	const type = ref('center');
	const activeTab = ref(0); // 默认激活第一个标签页
	const selectedItem = ref(null);

	// 弹窗引用
	const popupRef = ref(null);

	// 数据源
	const array = ref(['1公寓', '2公寓', '3公寓', '4公寓', '5公寓', '6公寓', '7公寓', '8公寓', '9公寓', '10公寓', '11公寓', '12公寓','育才大厦']);
	const index = ref(0);
	const items = ref([
		'考核时间从多到少',
		'运单金额从高到低',
		'配送距离从近到远',
		'取货距离从近到远',
		'推荐排序'
	]);
	const tipsItems = ref([
		'新单置顶',
		'已抢商户置顶'
	]);

	// 方法定义
	const change = (e) => {
		console.log('当前模式：' + e.type + ',状态：' + e.show);
	};

	const toggle = (typeValue) => {
		type.value = typeValue;
		popupRef.value.open(typeValue);
	};

	const closePopup = () => {
		popupRef.value.close();
	};

	const map = () => {
		uni.navigateTo({
			url: '/pages/map/map'
		})
	}

	// Picker 选择改变时触发
	const bindPickerChange = (e) => {
	  console.log('picker发送选择改变，携带值为', e.detail.value);
	  const newValue = array.value[e.detail.value];
	  radius.value = newValue;
	
	  // 使用当前用户信息来构建请求数据
	  const requestData = {
	    distributionScope: newValue,
	    errandName: currentUser.value.errandName, // 动态获取
	    errandPhone: currentUser.value.errandPhone, // 动态获取
	    gender: currentUser.value.gender, // 动态获取
	    id: currentUser.value.id, // 动态获取
	    state: currentUser.value.state // 动态获取
	  };
	
	  // 更新用户的配送范围
	  uni.request({
	    url: apiImageUrl + '/api/errand/update/my',
	    method: 'POST',
	    data: requestData,
		header: {
			'Content-Type': 'application/json', 
		  'cookie': uni.getStorageSync("cookie") || ''
		},
	    success(res) {
	      console.log('配送范围更新成功:', res);
		  console.log(res.data.code);
		  if(res.data.code===50001){
			  uni.showToast({
			    title:'还有未送达订单',
			    icon: 'fail'
			  });
		  }
		  else if(res.data.code===0){
			     uni.showToast({
			       title: '配送范围已更新',
			       icon: 'success'
			     });
			  		   refreshOrders();
		  }
	 
	    },
	    fail(err) {
	      console.error('配送范围更新失败:', err);
	      uni.showToast({
	        title: '更新失败，请重试',
	        icon: 'none'
	      });
	    }
	  });
	};
	const handleClick = (item) => {
		selectedItem.value = item;
	};

	const takePhoto = () => {
		uni.navigateTo({
			url: '/pages/takePhoto/takePhoto'
		})
	};
	
	
	// 修改刷新订单方法
	const refreshOrders = () => {
	  const stateMap = [1, 2, 3];
	  const currentState = stateMap[currentIndex.value] || 1;
	  robOrder(currentState);
	};
	// 初始化加载数据
	onMounted(() => {
	  robOrder(1); // 初始加载待抢单数据
	});
	let errandOrder = ref([]); 
	const robOrder = (errandStateValue) => {
	  // 添加参数校验
	  if (typeof errandStateValue !== 'number' || isNaN(errandStateValue)) {
	    console.error("Invalid errandState value:", errandStateValue);
	    return;
	  }
	
	  // 手动构建查询字符串
	  const params = `errandState=${encodeURIComponent(errandStateValue.toString())}`;
	
	  uni.request({
	    url: apiImageUrl + '/api/errand/list/order',
	    method: 'POST',
	    header: {
	      'Content-Type': 'application/x-www-form-urlencoded', // 设置正确的内容类型
		  'cookie': uni.getStorageSync("cookie") || ''
	    },
	    data: params, // 直接使用构建好的查询字符串
	    success(res) {
	      console.log('请求成功:', res);
		  
	      if (res.data.code !== 0) {
	        uni.showToast({
	          title: `请求失败：${res.data.message}`,
	          icon: 'none'
	        });
	      }else {
			console.log(res.data.data)
			errandOrder.value = res.data.data; // 更新响应式数据
			console.log('Updated errandOrder:', errandOrder.value);
      }
	    },
	    fail(err) {
	      console.log('请求失败:', err);
	    }
	  });
	};
	
	const plunder = (id) => {
	  console.log(id);
	  uni.request({
	    url: apiImageUrl + '/api/errand/get/order',
	    method: 'POST',
	    data: {
	      id: id
	    },
	    header: {
	      'Content-Type': 'application/json',
	      'cookie': uni.getStorageSync("cookie") || ''
	    },
	    success: (res) => {  // 使用箭头函数保持上下文
	      console.log(res);
	      if (res.data.code === 0) {
	        uni.showToast({
	          title: '抢单成功',
	          icon: 'success',
	          success: () => {
	            // 根据当前标签页刷新数据
	            const stateMap = [1, 2, 3];
	            const currentState = stateMap[currentIndex.value];
	            robOrder(currentState);
	            
	            // 如果是待抢单页面，额外刷新待取货列表
	            if (currentIndex.value === 0) {
	              robOrder(2);
	            }
	          }
	        });
	      } else {
	        uni.showToast({
	          title: res.data.message || '抢单失败',
	          icon: 'none'
	        });
	      }
	    },
	    fail: (err) => {
	      console.log(err);
	      uni.showToast({
	        title: '网络错误，请重试',
	        icon: 'none'
	      });
	    }
	  })
	};
	
const obtain = (id) => {
  uni.request({
    url: apiImageUrl + '/api/errand/update/state',
    method: 'POST',
    data: {
      errandsState: 3,
      orderId: id
    },
    header: {
      'Content-Type': 'application/json',
      'cookie': uni.getStorageSync("cookie") || ''
    },
    success: (res) => {
      console.log(res);
      if (res.data.code === 0) {
        uni.showToast({
          title: '取货成功',
          icon: 'success',
          success: () => {
            // 刷新当前标签页数据（待取货列表）
            robOrder(2);
            // 同时刷新待送达列表
            robOrder(3);
          }
        });
      } else {
        uni.showToast({
          title: res.data.description || '取货失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      console.log(err);
      uni.showToast({
        title: '网络异常，请检查连接',
        icon: 'none'
      });
    }
  })
};
	
	// const send=(id)=>{
	// 	console.log(id);
	// 	uni.request({
	// 		url:apiImageUrl+'/api/errand/update/state',
	// 		method:'POST',
	// 		data:{
	// 			errandsState:4,
	// 			orderId:id,
	// 			imageAddress:"https://bpic.588ku.com/back_list_pic/22/05/07/16474c1e1553210af8360bfeed9b5134.jpg"
	// 		},
	// 		header: {
	// 		  'Content-Type': 'application/json', // 确保设置正确的 Content-Type
	// 		  'cookie': uni.getStorageSync("cookie") || ''
	// 		},
	// 		success(res) {
	// 			console.log(res);
	// 			uni.showToast({
	// 			  title: '送货成功',
	// 			  icon: 'none'
	// 			});
	// 		},
	// 		fail(err) {
	// 			console.log(err);
	// 			uni.showToast({
	// 			  title: '送货失败',
	// 			  icon: 'none'
	// 			});
	// 		}
	// 	})
	// }
	
	let currentUser = ref({});
	// 获取当前用户信息
	// 获取当前用户信息
	const getCurrentUser = () => {
	  uni.request({
	    url: apiImageUrl + '/api/errand/get/current',
	    method: 'POST',
	    header: {
			'Content-Type': 'application/json', 
	      'cookie': uni.getStorageSync("cookie")
	    },
	    success(res) {
	      console.log(res);
	      if (res.data.code === 0) { // 检查HTTP状态码和业务状态码
	        const userData = res.data.data;
	        currentUser.value = userData; // 更新响应式变量currentUser
	        // 检查用户的配送范围是否存在于我们的选项中
	        if (array.value.includes(userData.distributionScope)) {
	          radius.value = userData.distributionScope; // 保存用户的配送范围
	        } else {
	          console.warn('用户的配送范围不在预设的选项中');
	          // 可以选择设置一个默认值或者提示用户更新配送范围
	        }
	      }
	    },
	    fail(err) {
	      console.error('请求失败:', err);
	    }
	  });
	};
	onMounted(() => {
	  robOrder(1); // 初始加载待抢单数据
	  getCurrentUser(); // 获取当前用户信息
	});
	
	
		onShow(() => {
			getCurrentUser()
			 robOrder(1);
		})
		
		const orderDetail=(item)=>{
			uni.setStorageSync("orderDetail",item)
			uni.navigateTo({
				url:'/pages/orderDetail/orderDetail'
			})
		}
		const deliveryDetail=(item)=>{
			console.log("4567845678945678900");
			console.log(item);
			uni.setStorageSync("orderDetail",item)
			uni.navigateTo({
				url:'/pages/deliveryDetail/deliveryDetail'
			})
		}
		// 新增时间格式化函数
		const formatDate = (isoString) => {
		  if (!isoString) return '';
		  // 直接从 ISO 字符串中截取目标格式（MM-DD HH:mm:ss）
		  return isoString.slice(5, 10) + ' ' + isoString.slice(11, 19);
		};
		
		// 在订单列表页面的onShow中添加
		uni.$on('refresh-delivery-list', () => {
		  this.robOrder(3); // 假设这是你的订单列表刷新方法
		});
</script>


<style scoped lang="scss">
	
	.time-id {
		font-size: 20px;
		color: #ff6700;
		font-weight: 700;
	}
	.tab-menu {
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		background-color: #5e7dec;
		color: #9cb0f4;
	}

	.tab-item {
		padding: 10px;
		cursor: pointer;
	}

	.tab-item.active {
		color: #fff;
		font-weight: bold;
	}

	.fixed-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		background-color: #fff;
		padding: 10px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	}

	.button-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 10px;
	}

	.button-container text {
		margin-top: 5px;
	}

	.fixed-font {
		font-size: 12px;
	}

	.refresh-button {
		width: 60%;
		background-color: pink;
		border-radius: 15px;
		color: #fff;
		background-color: #5e7dec;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-content {
		padding: 20px;
		border-radius: 8px;
		background-color: #fff;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.tab-button {
		background-color: transparent;
		border: none;
		font-size: 16px;
		cursor: pointer;
		padding: 5px 10px;

		&.active {
			color: #007AFF;
			border-bottom: 2px solid #007AFF;
		}
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
	}

	.modal-close {
		font-size: 16px;
		cursor: pointer;
	}

	.modal-body {
		padding: 10px 0;
	}

	.modal-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.modal-label {
		font-size: 15px;
		font-weight: bold;
	}

	.modal-value {
		font-size: 14px;
		color: #333;
	}

	.arrow {
		margin-left: 10px;
	}

	.modal-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		/* 创建两列，每列占据相等的空间 */
		gap: 10px;
		padding: 10px 10px 10px 0;
		border-radius: 5px;
	}

	.item {
		background-color: #f1f1f1;
		padding: 10px;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
		font-size: 14px;

		&.selected {
			background-color: #eef6ff;
			color: #80a6da;
		}
	}

	.tips {
		font-size: 12px;
		color: #c8c8c8;
	}

	// 抢单样式

	.order-card {
		background-color: #fff;
		border-radius: 12px;
		/* 增大圆角 */
		padding: 10px;
		/* 增大内边距 */
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
		/* 更深的阴影 */
		width: 90%;
		margin: 0 auto;
		margin-bottom: 20px;
		transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
		/* 添加过渡效果 */
	} 
	
	.order-card:hover {
		transform: translateY(-4px);
		/* 当鼠标悬停时稍微提升 */
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
		/* 更大的阴影当悬停 */
	}
	/* 修改前 */
	.order-card:last-child {
	  margin-bottom: 100px;
	}
	
	/* 修改后 */
	.order-card:last-child {
	  margin-bottom: 100px !important;  /* 添加 !important 确保优先级 */
	}

	.delivery-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.time,
	.price {
		font-size: 16px;
		/* 增大字体大小 */
	}

	.price {
		color: #ff6700;
		font-weight: bold;
	}

	.address-info {
		margin-bottom: 15px;
		border-bottom: 1px solid #e0e0e0;
		/* 添加底部边框 */
		padding-bottom: 10px;
	}

	.address-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.circle {
		width: 24px;
		/* 稍微增大圆形 */
		height: 24px;
		background-color: #ff6700;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		margin-right: 12px;
		font-size: 12px;
		/* 调整文本大小 */
		font-weight: bold;
	}

	.distance {
		color: #666;
		font-size: 14px;
		margin-right: 12px;
	}

	.address-name {
		color: #333;
		font-size: 16px;
		font-weight: 600;
	}

	.button-container {
		text-align: center;
		/* 增加按钮顶部间距 */
	}

	.order-button {
		background-color: #5e7dec;
		color: #fff;
		padding: 12px 24px;
		/* 增大按钮尺寸 */
		border-radius: 6px;
		/* 圆滑按钮边缘 */
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease-in-out;
		/* 添加过渡效果 */
		width: 85%;
	}

	.order-button:hover {
		background-color: #4a69bd;
		/* 改变悬停颜色 */
	}
	
	.content {
	  padding-bottom: 50px; /* 根据底部按钮高度调整 */
	}
</style>