<template>
	<view class="page">
		<u-navbar  title="订单管理" :border-bottom="false" :background="bgc" title-color='#000'
			title-size='36' height='45'></u-navbar>
		<view class="top">
			<view class="top_box">
				<view class="left_text">
					时间范围
				</view>
				<view class="timebox">
					<view class="left_time" @click="time1=true">
						{{firsTime}}
					</view>
					-
					<view class="right_time" @click="time2=true">
						{{lasTime}}
					</view>
				</view>
			</view>

			<view class="top_box" style="margin-top: 20rpx;">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/u9UrXmvCyDk2IGqEWGvw" mode=""
					style="width: 44rpx;height: 44rpx;margin-right: 22rpx;"></image>
				<view class="sear_ipt">
					<input type="text" v-model="searchKeyword" placeholder="请输入内容" class="input"
						placeholder-style="color:#C7CDD3" @input="search()">
				</view>
			</view>
			<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="order_cont">
			<view class="order_card" v-for="(item,index) in orderList" :key="index" @click.stop="todetal(item)">
				<view class="order_li">
					<view class="txt">
						{{item.model}}
					</view>
					<view class="txt3" :style="{ color: typeReturn(item.status).color }">
						{{ typeReturn(item.status).text }}
					</view>
				</view>
				
				<view class="order_li">
					<view class="txt2">
						用户：{{item.realName}} {{item.phone}}
					</view>
					<view class="type" @click.stop="callPhone(item.phone)">
						联系用户
					</view>
				</view>
				<view class="line"></view>
				<view class="order_li">
					<view class="txt2">
						取车时间：{{item.createTime}}
					</view>

				</view>
				<view class="order_li">
					<view class="txt2" v-if="item.type==1" style="color: #4297F3;">
						订单类型：租车订单
					</view>
					<view class="txt2" v-if="item.type==2" style="color: red;">
						订单类型：续租订单
					</view>
				</view>
				<view class="order_li">
					<view class="txt2">
						还车时间：{{item.expiryTime}}
					</view>
					<view :class="{'txt3': true, 'red-text': calculateTimeRemaining(item.expiryTime) === '已超时'}"
						v-if="item.status==4">
						{{ calculateTimeRemaining(item.expiryTime) }}
					</view>
				</view>
				
				
				<view class="order_li">
					<view class="price">
						{{item.payFee}}元
					</view>
					<view class="btn" v-if="item.status==7" @click.stop="confirmReturn(item)">
						确认还车
					</view>
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1"	:default-time='pickertime'></u-picker>
		<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2"	:default-time='pickertime'></u-picker>
	</view>
</template>

<script>
	let timerId;
	export default {
		data() {
			return {
				lasTime: '',
				firsTime: '',
				bgc: {
					backgroundColor: "#fff",
				},
				time1: false,
				time2: false,
				lasTime: '',
				firsTime: '',
				searchKeyword: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				orderList: [],
				tabindex:0,
				tabstause:'',
				tablist: [{
						value: '',
						label: '全部'
					},
					{
						value: '0',
						label: '待支付'
					}, 
					// {
					// 	value: '1',
					// 	label: '待取'
					// }, 
					// {
					// 	value: '2',
					// 	label: '待送车'
					// }, {
					// 	value: '3',
					// 	label: '配送中'
					// },
					{
						value: '4',
						label: '进行中'
					}, {
						value: '8',
						label: '已结束'
					}, {
						value: '5',
						label: '超时取消'
					}, {
						value: '6',
						label: '已取消'
					}, {
						value: '7',
						label: '待审核'
					},


				],

			}
		},
		onShow() {
			this.getList()

		},

		methods: {
			confirmReturn(item){
				
				this.$u.post(`appVerify/merchantReturn?orderNo=` + 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
						});
					}
				});
			},
			todetal(item){
				uni.navigateTo({
					url:'/pages_store/ordder/ordder_Detail?orderNo='+item.orderNo
				})
			},
			changeTab(item,index){
				this.tabindex=index
				console.log(item,'aaa');
				this.tabstause=item.value
				this.getList(); // 调用实际的搜索功能
			},
			search() {
				clearTimeout(timerId);
				// 设置一个新的定时器，在滑动停止后 500ms 执行 getmarks 方法
				timerId = setTimeout(() => {
					this.getList(); // 调用实际的搜索功能
				}, 500);

			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})

			},
			getList() {
				let data = {

					status: this.tabstause,
					startTime: this.firsTime,
					endTime: this.lasTime,
					keywords: this.searchKeyword
				}
				this.$u.get("appVerify/orderList?", data).then((res) => {

					if (res.code == 200) {

						this.orderList = res.data

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			returnType(num) {
				if (num == 1) {
					return '自行前往门店'
				} else if (num == 2) {
					return '上门取车'
				}
			},
			returnBackType(num) {
				if (num == 1) {
					return ''
				} else if (num == 2) {
					return ''
				}
			},
			typeReturn(num) {
				let result = {
					text: '',
					color: '#4297F3' // 默认颜色
				};

				if (num == 0) {
					result.text = '待支付';
					result.color = '#F14C4C'; // 待支付颜色
				} else if (num == 1) {
					result.text = '待取车';
				} else if (num == 2) {
					result.text = '待送车';
				} else if (num == 3) {
					result.text = '送车中';
				} else if (num == 4) {
					result.text = '进行中';
				} else if (num == 5) {
					result.text = '超时取消';
					result.color = '#ccc'; // 超时取消颜色
				} else if (num == 6) {
					result.text = '已取消';
					result.color = '#ccc'; // 已取消颜色
				} else if (num == 7) {
					result.text = '已完成';
					result.color = '#3D3D3D'; // 已完成颜色
				} else if (num == 8) {
					result.text = '已结束';
				}

				return result;
			},
			calculateTimeRemaining(expiryTime) {
				const now = new Date();
				const expiry = new Date(expiryTime);
				const diff = expiry - now; // 毫秒差

				if (diff < 0) {
					return "已超时"; // 如果过期，返回相关信息
				}

				const hours = Math.floor(diff / (1000 * 60 * 60));
				const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

				return `${hours}小时${minutes}分`;
			},
			confirm1(e) {
				console.log(e, 'eeeeeeee');
				this.firsTime = e.year + '-' + e.month + '-' + e.day
				if (this.firsTime != '' && this.lasTime != '') {
					this.getList()
				}

			},
			confirm2(e) {
				this.lasTime = e.year + '-' + e.month + '-' + e.day
				// this.pageNum=1
				if (this.firsTime != '' && this.lasTime != '') {
					this.getList()
				}



			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7FAFE;
	}

	.page {
		.order_cont {
			.order_card {
				margin: 0 auto;
				margin-top: 18rpx;
				width: 714rpx;
				padding: 32rpx 24rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.line {
					margin-top: 22rpx;
					width: 100%;
					background: #D8D8D8;
					height: 1rpx;
				}

				.order_li {
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-weight: 600;
						font-size: 32rpx;
						color: #FF1C1C;
					}

					.btn {
						display: flex;
						align-items: center;
						justify-content: center;

						width: 334rpx;
						height: 58rpx;
						background: #4297F3;
						border-radius: 8rpx 8rpx 8rpx 8rpx;

						border: 2rpx solid #4297F3;
						font-weight: 600;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.txt3 {
						font-weight: 400;
						font-size: 26rpx;
						color: #4297F3;
					}

					.txt {
						font-weight: 600;
						font-size: 30rpx;
						color: #3D3D3D;
					}

					.txt1 {
						font-weight: 400;
						font-size: 30rpx;
						color: #FF8C1E;
					}

					.txt2 {
						font-weight: 400;
						font-size: 26rpx;
						color: #3D3D3D;
					}

					.type {
						padding: 6rpx 12rpx;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						border: 1rpx solid #4297F3;
						font-weight: 400;
						font-size: 24rpx;
						color: #4297F3;
					}

					.red-text {
						color: #FF1C1C;
					}
				}
			}
		}

		.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;
			    }
			  }
			}

			.top_box {

				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				padding: 28rpx 30rpx;
				// padding: 20rpx 0;

				margin: 0 auto;
				width: 672rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				.left_text {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					width: 25%;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;

					.icon-xiangxia1 {
						font-size: 26rpx;
					}
				}

				.timebox {
					width: 75%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin-left: 34rpx;

					.left_time {
						text-align: center;
						margin-right: 6rpx;
						height: 50rpx;
						width: 45%;
						border: 2rpx solid #ccc;
						border-radius: 12rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #979797;
					}

					.right_time {
						text-align: center;
						margin-left: 6rpx;
						height: 50rpx;
						width: 45%;
						border: 2rpx solid #ccc;
						border-radius: 12rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #979797;
					}
				}
			}


		}

	
	}
</style>