<template>
	<view class="page">
		<view class="fixed">
			<u-navbar title="确认订单 " :border-bottom="false" :background="background" title-color='#000' title-size='36'
				height='45' back-icon-color='#000'></u-navbar>
		</view>
		<view class="backimg">

		</view>
		<!-- <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/usCZzuQpGCBUpvzCfqyE" mode=""></image> -->
		<view class="car_info">
			<view class="left">
				<view class="name">
					{{modelInfo.model}}
				</view>
				<view class="car_type_li">
					<view class="type" v-for="(items,indexs) in modelInfo.accessorys" :key="indexs">
						含电池
					</view>

				</view>
			</view>
			<image :src="modelInfo.picture" mode=""></image>
		</view>

		<view class="delivery_cont">
			<view class="delivery_top">
				<view class="delivery_left" :class="typeidx==0? '':'leftact'" @click="changeType(0)">
					<view class="cont">
						商家 <span>{{ agentInfo.isFreeCar ? '免费' : '收费' }}</span> 上门
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uH4UHjLW8QlIRyrroLpi" mode=""
							v-if="typeidx==0"></image>
					</view>
				</view>
				<view class="delivery_right" :class="typeidx==1? 'rightact':''" @click="changeType(1)">
					<view class="cont">
						自行前往门店
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uH4UHjLW8QlIRyrroLpi" mode=""
							v-if="typeidx==1"></image>
					</view>
				</view>
			</view>
			<view class="delivery_info">
				<view class="type1" v-if="typeidx==0">
					<view class="lins" :style="{ height: height + 'px' }">

					</view>
					<view class="getcar">
						<view class="li" id="startType">
							<view class="type">
								取车
							</view>
							<view class="txt"
								style="width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-between;">
								{{time}}
								<view
									style="color:#808080 ;margin-left: 80rpx;font-size: 28rpx;display: flex;align-items: center;"
									@click="time1=true">更改时间 <image
										src="https://lxnapi.ccttiot.com/bike/img/static/uqQXXl6pKLlJDYAFrxFI" mode=""
										style="width: 26rpx;height: 26rpx;"></image>
								</view>
							</view>
						</view>
						<view class="li">
							<view style="width: 68rpx;">

							</view>
							<view class="txt" style="font-size: 28rpx;" v-if="agentInfo.isFreeCar==false">
								商家收费送车上门（服务费15元）
							</view>
							<view class="txt" style="font-size: 28rpx;" v-if="agentInfo.isFreeCar">
								商家免费送车上门
							</view>
						</view>
						<view class="li">
							<view class="types">
								{{timenum}}{{timetype(chosePriceInfo.rentalUnit)}}
							</view>
							<view class="tips">
								取车后开始计算订单时长
							</view>
						</view>

						<view class="li" style="margin-top: 28rpx;" id="endType">
							<view class="backtype">
								还车
							</view>
							<view class="txt">
								{{backTime()}}
								<!-- 2024年09月04日 今天16:00 -->
							</view>
						</view>
						<view class="li" @click="handleClick">
							<view
								style="width: 68rpx;color: #3D3D3D;font-size: 28rpx;font-weight: 600;margin-left: 8rpx;">
								地址
							</view>
							<input type="text" v-model="address" placeholder="请输入您的详细地址或点击右侧进行定位" class="input"
								placeholder-style="color:#C7CDD3" @click="handleInputClick" />
							<image src="https://lxnapi.ccttiot.com/bike/img/static/ubBrE0P90fPYvhvbdzHy" mode="">
							</image>
						</view>
					</view>

				</view>
				<view class="type1" v-if="typeidx==1">
					<view class="lins" :style="{ height: height + 'px' }">

					</view>
					<view class="maps">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uwTvqfidPmUFMxB5ViZa" mode=""
							@click="mapFun()"></image>
					</view>
					<view class="getcar">
						<view class="li" id="startType1">
							<view class="type">
								取车
							</view>
							<view class="txt"
								style="width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-between;">
								2024年09月04日 16:00 <view
									style="color:#808080 ;margin-left: 80rpx;font-size: 28rpx;display: flex;align-items: center;"
									@click="time1=true">
									更改时间 <image src="https://lxnapi.ccttiot.com/bike/img/static/uqQXXl6pKLlJDYAFrxFI"
										mode="" style="width: 26rpx;height: 26rpx;"></image>
								</view>
							</view>
						</view>
						<view class="li">
							<view style="width: 68rpx;">

							</view>
							<view class="txt" style="font-size: 28rpx;width: 90%;">
								自行前往门店取车 {{storeInfo.simpleAddress}}
							</view>

						</view>
						<view class="li">
							<view style="width: 68rpx;">

							</view>
							<view class="txt" style="font-size: 28rpx;width: 90%;">
								直线距离 {{km}}
							</view>

						</view>
						<view class="li">
							<view class="types">
								{{timenum}}{{timetype(chosePriceInfo.rentalUnit)}}
							</view>
							<view class="tips">
								取车后开始计算订单时长
							</view>
						</view>

						<view class="li" style="margin-top: 28rpx;" id="endType1">
							<view class="backtype">
								还车
							</view>
							<view class="txt">
								{{backTime()}}
							</view>
						</view>
						<!-- <view class="li">
							<view style="width: 68rpx;">

							</view>
							<view class="txt" style="font-size: 28rpx;width: 90%;">
								自行前往门店还车 福建省宁德市福鼎市太...
								门店距【福鼎太姥山...】直线距离3.8km
							</view>
						</view> -->
					</view>

				</view>
			</view>


		</view>

		<view class="time_card">
			<view class="tit">
				选择租车方案
			</view>
			<view class="choose_box">
				<view class="choose_li" v-for="(item,index) in priceList" :key="index"
					:class="index ==priceIndex? 'act1':''" @click="changePrice(item,index)">
					<view class="time">
						1{{timetype(item.rentalUnit)}}
					</view>
					<view class="price">
						￥ <span>{{item.price}}</span>
					</view>
					<!-- <view class="hot">
						21:00前还车
					</view> -->
				</view>

			</view>
			<view class="num_box">
				<view class="lefttxt">
					租车时长
				</view>
				<view class="right">
					<view class="txt">
						共{{timenum}}{{timetype(chosePriceInfo.rentalUnit)}}
					</view>
					<view class="choosnum">
						<view class="left" @click="subtractnum()">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uTAyQiL5vJLelU4MBb1D" mode="">
							</image>
						</view>
						<view class="cont">
							{{timenum}}
						</view>
						<view class="right" @click="addnum()">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/usXAYHilspF1jJeMdPIE" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="yj_box">
			<view class="top_txt">
				<view class="txts">
					押金
				</view>
				<view class="tips_btn">
					押金政策 <view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>
			<view class="yj_line">
				<view class="yuan">
					取车前
				</view>
				<view class="line"></view>
				<view class="yuan">
					取车后
				</view>
			</view>
			<view class="txt_box">
				<view class="txt">
					押金￥{{modelInfo.deposit}}
				</view>
				<view class="txt">
					全部退还
				</view>
			</view>
			<view class="tip_box">
				<view class="tops">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u43YAsOyDu65EK2KOFN8" mode=""></image>
					线上交押
				</view>
				<view class="words">
					押金由平台保管，安心有保障
				</view>
			</view>
			<view class="tipstxt">
				为保障您的权益，请勿与门店私下交易
			</view>
		</view>
		<view class="insurance_box">
			<view class="backcolor"></view>
			<view class="tit_box">
				增值服务
				<view class="txt">
					出行有保障，家人更放心
				</view>
			</view>
			<view class="info">
				<view class="left">
					骑行享权服务
					<view class="txt1">
						享权须知
					</view>
				</view>
				<view class="right_txt">
					￥10.8/天
				</view>
			</view>
			<view class="choose_insurance_box">
				<view class="insurance_li" v-for="item in 5" :key="index">

				</view>

			</view>
		</view>
		<view class="tabble_box">
			<view class="tit">
				租车预定须知
			</view>
			<view class="tit" style="margin-top: 16rpx;">
				取车须知
			</view>
			<view class="txt2">
				请在2024-09-04 16:00:36时间前取车，超出时间将 无法保证车辆库存
			</view>
			<view class="tabble">
				<view class="tabble_top">
					<view class="tabbl_left">
						取消时间
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
				<view class="tabble_cont" v-for="(item,index) in agentInfo.cancelRuleList" :key="index">
					<view class="tabbl_left">
						{{item.instructions}}
					</view>
					<view class="tabble_right">
						{{backDedu(item.deductPercent)}}
					</view>
				</view>

			</view>
			<view class="tit" style="margin-top: 16rpx;">
				配套服务
			</view>

			<view class="tabble">
				<view class="tabble_top">
					<view class="tabbl_left">
						电池
					</view>
					<view class="tabble_right">
						其他
					</view>
				</view>

				<view class="tabble_cont">
					<view class="tabbl_left">
						超过取车时间2小时内
					</view>
					<view class="tabble_right">
						扣费标准
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="showtips" :z-index='100' />
		<view class="tips_box" v-if="showtips">
			<view class="tit">
				线上交押
			</view>
			<view class="txt">
				取车前需支付押金，在商家确认还车及无
				车损，还车后立即退还全部押金。
			</view>
			<view class="btn">
				我知道了
			</view>
		</view>
		<view class="sub_box">
			<view class="detail" v-if="showmx">

				<view class="tit">
					订单明细

				</view>
				<view class="close" @click="showmx=false">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uYLkBxKrJq35FjyHy2Jr" mode=""></image>
				</view>
				<view class="txt_li">
					<view class="txt5">
						租金
					</view>
					<view class="txt5">
						￥{{priceInfo.rent}}
					</view>
				</view>
				<view class="txt_li">
					<view class="txt5">
						押金
					</view>
					<view class="txt5">
						￥{{priceInfo.deposit}}
					</view>
				</view>
				<view class="txt_li">
					<view class="txt5">
						派送费
					</view>
					<view class="txt5">
						￥{{priceInfo.deliveryFee}}
					</view>
				</view>
			</view>
			<view class="bot_box">
				<view class="xiey">
					<view class="yuan" v-if="agree==false" @click="agree=true"></view>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/utRg4QWBaHX4RO3tgZQW" mode=""  v-if="agree"  @click="agree=false"></image>
					<view class="txt3" style="margin-left: 6rpx;">
						已阅读并同意
					</view>
					<view class="txt4">
						<span @click="toWord(0)">《电动车租赁用户协议》</span> <span @click="toWord(1)">《享权须知》</span>
					</view>
				</view>
				<view class="price_box">
					<view class="price">
						￥<span>{{ priceInfo.totalFee? priceInfo.totalFee : '--' }}</span>
					</view>
					<view class="mx" @click="showmx=true">
						明细 <view class="iconfont icon-xiangxia">
							<!-- <view class="iconfont icon-xiangshang"> -->
						</view>
					</view>
					<view class="btn" @click="sub">
						去支付
					</view>
				</view>
			</view>
		</view>

		<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" start-year="2024"
			:default-time="pickertime" start="2024"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeidx: 0,
				height: 0,
				showtips: false,
				modelId: '',
				storeId: '',
				modelInfo: {},
				storeInfo: {},
				agentInfo: {},
				priceList: [],
				deliveryMethod: 1,
				time1: false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				time: "",
				gps: {},
				km: '',
				startDate: '',
				pickertime: '',
				priceIndex: 0,
				chosePriceInfo: {},
				timenum: 1,
				priceInfo: {},
				showmx: false,
				address: '',
				addlon: null,
				addlat: null,
				agree:false

			}
		},
		onLoad(e) {
			if (e) {
				this.modelId = e.modelId
				this.storeId = e.storeId

			}

			console.log(e, 'eee');
		},
		onShow() {
			// this.getToken()
			let that = this
			uni.getLocation({
				type: 'gcj02',
				success: function(lb) {

					that.gps.latitude = lb.latitude;
					that.gps.longitude = lb.longitude;
					that.getKm()
				},
				fail: function(error) {
					uni.showToast({
						title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
						icon: 'none',
						duration: 2000
					});
					// that.getmarks()
					// 在这里处理获取位置信息失败的情况
				}

			})
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.getcar').boundingClientRect(data => {

					this.height = data.height + 45
					console.log('ips_box height:', this.height);
				}).exec();
			}, 300);
			this.calculateDistance(0);
			this.getmodelInfo()
			this.getstoreInfo()

			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1; // 月份从0开始，因此加1
			const day = now.getDate();

			// 设置一个小时后的时间
			let hour = now.getHours() + 1;
			let nextDay = day;
			let nextMonth = month;

			// 如果 hour 超过 23，调整日期
			if (hour >= 24) {
				hour = 0;
				nextDay += 1;

				// 获取当前月份的天数
				const daysInMonth = new Date(year, month, 0).getDate();
				if (nextDay > daysInMonth) {
					nextDay = 1;
					nextMonth += 1;

					// 如果超过12月，调整到下一年
					if (nextMonth > 12) {
						nextMonth = 1;
					}
				}
			}
			const minute = 0;
			// 格式化为 MM-DD 的字符串
			this.startDate =
				`${nextMonth < 10 ? '0' : ''}${nextMonth}-${nextDay < 10 ? '0' : ''}${nextDay} ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}`;
			// 设置时间为当前年份、月份、日期、一个小时后的时间，分钟为 00，格式为 YYYY年MM月DD日 HH:mm
			this.time =
				`${year}年${nextMonth < 10 ? '0' : ''}${nextMonth}月${nextDay < 10 ? '0' : ''}${nextDay}日 ${hour < 10 ? '0' : ''}${hour}:${minute < 10 ? '0' : ''}${minute}`;
			// 初始化 pickertime 为当天的默认日期
			this.pickertime = this.startDate;

			console.log('startDate:', this.startDate);
			console.log('time:', this.time);

		},

		methods: {
			handleClick() {
				if (!this.address) {
					this.getMapLocation();
				}
			},
			handleInputClick(event) {
				if (!this.address) {
					// 阻止输入框默认行为，避免在 address 为空时进行输入
					event.stopPropagation();
					this.getMapLocation();
				}
			},
			sub() {
				if(this.paid){
					 return; // 阻止后续代码执行
				}
				if (this.agree==false) {
				    uni.showToast({
				        title: '请勾选协议',
				        icon: 'none',
				        duration: 2000
				    });
				    return; // 阻止后续代码执行
				}
			    let data = {
			        modelId: this.modelId,
			        ruleId: this.chosePriceInfo.ruleId,
			        agentId: this.agentInfo.agentId,
			        num: this.timenum,
			        address: this.address,
			        pickupLon: this.addlon,
			        pickupLat: this.addlat,
			        storeId: this.storeId,
					type:1
			    };
			
			    let timeStr = this.time.replace('年', '-').replace('月', '-').replace('日', '').trim() + ':00';
			    data.pickupTime = timeStr;
			
			    if (this.typeidx == 0) {
					if (!this.address || !this.addlat || !this.addlon) {
					    uni.showToast({
					        title: '请选择地图位置',
					        icon: 'none',
					        duration: 2000
					    });
					    return; // 阻止后续代码执行
					}
			        if (this.agentInfo.isFreeCar) {
			            data.deliveryMethod = 2;
			        } else {
			            data.deliveryMethod = 3;
			        }
					
			    } else {
			        data.deliveryMethod = 1;
			
			        // 当 typeidx 为 1 时，检查 address、addlat 和 addlon 是否有值
			       
			    }
			
			    this.$u.post(`appVerify/createOrder`, data).then((res) => {
			        if (res.code == 200) {
						uni.showLoading({
							title:'加载中'
						})
						this.paid=true
						console.log(res);
						// this.freList=res.rows
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.response.timeStamp,
							nonceStr: res.data.response.nonceStr,
							package: res.data.response.packageVal,
							signType: res.data.response.signType,
							paySign: res.data.response.paySign,
							success(res) {
								// that.ispaid = false
								// console.log('支付成功');
								// // 支付成功逻辑
								// clearInterval(that.timer)
								// that.orderinfo = {}
								// that.showdevice = false
								// that.deviceIndex = 0
								uni.hideLoading()
								uni.redirectTo({
									url:'/page_user/user_order?orderNo='+res.data.orderNo
								})
						
							},
							fail(err) {
								// that.ispaid = false
								console.log(res);
								// 支付失败逻辑
								// uni.showToast({
								// 	title: '支付失败',
								// 	icon: 'none',
								// 	duration: 1000
								// });
								uni.hideLoading()
									uni.redirectTo({
										url:'/page_user/user_order?orderNo='+res.data.orderNo
									})
								// setTimeout(()=>{
								
								// },1100)
							}
						});
			            // 成功处理逻辑
			        } else {
			            uni.showToast({
			                title: res.msg,
			                icon: 'none',
			                duration: 2000
			            });
			        }
			    });
			},
			backDedu(info) {
				if (info == 0) {
					return '免费取消'
				} else {
					return '扣费' + info * 100 + '%'
				}
			},
			getToken() {
				this.$u.post(`/getToken`).then((res) => {
					if (res.code == 200) {


					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			toWord(num) {
				if (num == 1) {

				} else {

				}
				uni.navigateTo({
					url: '/page_user/word?id=' + 9
				})
			},
			getMapLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.address = res.address
						this.addlon = res.longitude
						this.addlat = res.latitude
						// this.getRegionFn(res);
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	console
																		.log(
																			"详细地址",
																			res
																		);
																	// this.getRegionFn(res);
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},

			mapFun() {
				console.log('点击了');
				uni.openLocation({
					latitude: this.storeInfo.lat,
					//纬度 - 目的地/坐标点
					longitude: this.storeInfo.lng,
					//经度 - 目的地/坐标点
					// name: "荆门市",
					address: this.storeInfo.simpleAddress
				});
			},
			backTime() {
				if (this.chosePriceInfo.rentalUnit) {
					// 将 this.time 转换为 Date 对象
					const timeParts = this.time.match(/(\d{4})年(\d{2})月(\d{2})日 (\d{2}):(\d{2})/);
					const startTime = new Date(
						`${timeParts[1]}-${timeParts[2]}-${timeParts[3]}T${timeParts[4]}:${timeParts[5]}`);

					// 确定要增加的时间单位
					let multiplier = this.timenum;
					switch (this.chosePriceInfo.rentalUnit) {
						case 'hour':
							startTime.setHours(startTime.getHours() + multiplier);
							break;
						case 'day':
							startTime.setDate(startTime.getDate() + multiplier);
							break;
						case 'week':
							startTime.setDate(startTime.getDate() + multiplier * 7);
							break;
						case 'month':
							startTime.setMonth(startTime.getMonth() + multiplier);
							break;
						case 'quarter':
							startTime.setMonth(startTime.getMonth() + multiplier * 3);
							break;
						case 'year':
							startTime.setFullYear(startTime.getFullYear() + multiplier);
							break;
						default:
							console.error('Unknown rental unit:', this.chosePriceInfo.rentalUnit);
					}

					// 格式化返回时间
					const year = startTime.getFullYear();
					const month = (startTime.getMonth() + 1).toString().padStart(2, '0');
					const day = startTime.getDate().toString().padStart(2, '0');
					const hours = startTime.getHours().toString().padStart(2, '0');
					const minutes = startTime.getMinutes().toString().padStart(2, '0');

					// 返回归还时间
					return `${year}年${month}月${day}日 ${hours}:${minutes}`;
				}

			},
			getPrice() {

				let data = {
					modelId: this.modelId,

					ruleId: this.chosePriceInfo.ruleId,
					agentId: this.agentInfo.agentId,
					num: this.timenum
				}

				if (this.typeidx == 0) {
					if (this.agentInfo.isFreeCar) {
						data.deliveryMethod = 2
					} else {
						data.deliveryMethod = 1
					}
				} else {
					data.deliveryMethod = 3
				}

				this.$u.post(`app/calculatePrice`, data).then((res) => {
					if (res.code == 200) {
						this.priceInfo = res.data

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			addnum() {
				this.timenum++
				this.getPrice()
			},
			subtractnum() {
				if (this.timenum > 1) {
					this.timenum--;
					this.getPrice()
				}
			},
			changePrice(item, idx) {
				this.chosePriceInfo = item
				this.priceIndex = idx
				this.getPrice()
			},
			confirm1(selectedDate) {
				// 将用户选择的日期和当前日期进行比较
				// 从回调中获取选择的月份、日期、小时和分钟
				const selectedMonth = parseInt(selectedDate.month, 10);
				const selectedDay = parseInt(selectedDate.day, 10);
				const selectedHour = selectedDate.hour;
				const selectedMinute = selectedDate.minute;

				// 获取当前日期
				const now = new Date();
				const currentYear = now.getFullYear();
				const currentMonth = now.getMonth();
				const currentDay = now.getDate();

				// 比较选择的日期和当前日期
				if (selectedMonth < currentMonth || (selectedMonth === currentMonth && selectedDay < currentDay)) {
					// 如果选择的日期比当前日期早，则重置为当前日期时间
					const month = currentMonth < 10 ? `${currentMonth}` : currentMonth;
					const day = currentDay < 10 ? `${currentDay}` : currentDay;
					const hour = now.getHours() < 10 ? `${now.getHours()}` : now.getHours();
					const minute = now.getMinutes() < 10 ? `${now.getMinutes()}` : now.getMinutes();

					this.time = `${currentYear}年${month}月${day}日 ${hour}:${minute}`;

					uni.showToast({
						title: '选择的日期不能小于当前日期',
						icon: 'none',
						duration: 2000
					});
				} else {
					// 否则，设置为用户选择的日期和时间
					const month = selectedMonth < 10 ? `${selectedMonth}` : selectedMonth;
					const day = selectedDay < 10 ? `${selectedDay}` : selectedDay;
					const hour = selectedHour < 10 ? `${selectedHour}` : selectedHour;
					const minute = selectedMinute < 10 ? `${selectedMinute}` : selectedMinute;

					this.time = `${currentYear}年${month}月${day}日 ${hour}:${minute}`;
				}
				console.log(this.time);
			},
			getKm() {
				let data = {
					lon: this.gps.longitude,
					lat: this.gps.latitude,
					storeId: this.storeId

				}
				this.$u.get(`app/computeDistance?`, data).then((res) => {
					if (res.code == 200) {

						let distance = res.data; // 获取返回的距离

						// 判断距离单位，如果小于1000米则显示米，大于等于1000米则显示千米
						if (distance < 1000) {
							this.km = `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm'
						} else {
							this.km = `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			timetype(time) {
				if (time == 'hour') {
					return '小时'
				} else if (time == 'day') {
					return '天'
				} else if (time == 'week') {
					return '周'
				} else if (time == 'month') {
					return '月'
				} else if (time == 'quarter') {
					return '季度'
				} else if (time == 'year') {
					return '年'
				}
			},
			changeType(num) {
				this.typeidx = num
				this.$nextTick(() => {
					this.calculateDistance(num);
				});

			},
			getpriceList() {
				let data = {
					modelId: this.modelId

				}
				this.$u.get(`app/getRuleByModelId?`, data).then((res) => {
					if (res.code == 200) {
						this.priceList = res.data;
						this.chosePriceInfo = this.priceList[0]
						setTimeout(() => {
							this.getPrice()
						}, 300)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getmodelInfo() {
				let data = {
					modelId: this.modelId
				}
				this.$u.get(`app/getModelById?`, data).then((res) => {
					if (res.code == 200) {
						this.modelInfo = res.data
						this.getpriceList()
						this.getAgent()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getAgent() {
				let data = {
					agentId: this.modelInfo.agentId

				}
				this.$u.get(`app/getAgentByAgentId?`, data).then((res) => {
					if (res.code == 200) {
						this.agentInfo = res.data;

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getstoreInfo() {
				let data = {
					storeId: this.storeId
				}
				this.$u.get(`app/getStore?`, data).then((res) => {
					if (res.code == 200) {
						this.storeInfo = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			calculateDistance(num) {
				if (num == 0) {
					console.log('00');
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);

						query.select('#startType').boundingClientRect(startRect => {
							if (!startRect) {
								// console.error('#startType element not found');
								return;
							}

							query.select('#endType').boundingClientRect(endRect => {
								if (!endRect) {
									// console.error('#endType element not found');
									return;
								}

								this.height = endRect.top - startRect.bottom;
							}).exec();

						}).exec();
					}, 100);
				} else {
					console.log('11');
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);

						query.select('#startType1').boundingClientRect(startRect => {
							if (!startRect) {
								// console.error('#startType1 element not found');
								return;
							}

							query.select('#endType1').boundingClientRect(endRect => {
								if (!endRect) {
									// console.error('#endType1 element not found');
									return;
								}

								this.height = endRect.top - startRect.bottom;
							}).exec();

						}).exec();
					}, 100);
				}

			}
		}
	}
</script>

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

	.page {
		width: 750rpx;
		padding-bottom: 220rpx;

		.tips_box {
			padding: 48rpx 30rpx;
			position: fixed;
			left: 82rpx;
			top: 410rpx;
			width: 590rpx;
			// height: 282rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			z-index: 110;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.tit {
				font-weight: 600;
				font-size: 40rpx;
				color: #3D3D3D;
			}

			.txt {
				margin-top: 32rpx;
				width: 506rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}

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

		.sub_box {
			position: fixed;

			bottom: 0;

			.detail {
				position: relative;
				width: 750rpx;
				padding: 36rpx;
				border-radius: 30rpx 30rpx 0 0;
				background: #fff;


				.tit {


					width: 100%;
					text-align: center;
					font-weight: 600;
					font-size: 40rpx;
					color: #3D3D3D;

				}

				.close {
					position: absolute;
					right: 36rpx;
					top: 36rpx;
					width: 34rpx;
					height: 34rpx;
				}

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

					.txt5 {
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}
			}

			.bot_box {
				padding: 28rpx;
				width: 750rpx;
				height: 198rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.price_box {
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.price {
						font-weight: 500;
						font-size: 36rpx;
						color: #FF1C1C;

						span {
							font-weight: 600;
							font-size: 52rpx;
						}
					}

					.mx {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						margin-left: 32rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #4297F3;

						.icon-xiangxia {
							font-weight: 600;
							font-size: 20rpx;
						}
					}

					.btn {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: auto;
						width: 340rpx;
						height: 84rpx;
						background: #4297F3;
						border-radius: 42rpx 42rpx 42rpx 42rpx;
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
					}
				}

				.xiey {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.yuan {
						width: 32rpx;
						height: 32rpx;
						border: 1rpx solid #3D3D3D;
						border-radius: 50%;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.txt3,
					.txt4 {
						font-weight: 400;
						font-size: 28rpx;
						white-space: nowrap; // 防止换行
					}

					.txt3 {
						color: #3D3D3D;
					}

					.txt4 {
						color: #4297F3;
					}
				}
			}



		}

		.tabble_box {
			width: 698rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 18rpx 24rpx;

			border-radius: 30rpx;
			background: #FFFFFF;

			.tit {
				width: 100%;
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.txt2 {
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.tabble {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.tabble_top {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;

					.tabbl_left {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 93rpx;
						background: #D8D8D8;
						border-radius: 30rpx 0 0 0;
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
						border-right: 1rpx solid #fff;
						border-bottom: 1rpx solid #fff;
					}

					.tabble_right {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 93rpx;
						background: #D8D8D8;
						border-radius: 0 30rpx 0 0;
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
						border-bottom: 1rpx solid #fff;
					}

				}

				.tabble_cont:last-child {
					.tabbl_left {
						border-radius: 0 0 0 30rpx;
					}

					.tabble_right {
						border-radius: 0 0 30rpx 0;
					}
				}

				.tabble_cont {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;

					.tabbl_left {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 93rpx;
						background: #EFEFEF;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
						border-right: 1rpx solid #fff;
						border-bottom: 1rpx solid #fff;
					}

					.tabble_right {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 93rpx;
						background: #EFEFEF;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
						border-bottom: 1rpx solid #fff;
					}

				}
			}
		
		}

		.insurance_box {
			position: relative;
			width: 698rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 18rpx 24rpx;

			border-radius: 30rpx;
			background: #FFFFFF;

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

			.choose_insurance_box {
				margin-top: 26rpx;
				display: flex;
				flex-wrap: nowrap; // 确保子元素在一行内排列

				overflow-x: auto; // 启用水平滚动条
				white-space: nowrap; // 确保子元素不换行

				.insurance_li {
					margin-right: 14rpx;
					width: 280rpx;
					height: 607rpx;
					background: #F6F6F6;
					border-radius: 20rpx;
					flex-shrink: 0; // 防止子元素缩小，确保宽度固定
				}
			}

			.info {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;

					.txt1 {
						margin-left: 12rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #0D75E5;
					}
				}

				.right_txt {
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}

			.backcolor {
				position: absolute;
				left: 0;
				top: 0;
				width: 698rpx;
				height: 102rpx;
				border-radius: 30rpx 30rpx 0 0;
				background: linear-gradient(180deg, rgba(158, 250, 174, 0.38) 0%, rgba(149, 244, 165, 0) 100%);
				// z-index: 0;
			}

			.tit_box {
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 28rpx;
				color: #16BC32;

				.txt {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #16BC32;
				}
			}
		}

		.yj_box {
			width: 698rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 18rpx 24rpx;

			border-radius: 30rpx;
			background: #FFFFFF;

			.tipstxt {
				margin-top: 18rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #808080;
			}

			.tip_box {
				margin-top: 22rpx;
				width: 100%;
				padding: 30rpx 34rpx;
				background: #EFFDF4;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				.tops {
					display: flex;
					align-items: center;
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;

					image {
						margin-right: 4rpx;
						width: 42rpx;
						height: 42rpx;
					}
				}

				.words {
					margin-top: 14rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}

			.txt_box {
				margin-top: 14rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

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

			.yj_line {
				margin-top: 50rpx;
				padding: 0 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.yuan {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 108rpx;
					height: 42rpx;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					border: 1rpx solid #808080;
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
				}

				.line {
					flex-grow: 1;
					height: 1rpx;
					border-bottom: 1rpx dashed #80808080;
				}
			}

			.top_txt {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;

				.txts {
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.tips_btn {
					// width: 100%;
					display: flex;
					align-items: center;

					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;

					.icon-xiangyou1 {
						font-size: 20rpx;
						color: #3D3D3D;
					}
				}
			}
		}

		.time_card {
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 18rpx 24rpx;
			width: 698rpx;
			border-radius: 30rpx;
			background: #FFFFFF;

			.num_box {
				margin-top: 40rpx;
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;

				.lefttxt {
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.right {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

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

					.choosnum {
						margin-left: 22rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;

						.left {
							display: flex;

							align-items: center;
							justify-content: center;
							width: 65rpx;
							height: 56rpx;
							border: 2rpx solid #808080;
							border-radius: 30rpx 0 0 30rpx;

							image {
								width: 22rpx;
								height: 22rpx;
							}
						}

						.cont {
							display: flex;

							align-items: center;
							justify-content: center;
							width: 99rpx;
							height: 56rpx;
							border-bottom: 2rpx solid #808080;
							border-top: 2rpx solid #808080;

						}

						.right {
							display: flex;

							align-items: center;
							justify-content: center;
							width: 65rpx;
							height: 56rpx;
							border: 2rpx solid #808080;
							border-radius: 0rpx 30rpx 30rpx 0;

							image {
								width: 22rpx;
								height: 22rpx;
							}
						}

					}
				}

			}

			.tit {
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}

			.choose_box {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 12rpx;

				.choose_li:nth-child(4n) {
					margin-right: 0;
				}

				.choose_li {
					margin-top: 16rpx;
					margin-right: 14rpx;
					position: relative;
					// display: flex;
					// flex-wrap: wrap;
					// align-items: center;
					// justify-content: center;
					width: 150rpx;
					height: 150rpx;
					background: #F0F5F6;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					padding-top: 20rpx;
					border: 2rpx solid #fff;

					.time {

						width: 100%;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.price {
						width: 100%;
						text-align: center;
						font-weight: 400;
						font-size: 32rpx;
						color: #FF1C1C;

						span {
							font-size: 44rpx;
							font-weight: 600;
						}
					}

					.hot {
						position: absolute;
						left: 0;
						bottom: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #CCE5FF;
						width: 100%;
						height: 35rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #4297F3;
						border-radius: 0 0 12rpx 12rpx;
					}
				}

				.act1 {
					border: 2rpx solid #4297F3;
					background: #DCEDFF;
				}
			}
		}

		.tab-container {
			display: flex;
			border-bottom: 2px solid #ddd;
			/* 底部边框 */
		}

		.tab-item {
			position: relative;
			padding: 10px 20px;
			cursor: pointer;
			color: #666;
			font-size: 16px;
		}

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

		.tab-item.active::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 100%;
			height: 4px;
			background-color: #2e9afe;
			/* 下划线颜色 */
			border-radius: 50px;
			/* 圆角效果，模拟弧线 */
		}

		.delivery_cont {
			width: 696rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			// height: 488rpx;

			// background: #FFFFFF;
			.delivery_info {
				width: 100%;
				background: #fff;
				padding: 30rpx 20rpx;
				border-radius: 0 0 30rpx 30rpx;

				@mixin same-height-as-getcar {
					height: 100%; // 设置为 getcar 高度
				}

				.type1 {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					position: relative;

					.lins {
						position: absolute;
						left: 30rpx;
						top: 46rpx;
						flex-grow: 1;
						width: 2rpx;

						border-left: 1rpx dashed #D8D8D8;

					}

					.maps {
						z-index: 100;
						position: absolute;
						right: 0;
						top: 100rpx;
						width: 166rpx;
						height: 166rpx;
						background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiIqqyZ7lKmwHShwdb7e');
						background-size: cover;
						/* 背景图片等比缩放以覆盖整个容器 */
						background-position: center;

						image {

							position: absolute;
							right: 0;
							top: 30rpx;
							width: 96rpx;
							height: 98rpx;
						}
					}

					.getcar {
						display: flex;
						flex-wrap: wrap;
						z-index: 10;

						.li {
							margin-top: 8rpx;
							display: flex;
							flex-wrap: nowrap;

							.input {
								width: 510rpx;
							}

							image {
								margin-left: 6rpx;
								width: 32rpx;
								height: 32rpx;
							}

							.type {

								display: flex;
								align-items: center;
								justify-content: center;
								width: 68rpx;
								height: 40rpx;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								border: 2rpx solid #4297F3;
								font-weight: 500;
								font-size: 24rpx;
								color: #4297F3;
							}

							.txt {

								margin-left: 18rpx;
								font-weight: 600;
								font-size: 32rpx;
								color: #3D3D3D;
							}

							.types {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 68rpx;
								height: 40rpx;
								background: #DCEDFF;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-weight: 500;
								font-size: 20rpx;
								color: #4297F3;

							}

							.backtype {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 68rpx;
								height: 40rpx;
								font-weight: 500;
								font-size: 24rpx;
								color: #16BC32;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								border: 2rpx solid #16BC32;
							}

							.tips {

								margin-left: 18rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #4297F3;
							}
						}

					}
				}
			}

			.delivery_top {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;

				.delivery_left {
					width: 50%;
					height: 100rpx;
					background: #EEEEEE;
					border-radius: 60rpx 0 0 0;

					.cont {
						position: relative;
						padding-top: 26rpx;
						text-align: center;
						width: 100%;
						background: #fff;
						height: 100%;
						border-radius: 60rpx 60rpx 0 0;

						font-weight: 600;
						font-size: 40rpx;
						color: #3D3D3D;

						image {
							position: absolute;
							bottom: 0;
							width: 92rpx;
							height: 16rpx;
							left: 114rpx;
						}
					}
				}



				.delivery_right {
					width: 50%;
					height: 100rpx;
					background: #fff;
					border-radius: 0rpx 60rpx 0 0rpx;

					.cont {
						position: relative;
						flex-wrap: wrap;
						padding-top: 26rpx;
						text-align: center;
						width: 100%;
						background: #eee;
						height: 100%;
						border-radius: 0rpx 60rpx 0 60rpx;
						font-weight: 600;
						font-size: 36rpx;
						color: #808080;

						image {
							position: absolute;
							bottom: 0;
							width: 92rpx;
							height: 16rpx;
							left: 114rpx;
						}
					}
				}


				.leftact {
					background: #fff;
					border-radius: 60rpx 0 0 0;

					.cont {
						width: 100%;
						background: #eee;
						height: 100%;
						border-radius: 60rpx 0 60rpx 0;
						color: #808080;

					}
				}

				.rightact {
					background: #eee;
					border-radius: 0 60rpx 0 0;

					.cont {
						width: 100%;
						background: #fff;
						height: 100%;
						border-radius: 60rpx 60rpx 0 0;
						color: #808080;
					}
				}
			}
		}

		.car_info {
			margin: 0 auto;
			margin-top: -200rpx;
			width: 698rpx;
			height: 196rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;

			.left {
				.name {
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}

				.car_type_li {
					margin-top: 16rpx;
					display: flex;

					.type {
						margin-right: 12rpx;
						padding: 4rpx 10rpx;
						background: #DCEDFF;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #4297F3;
					}

				}
			}

			image {
				width: 156rpx;
				height: 150rpx;
			}
		}




		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}

		.backimg {

			// position: fixed;


			z-index: -10;
			width: 750rpx;
			height: 428rpx;
			background: linear-gradient(180deg, #CCE5FF 0%, rgba(204, 229, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

		}
	}
</style>