<template>
	<view class="page">
		<u-navbar title="订单列表" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="searc_box">
			<view class="search">
				<view class="input">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u9UrXmvCyDk2IGqEWGvw" mode=""
						style="width: 44rpx;height: 44rpx;margin-right: 22rpx;"></image>

					<input type="text" v-model="searchKeyword" placeholder="请输入内容" placeholder-style="color:#C7CDD3"
						@input="search()">
				</view>
				<!-- <view class="add">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/u6j7tAtxUJDlpMDvXXLb" mode=""></image>
					</view> -->
				<view class="btn">
					搜索
				</view>
			</view>
		</view>
		<view class="top">

			<view class="tab_box">
				<view class="tab_li " v-for="(item,index) in tablist" :key="index" :class="index==tabindex?'act1':''"
					@click="changeTab(item,index)">
					{{item.label}}
					<view class="line "></view>
				</view>

			</view>
		</view>

		<view class="card" v-for="(item,index) in list" :key="index" @click="todetal(item)">
			<view class="card_top">
				<view class="txt1">
					下单时间：{{item.createTime}}
				</view>
				<view class="txt2" :style="{ color: typeReturn(item.status).color }">
					{{typeReturn(item.status).text}}
				</view>
			</view>
			<view class="cont">

				<view class="cont_li">
					<view class="left">
						<span class="txt3">
							收货地址：
						</span>
						<span class="txt4">
							{{item.deliveryAddress}}
						</span>
					</view>
					<view class="btn2" @click.stop="mapFun(item.deliveryLat,item.deliveryLon,item.deliveryAddress)">
						导航
					</view>
				</view>
				<view class="cont_li2">
					<span class="txt5">
						门店名称：
					</span>
					<span class="txt6">
						{{item.storeName}}
					</span>
				</view>
				<view class="cont_li">
					<view class="left">
						<span class="txt3">
							门店地址：
						</span>
						<span class="txt4">
							{{item.address}}
						</span>
					</view>
					<view class="btn2" @click.stop="mapFun(item.lat,item.lon,item.address)">
						导航
					</view>
				</view>
				<view class="cont_li2">
					<span class="txt5">
						要求送车到达时间：
					</span>
					<span class="txt6">
						{{timeBack(item.deliveryTime) }}
					</span>
				</view>
				<view class="cont_li2">
					<span class="txt5">
						送货人员:
					</span>
					<span class="txt6">
						{{ item.deliveryman ? item.deliveryman : '--' }}
					</span>
				</view>
				<view class="btn" v-if="item.status==0" @click.stop="getOrder(item)">
					立即接单
				</view>
				<view class="btn_li" v-if="item.status==1||item.status==2">
					<view class="btn1" @click.stop="callPhone(item.phone)">
						联系客户
					</view>
					<view class="btn2" v-if="item.status==1" @click.stop="goDeli(item)">
						立即配送
					</view>
					<view class="btn2" v-if="item.status==2" @click.stop="overDeli(item)">
						配送完成
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	let timerId;
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				tabindex: 0,
				tabstause: '0',
				tablist: [{
						value: '0',
						label: '待接单'
					},
					{
						value: '1',
						label: '待配送'
					},
					{
						value: '2',
						label: '配送中'
					}, {
						value: '3',
						label: '已完成'
					}, {
						value: '8',
						label: '已取消'
					},
				],
				list: [],
				searchKeyword: ''
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			todetal(item){
				uni.navigateTo({
					url:'/page_Delivery/OrderDetail?deliveryId='+item.deliveryId
				})
			},
			goDeli(item) {
				this.$u.get(`appAdmin/inDelivery?orderNo=` + this.item.orderNo).then((res) => {
					if (res.code == 200) {

						this.getList()
						uni.showToast({
							title: '开始配送',
							icon: 'none',
							duration: 2000
						});
					} else {


						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			overDeli(item) {
				this.$u.get(`appAdmin/endDelivery?orderNo=` + this.item.orderNo).then((res) => {
					if (res.code == 200) {

						this.getList()
						uni.showToast({
							title: '配送完成',
							icon: 'none',
							duration: 2000
						});
					} else {


						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getOrder(item) {
				this.$u.get(`appAdmin/orderTaking?orderNo=` + this.item.orderNo).then((res) => {
					if (res.code == 200) {

						this.getList()
						uni.showToast({
							title: '接单成功',
							icon: 'none',
							duration: 2000
						});
					} else {


						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			mapFun(item, txt) {
				console.log('点击了');
				uni.openLocation({
					latitude: item.lat,
					//纬度 - 目的地/坐标点
					longitude: item.lng,
					//经度 - 目的地/坐标点
					// name: "荆门市",
					address: txt
				});
			},
			typeReturn(num) {
				let result = {
					text: '',
					color: '#4297F3' // 默认颜色
				};

				if (num == 0) {
					result.text = '待接单';
					result.color = '#F14C4C'; // 待支付颜色
				} else if (num == 1) {
					result.text = '待配送';
					result.color = '#F38C42'; // 超时取消颜色
				} else if (num == 2) {
					result.text = '配送中';
					result.color = '#4297F3'; // 超时取消颜色
				} else if (num == 3) {
					result.text = '已完成';
					result.color = '#000000'; // 超时取消颜色
				} else if (num == 8) {
					result.text = '已取消';
					result.color = '#ccc'; // 超时取消颜色
				}

				return result;
			},
			timeBack(time) {
				const date = new Date(time);

				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以加1
				const day = date.getDate().toString().padStart(2, '0');

				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');

				// 格式化为 'YYYY-MM-DD HH:mm:ss'
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			search() {
				clearTimeout(timerId);
				// 设置一个新的定时器，在滑动停止后 500ms 执行 getmarks 方法
				timerId = setTimeout(() => {
					this.getList(); // 调用实际的搜索功能
				}, 500);

			},
			changeTab(item, index) {
				this.tabindex = index
				console.log(item, 'aaa');
				this.tabstause = item.value
				// this.getList(); // 调用实际的搜索功能
			},
			getList() {

				let data = {
					keywords: this.searchKeyword,
					statusList: this.tabstause
				}
				this.$u.get(`appAdmin/deliveryOrderList?`, data).then((res) => {
					if (res.code == 200) {

						this.list = res.data

					} else {


						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {}

	.page {
		.card {
			margin: 0 auto;
			width: 680rpx;
			margin-top: 30rpx;
			// height: 596rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.card_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 26rpx;
				width: 680rpx;
				// height: 78rpx;
				background: #E5E4E4;
				border-radius: 20rpx 20rpx 0 0;

				.txt1 {
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.txt2 {
					font-weight: 600;
					font-size: 32rpx;
					color: #F14C4C;
				}
			}

			.cont {
				padding: 14rpx 24rpx;

				.btn_li {
					margin-top: 15rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: nowrap;

					.btn1 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 200rpx;
						height: 70rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 2rpx solid #4297F3;
						font-weight: 500;
						font-size: 32rpx;
						color: #4297F3;
					}

					.btn2 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 400rpx;
						height: 70rpx;
						background: #4297F3;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}

				.btn {
					margin-top: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 630rpx;
					height: 70rpx;
					background: #4297F3;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.cont_li {
					margin-bottom: 14rpx;
					display: flex;
					justify-content: space-between;
					align-items: self-start;


					.left {
						display: block;
						width: 504rpx;

						.txt3 {
							// display: inline-block;
							font-weight: 400;
							font-size: 28rpx;
							color: #6f6f6f;
						}

						.txt4 {
							// display: inline-block;
							font-weight: 400;
							font-size: 28rpx;
							color: #3d3d3d;
							// margin-top: 5rpx;
						}
					}

					.btn2 {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 80rpx;
						height: 36rpx;
						border-radius: 18rpx;
						border: 1rpx solid #808080;
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
						margin-left: 10rpx;
					}
				}

				.cont_li2 {
					margin-bottom: 14rpx;

					.txt5 {
						font-weight: 400;
						font-size: 28rpx;
						color: #6f6f6f;
					}

					.txt6 {
						font-weight: 400;
						font-size: 28rpx;
						color: #3d3d3d;
					}
				}
			}
		}


		.top {
			// padding-top: 40rpx;
			padding-bottom: 20rpx;
			background: #FFFFFF;

			.tab_box::-webkit-scrollbar {
				display: none;
			}

			.tab_box {
				display: flex;
				flex-wrap: nowrap;
				// margin-top: 48rpx;
				padding: 0 38rpx;
				overflow-x: auto; // 允许水平滚动
				white-space: nowrap; // 防止子元素换行

				.tab_li {
					margin-right: 32rpx;
					display: flex; // 使子元素水平排列
					justify-content: center;
					flex-wrap: wrap;
					width: 130rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #3B3838;

					.line {
						margin-top: 12rpx;
						width: 66rpx;
						height: 6rpx;
						background: #fff;
						border-radius: 6rpx;
					}
				}

				.act1 {
					color: #4297F3;

					.line {
						background: #4297F3;
					}
				}
			}



		}


		.searc_box {
			padding: 36rpx;
			width: 750rpx;
			background: #fff;

			.search {
				width: 100%;
				height: 68rpx;
				border: 2rpx solid #4297F3;
				border-radius: 20rpx;
				display: flex;
				flex-wrap: nowrap;

				.input {
					padding-left: 30rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					image {}

					width: 533rpx;
					height: 100%;
					// border-right: 2rpx solid #4297F3;
				}

				// .add{
				// 	width: 88rpx;
				// 	height: 100%;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	image{
				// 		width: 44rpx;
				// 		height: 44rpx;
				// 	}
				// }
				.btn {
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 142rpx;
					background: #4297F3;
					// border: 2rpx solid #4297F3;
					border-radius: 0 20rpx 20rpx 0;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}


	}
</style>