<template>
	<view class="page">
		<u-navbar :is-back="false" title="订单管理" :border-bottom="false" :background="bgc" title-color='#2E4975'
			title-size='36' height='45'></u-navbar>
		<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;">
			<view class="left_text" @click="shows=true">
				{{tit}}
				<view class="iconfont icon-xiangxia1"></view>
			</view>
			<view class="sear_ipt">
				<input type="text" v-model="searchKeyword" placeholder="请输入内容" class="input"
					placeholder-style="color:#C7CDD3" @input="search()">
			</view>
		</view>
		<view class="tap">
			<view class="tap_cont " :class="zhuangtai==''?'act1':''" @click="changeidx('')">
				全部
			</view>
			<view class="tap_cont" :class="zhuangtai=='PROCESSING'?'act1':''" @click="changeidx('PROCESSING')">
				进行中
			</view>
			<view class="tap_cont" :class="zhuangtai=='WAIT_PAY'?'act1':''" @click="changeidx('WAIT_PAY')">
				待支付
			</view>
			<view class="tap_cont" :class="zhuangtai=='FINISHED'?'act1':''" @click="changeidx('FINISHED')">
				已完成
			</view>
		</view>
		<u-mask :show="show" :z-index='100' />
		<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>
		<scroll-view class="warp_box" @scrolltolower="handqixing" scroll-y>
					<view class="swiper-item ">
						<view class="card" v-for="(item,index) in allList" :key="index" @click="toOrderDetail(item.deviceSn,item.id)">
							<view class="line"></view>
							<view class="top_info">
								<view class="top_info_left">
									订单编号：{{item.no}}
								</view>
								<view class="top_info_right" v-if="item.status=='PROCESSING'">
									<view class="yuan"></view>
									进行中
								</view>
								<view class="top_info_right" v-if="item.status== 'WAIT_PAY'"
									style="color: orangered;">
									<view class="yuan" style="background: orangered;"></view>
									待支付
								</view>
								<view class="top_info_right" v-if="item.status=='FINISHED'" style="color: green;">
									<view class="yuan" style="background: green;"></view>
									已完成
								</view>
							</view>
							<view class="lines"></view>
							<view class="order_info">
								<view class="info_li">
									<view class="half_info_li">
										租赁用户：<span>{{item.userName}}</span>
									</view> 
								</view>
								<view class="info_li">
									<view class="half_info_li">
										车辆编号：<span>{{item.deviceSn == null ? '--' : item.deviceSn}}</span>
									</view>
									<view class="half_info_li">
										租赁时长：<span>{{computedList(item.duration)}}</span>
									</view>
								</view>
								<view class="info_li">
									<view class="half_info_li">
										订单费用：<span>{{item.totalFee}}元</span>
									</view>
									<view class="half_info_li">
										有无退款：<span v-if="item.payRefunded>0" style="color: red;">有</span>
										<span v-else>无</span>
									</view>
								</view>
								<view class="info_li">
									<view class="half_info_li">
										开始时间：<span>{{formatDate(item.startTime)}}</span>
									</view>
									<view class="half_info_li" v-if="item.deviceVehicleNum">
										车牌号：<span>{{item.deviceVehicleNum}}</span>
									</view>
									<view class="half_info_li" v-else>
										车牌号：<span>--</span>
									</view>
								</view>
							</view>
						</view>
						<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 30rpx;">
							当前没有更多订单啦...
						</view>
					</view>
		</scroll-view>

		<u-select v-model="shows" :list="list" title='添加方式' @confirm="searchconfirm"></u-select>
		<TabBar :indexs='3' style=""></TabBar>
	</view>
</template>

<script>
	import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue';
	let timerId;
	let timerId1;
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				pickertime: '',
				time1: false,
				time2: false,
				lasTime: '',
				firsTime: '',
				searchKeyword: '',
				curtitidx: '',
				swiperHeight: 400,
				allList: [],
				ingList: [],
				reprement: [],
				alreadyList: [],
				show: false,
				showfz: false,
				showgj: false,
				showtk: false,
				orderInfo: {},
				initialValues: {},
				areaId: false,
				tit: '车牌号',
				shows: false,
				list: [{
						value: '1',
						label: '手机号'
					},
					{
						value: '2',
						label: '车牌号'
					}],
				typeidx: '2',
				passList: [],
				dispatchFee: 0,
				manageFee: 0,
				ridingFee: 0,
				appointmentFee: 0,
				reason: '',
				pageNum: 1,
				isback: false,
				zhuangtai:'',
				total:'',
				wateringListone:[]
			}
		},
		onLoad() {
			if (uni.getStorageSync('adminAreaid')) {
				this.areaId = uni.getStorageSync('adminAreaid')
				this.orderList()
			}
		},
		onShow() {
			// if (uni.getStorageSync('adminAreaid')) {
			// 	this.areaId = uni.getStorageSync('adminAreaid')
			// 	this.orderList()
			// 	// this.getArea()
			// }
		},
		watch: {
		
		},
		computed: {
			userId() {
				return this.$store.getters.userId;
			},
		},
		computed: {

		},
		onReachBottom() {

		},
		methods: {
			handqixing() {
				console.log(this.total,this.allList.length);
				if(this.total > this.allList.length){
					this.orderList()
				}
			},
			formatDate(value) {
				if (!value) return ''
				let date = new Date(value)
				let month = date.getMonth() + 1 // 月份从0开始计数，所以加1
				let day = date.getDate()
				let hours = date.getHours()
				let minutes = date.getMinutes()
				// 确保月份、日期、小时和分钟都是两位数
				month = month < 10 ? '0' + month : month
				day = day < 10 ? '0' + day : day
				hours = hours < 10 ? '0' + hours : hours
				minutes = minutes < 10 ? '0' + minutes : minutes
				return `${month}-${day} ${hours}:${minutes}`
			},
			searchconfirm(e) {
				this.typeidx = e[0].value
				this.tit = e[0].label
			},
			computedList(seconds, showSeconds = true) {
			  if (isNaN(seconds)) return "--";
			    const h = Math.floor(seconds / 3600);
			    const m = Math.floor((seconds % 3600) / 60);
			    const s = seconds % 60;
			    const parts = [];
			    if (h > 0) parts.push(`${h}时`);
			    if (m > 0 || h > 0) parts.push(`${m}分`); // 如果有小时则始终显示分钟
			    if (showSeconds) parts.push(`${s}秒`);
			    return parts.join("") || "0钟";
			},
			toOrderDetail(id,orid) {
				uni.navigateTo({
					url: '/page_shanghu/guanli/order_detail?id=' + id + '&orid=' + orid
				})
			},
			checkAndUpdate(key) {
				clearTimeout(timerId)
				timerId = setTimeout(() => {
					let inputValue = parseFloat(this.orderInfo[key]);
					let initialValue = parseFloat(this.initialValues[key]);
					if (inputValue > initialValue) {
						this.orderInfo[key] = initialValue;
					}
				}, 500)
			},
			showtks(item) {
				this.orderInfo = item
				this.show = true
				this.showtk = true
				this.initialValues.dispatchFee = this.orderInfo.dispatchFee
				this.initialValues.manageFee = this.orderInfo.manageFee
				this.initialValues.ridingFee = this.orderInfo.ridingFee
				this.initialValues.appointmentFee = this.orderInfo.appointmentFee
			},
			closetk() {
				this.show = false
				this.showtk = false
				this.orderInfo = {}
			},
			showgjs(item) {
				this.orderInfo = item
				this.show = true
				this.showgj = true
			},
			closegj() {
				this.show = false
				this.showgj = false
				this.orderInfo = {}
			},
			showfzs(item) {
				this.orderInfo = item
				this.show = true
				this.showfz = true
			},
			orderList() {
				let data = {}
				if (this.typeidx == 1) {
					data = {
						userPhone: this.searchKeyword,
						status: this.zhuangtai,
						createDateRange:this.firsTime == '' ? '' : this.lasTime == '' ? '' : this.firsTime + ',' + this.lasTime,
						areaId: this.areaId,
						pageSize: 20,
						pageNum: this.pageNum,
						isAsc:'desc',
						orderByColumn:'createTime'
					};
				} else if (this.typeidx == 2) { // 修改条件为 this.typeidx == 2
					data = {
						deviceVehicleNum: this.searchKeyword,
						type: '1',
						status:this.zhuangtai,
						createDateRange:this.firsTime == '' ? '' : this.lasTime == '' ? '' : this.firsTime + ',' + this.lasTime,
						areaId: this.areaId,
						pageSize: 20,
						pageNum: this.pageNum,
						isAsc:'desc',
						orderByColumn:'createTime'
					};
				}
				this.$u.get('/bst/order/list?', data).then((res) => {
					if (res.code === 200) {
						this.total = res.total
						if(this.pageNum == 1){
							this.allList = res.rows
						}else{
							this.allList = this.allList.concat(res.rows)
						}
						this.pageNum++
						this.curtitidx = 0
						this.$forceUpdate()
					}
				})
			},
			async changeidx(idx) {
				this.zhuangtai = idx
				this.pageNum = 1
				this.allList = []
				this.ingList = []
				this.reprement = []
				this.alreadyList = []
				this.orderList()
			},
			confirm1(e) {
				console.log(e, 'eeeeeeee');
				this.firsTime = e.year + '-' + e.month + '-' + e.day
				this.pageNum = 1
				this.orderList()
			},
			confirm2(e) {
				this.lasTime = e.year + '-' + e.month + '-' + e.day
				this.pageNum = 1
				this.orderList()
			},
			search() {
				this.pageNum = 1
				this.allList = []
				this.ingList = []
				this.reprement = []
				this.alreadyList = []
				clearTimeout(timerId1)
				timerId1 = setTimeout(() => {
					this.pageNum = 1
					this.orderList()
				}, 500)
				// 根据关键字过滤 this.classlist
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.page {
		width: 750rpx;
		.tip_box {
			position: fixed;
			left: 72rpx;
			top: 628rpx;
			width: 610rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			z-index: 110;
			padding-bottom: 100rpx;
			.top {
				padding: 52rpx 38rpx 42rpx 36rpx;
				.ipt_box {
					margin-top: 22rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					.text {
						width: 350rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
					}
					.ipt {
						padding: 10rpx 18rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 26rpx;
						width: 420rpx;
						height: 64rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #979797;
						.input {
							width: 80%;
						}
					}
				}
				.tip {
					width: 100%;
					text-align: center;
					font-weight: 700;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.txt {
					margin-top: 32rpx;
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
			.bot {
				position: absolute;
				width: 610rpx;
				display: flex;
				flex-wrap: nowrap;
				bottom: -20rpx;
				.bot_left {
					border-radius: 0rpx 0rpx 0rpx 30rpx;
					width: 50%;
					height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
					background: #EEEEEE;
				}
				.bot_right {
					border-radius: 0rpx 0rpx 30rpx 0rpx;
					width: 50%;
					height: 86rpx;
					background: #4C97E7;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-weight: 500;
					font-size: 32rpx;
				}

			}
		}

		.warp_box {
			height: 61vh;
			overflow: scroll;
				.swiper-item {
					
					.card {
						margin: 16rpx auto;
						width: 750rpx;
						background: #fff;

						.btn_box {
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							width: 100%;
							height: 96rpx;

							.btn {
								display: flex;
								align-items: center;
								justify-content: center;
								font-weight: 400;
								font-size: 36rpx;
								color: #3D3D3D;
								width: 49%;
							}

							.btn_line {
								width: 0rpx;
								height: 51rpx;
								border: 2rpx solid #4C97E7;
							}
						}

						.order_info {
							padding: 0rpx 30rpx;
							display: flex;
							flex-wrap: wrap;

							.info_li {
								display: flex;
								flex-wrap: nowrap;
								width: 100%;
								font-weight: 400;
								font-size: 28rpx;
								color: #808080;

								.half_info_li:first-child {
									width: 60%;
								}

								.half_info_li {
									width: 40%;
									font-weight: 400;
									font-size: 28rpx;
									color: #808080;
									span{
										color: #000;
									}
								}
							}
						}

						.line {
							width: 750rpx;
							height: 22rpx;
							background: #F6F6F6;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
						}

						.lines {
							width: 750rpx;
							height: 2rpx;
							background: #f7f7f7;
						}

						.top_info {
							padding: 24rpx 32rpx;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;

							.top_info_left {
								width: 70%;
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
								font-weight: 600;
								white-space: nowrap;
								/* 禁止换行 */
								overflow: hidden;
								/* 超出部分隐藏 */
								text-overflow: ellipsis;
								/* 显示省略号 */
							}

							.top_info_right {
								display: flex;
								flex-wrap: nowrap;
								align-items: center;
								margin-left: auto;

								.yuan {
									margin-right: 12rpx;
									border-radius: 50%;
									width: 14rpx;
									height: 14rpx;
									background: #4C97E7;
								}

								font-weight: 400;
								font-size: 28rpx;
								color: #4C97E7;
							}
						}
					}
				}
		}

		.tap {
			margin-top: 24rpx;
			width: 750rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;

			.tap_cont {
				text-align: center;
				padding-bottom: 15rpx;
				width: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
				border-bottom: 6rpx solid #fff;
			}

			.act1 {
				border-bottom: 6rpx solid #4C97E7;
				color: #4C97E7;
			}
		}

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