<template>
	<view class="page">
		<u-navbar  :is-back="false" title="订单" :border-bottom="false" :background="bgc" title-color='#2E4975'
			title-size='36' height='36'></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">
			<view class="left_text">
				手机号
			</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="curtitidx==0?'act1':''" @click="changeidx(0)">
				全部
			</view>
			<view class="tap_cont" :class="curtitidx==1?'act1':''"  @click="changeidx(1)">
				进行中
			</view>
			<view class="tap_cont" :class="curtitidx==2?'act1':''"  @click="changeidx(2)">
				待支付
			</view>
			<view class="tap_cont" :class="curtitidx==3?'act1':''"  @click="changeidx(3)">
				已完成
			</view>
		</view>
		<u-mask :show="show" @click="show = false" :z-index='100' />
		<view class="tip_box" v-if="showfz">
			<view class="top">
				<view class="tip">
					提示
				</view>
				
				<view class="txt">
					确定要辅助还车吗？
				</view>
			</view>
			<view class="bot">
				<view class="bot_left" @click="show=false">
					取消
				</view>
				<view class="bot_right">
					确定
				</view>
			</view>
		</view>
		<view class="tip_box" v-if="showgj">
			<view class="top">
				<view class="tip">
					改价
				</view>
				
				<view class="ipt_box">
					<view class="text">
						租赁费
					</view>
					<view class="ipt">
						<input type="text"
							 v-model="searchKeyword"
							 placeholder="0.00"
							 class="input"
							 placeholder-style="color:#C7CDD3"
							>
							元
					</view>
				</view>
				<view class="ipt_box">
					<view class="text">
						租赁费
					</view>
					<view class="ipt">
						<input type="text"
							 v-model="searchKeyword"
							 placeholder="0.00"
							 class="input"
							 placeholder-style="color:#C7CDD3"
							>
							元
					</view>
				</view>
			</view>
			<view class="bot">
				<view class="bot_left" @click="show=false">
					取消
				</view>
				<view class="bot_right">
					确定
				</view>
			</view>
		</view>
		<view class="tip_box" v-if="showtk">
			<view class="top">
				<view class="tip">
					退款
				</view>
				
				<view class="ipt_box">
					<view class="text">
						租赁费
					</view>
					<view class="ipt">
						<input type="text"
							 v-model="searchKeyword"
							 placeholder="0.00"
							 class="input"
							 placeholder-style="color:#C7CDD3"
							>
							元
					</view>
				</view>
				<view class="ipt_box">
					<view class="text">
						调度费
					</view>
					<view class="ipt">
						<input type="text"
							 v-model="searchKeyword"
							 placeholder="0.00"
							 class="input"
							 placeholder-style="color:#C7CDD3"
							>
							元
					</view>
				</view>
				<view class="ipt_box">
					<view class="text">
						管理费
					</view>
					<view class="ipt">
						<input type="text"
							 v-model="searchKeyword"
							 placeholder="0.00"
							 class="input"
							 placeholder-style="color:#C7CDD3"
							>
							元
					</view>
				</view>
				<view class="ipt_box">
					<view class="text">
						原因
					</view>
					<view class="ipt">
						<input type="text"
							 v-model="searchKeyword"
							 placeholder="选填"
							 class="input"
							 placeholder-style="color:#C7CDD3"
							>
							元
					</view>
				</view>
			</view>
			<view class="bot">
				<view class="bot_left" @click="show=false">
					取消
				</view>
				<view class="bot_right">
					确定
				</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 class="warp_box">
			<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }"  :current='curtitidx' @change="swiperchange" next-margin='-20rpx'>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card"  @click="todetail(item.id)" v-for="imte in 3" :key="imte">
							<view class="line"></view>
							<view class="top_info">
								<view class="top_info_left">
									订单编号：12635412134568461
								</view>
								<view class="top_info_right">
									<view class="yuan"></view>
									进行中
								</view>
							</view>
							
							<view class="lines"></view>
							<view class="order_info">
								<view class="info_li">
									租赁用户：15863007894
								</view>
								<view class="info_li">
									<view class="half_info_li">
										车辆编号：122323
									</view>
									<view class="half_info_li">
										租赁时长：6分钟
									</view>
								</view>
								<view class="info_li">
									订单费用：6.00元
								</view>
								<view class="info_li">
									开关时间：2024.02.13 14:24:03-2024.02.13 14:30:03
								</view>
							</view>
							<view class="lines"></view>
							<view class="btn_box">
								<view class="btn">
									辅助还车
								</view>
								<view class="btn_line">
									
								</view>
								<view class="btn">
									查看详情
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card" v-for="(item,index) in eledata" :key="index"  v-if="item.status!=1"  @click="todetail(item.id)">
							
							
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card" v-for="(item,index) in fixdata" :key="index"  v-if="item.status!=1"  @click="todetail(item.id)">
							
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card" v-for="(item,index ) in alreadyList" :key="index"  @click="todetail(item.id)">
							
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<tab-bar :indexs='2' style=""></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				pickertime: '',
				time1:false,
				time2:false,
				lasTime:'00-00',
				firsTime:'00-00',
				searchKeyword:'',
				curtitidx:0,
				swiperHeight:414*3,
				fixdata: [],
				eledata: [],
				listData: [],
				alreadyList:[],
				show:true,
				showfz:false,
				showgj:false,
				showtk:true

			}
		},
		onShow() {
			this.$store.dispatch('userInfo', this.$u).then(() => {

				// 执行其他操作...
			});

		},
		watch: {
			curtitidx(newValue, oldValue) {
				// 处理userId变化的逻辑
				console.log('userId 发生变化', newValue, oldValue);
				if(newValue==0){
					this.swiperHeight=(this.listData.length*440)
				}else if(newValue==1){
					this.swiperHeight=this.eledata.length*440
				}else if(newValue==1){
					this.swiperHeight=this.fixdata.length*440
				}
			}
		},
		computed: {
			userId() {
				return this.$store.getters.userId;
			},
		},
		methods: {
			changeidx(idx){
				this.curtitidx=idx
			},
			swiperchange(e){
				this.curtitidx=e.detail.current
				console.log(e,'eeeeeeeee');
			},
			confirm1(e) {
				console.log(e,'eeeeeeee');
				this.firsTime = e.year+'-'+e.month+'-'+e.day
				
			},
			confirm2(e) {
				this.lasTime =  e.year+'-'+e.month+'-'+e.day
				
			},
			search() {
			    // 根据关键字过滤 this.classlist
			    if (this.searchKeyword !== '') {
			        const filteredList = JSON.parse(JSON.stringify(this.orgstulist)).filter(item => {
			            // 匹配 nickName 或者 id
			            return item.nickName.includes(this.searchKeyword) || item.id.toString().includes(this.searchKeyword);
			        });
			        // 更新 this.classlist 为过滤后的列表
			        this.stulist = filteredList;
			    } else {
			        this.fuwei();
			    }
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		width: 750rpx;
		.tip_box {
			position: fixed;
			left: 72rpx;
			top: 628rpx;
			width: 610rpx;
			// height: 282rpx;
			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: 96rpx;
						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;
				// border-top: 2rpx solid #D8D8D8;
				display: flex;
				flex-wrap: nowrap;
				// height: 100%;
				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;
					// border-left: 2rpx solid #D8D8D8;
					font-weight: 500;
					font-size: 32rpx;
					// color: #4C97E7;
		
				}
		
			}
		}
		.warp_box{
			.swiper{
				.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: 26rpx 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{
									width: 50%;
									font-weight: 400;
									font-size: 28rpx;
									color: #808080;
								}
							}
						}
						.line{
							width: 750rpx;
							height: 22rpx;
							background: #F6F6F6;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
						}
						.lines{
							width: 750rpx;
							height: 2rpx;
							background: #D8D8D8;
							// border: 2rpx solid #D8D8D8;
						}
						.top_info{
							padding: 24rpx 32rpx;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							.top_info_left{
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
							}
							.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;
			margin: 20rpx 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 {
				width: 25%;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}

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