<template>
	<view class="page">

		<u-navbar ref="navbar" title="租车" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="cont">
			<u-mask :show="showchoose" :z-index='100' />
			<view class="ips_box">
				<view class="ipt">
					<view class="left">
						<view class="txt1">
							{{addressInfo}}
						</view>
						<view class="txt">
							|{{time}} 取车|
						</view>
						<view class="txt">
							{{dataInfo.dictLabel}}
						</view>
					</view>
					<view class="right" @click="showchoose=true">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uukFtL3r4DCAYPcUPsK0" mode=""></image>
					</view>
				</view>
			</view>
			<!-- <view class="price_sele">
				<view class="words">
					宁德
					<view class="iconfont icon-xiangxia1">

					</view>
				</view>
				<view class="choose_cont" v-if="false">
					<view class="tit">
						还取方式
					</view>
					<view class="type_box">
						<view class="type_li">
							免费送取车
						</view>
						<view class="type_li act1">
							免费送取车
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uBvr7JGCkY1jWLT0pzIc" mode="">
							</image>
						</view>
					</view>
					<view class="tit" style="margin-top: 42rpx;">
						送取车距离
					</view>
					<view class="type_box">
						<view class="type_li">
							免费送取车
						</view>
						<view class="type_li act1">
							免费送取车
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uBvr7JGCkY1jWLT0pzIc" mode="">
							</image>
						</view>
					</view>
					<view class="tit" style="margin-top: 42rpx;">
						日均价
					</view>
					<view class="type_box">
						<view class="type_li">
							免费送取车
						</view>
						<view class="type_li act1">
							免费送取车
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uBvr7JGCkY1jWLT0pzIc" mode="">
							</image>
						</view>
					</view>
					<view class="btn_box">
						<view class="btn1">
							清除
						</view>
						<view class="btn2">
							完成
						</view>
					</view>
				</view>

			</view>
 -->

			<view class="choose_card" v-if="showchoose">

				<view class="area_li">
					<view class="city" @click="showCity()">
						<view class="txt">
							取车城市
						</view>
						<view class="words" style="white-space: nowrap;">
							{{cityList[0].cityName}}
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
							</image>
						</view>
					</view>
					<view class="area" @click="getMapLocation()" style="white-space: nowrap;">
						<view class="top">
							<view class="txt">
								取车地点
							</view>
							<view class="type">
								距最近店铺  {{returnKm(shopList[0])}}
							</view>
						</view>
						<view class="bot">
							<view class="txt3">
								{{addressInfo}}
							</view>

							<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
							</image>
						</view>
					</view>
					<view class="dingw" style="white-space: nowrap;" @click="getaddress()">
						当前位置
						<image src="https://lxnapi.ccttiot.com/bike/img/static/unTHfCN5IgnVKDbadsFp" mode=""></image>
					</view>
				</view>
				<view class="time_box">
					<view class="time_li">
						<view class="txt">
							取车时间
						</view>
						<view class="words" @click="time1=true">
							{{time}}
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
							</image>
						</view>
					</view>
					<view class="time_li">
						<view class="txt">
							选择租车周期
						</view>
						<view class="words" @click="showdata=true">
							{{dataInfo.dictLabel}}
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="btn_li">
					<view class="btns" @click="showchoose=false">
						关闭
					</view>
					<view class="btn" @click="tosele()">

						确定
					</view>
				</view>


			</view>


			<!-- <image class="kefu" src="https://lxnapi.ccttiot.com/bike/img/static/u8osHvZfHL7u3lbveVXx" mode=""></image> -->
			<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
				@labeltap="handleMarkerTap" :show-location="true" :markers="markers" :polygons="polyline">

			</map>

			<view class="bot_cont">
				<view class="fresh" @click="getshopList">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u3HPoZMHrFlRW1vAwLDT" mode=""></image>
				</view>
				<view class="mini_store" v-if="shownormal==false">
					<view class="store_li" v-for="(item,index) in shopList" :key="index">
						<view class="store_top">
							<view class="store_name">
								{{item.name}}
							</view>
							<view class="img" @click="showKfs(item)">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/urOQKI1de3VSckSrotNW" mode="">
								</image>
							</view>
						</view>
						<view class="store_address">
							<view class="iconfont icon-ditufuwu">

							</view>{{returnKm(item)}} | {{item.simpleAddress}}
						</view>
						<view class="store_info">
							<view class="infos">
								<view class="info_li">
									<view class="data">
										<span>营业时间 |</span>{{item.businessTimeStart}} - {{item.businessTimeEnd}}
									</view>
									<view class="price">
										日均￥<span>{{item.bottomPrice}}</span>起
									</view>
								</view>
								<view class="info_li">
									<view class="type">
										免费送取车
									</view>
									<view class="num">
										{{item.rentalCar}}辆车可租
									</view>
								</view>
							</view>
							<view class="img" @click="shownm(item)">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/uagLIpV6ZNz0RCTEXKRB" mode="">
								</image>
							</view>
						</view>
						<view class="line"></view>
						<view class="car_li">
							<view class="car" @click="toStore(item)">
								<view class="imgs">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/ugqn6cdklXtHgERyLHMq"
										mode=""></image>
								</view>
								<view class="infos">
									<view class="info_top">
										{{item.models[0].description}}
									</view>
									<view class="price">
										日租 ￥{{item.models[0].price}}
									</view>
								</view>
							</view>
							<view class="lines"></view>
							<view class="car" v-if="item.models[1]" style="padding-left: 20rpx;">
								<view class="imgs">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/ugqn6cdklXtHgERyLHMq"
										mode=""></image>
								</view>
								<view class="infos">
									<view class="info_top">
									{{item.models[1].description}}
									</view>
									<view class="price">
										日租￥{{item.models[1].price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="normal_store" v-if="shownormal">
					<view class="store_info">
						<view class="top_info">
							<view class="name">
								{{choseStore.name}}
							</view>
							<view class="img" @click="showKfs(choseStore)">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/urOQKI1de3VSckSrotNW" mode="">
								</image>
							</view>
						</view>
						<view class="address">
							<view class="iconfont icon-ditufuwu">

							</view> {{returnKm(choseStore)}} | {{choseStore.simpleAddress}}
						</view>
						<view class="time">
							<span>营业时间 | </span> {{choseStore.businessTimeStart}} - {{choseStore.businessTimeEnd}}
						</view>
						<view class="types_box">
							<view class="type">
								免费送取车
							</view>
							<image src="https://lxnapi.ccttiot.com/bike/img/static/u7K3sepD0uVaDNdIlCuq" mode=""
								@click="shownormal=false"></image>
						</view>

					</view>
					<view class="card_box">
						<view class="card" v-for="(item,index) in choseStore.models" :key="index">
							<image :src="item.picture" mode="">
							</image>
							<view class="infos">
								<view class="name">
									{{item.model}}
								</view>
								<view class="cartool">
									手机开关锁 | 定位防盗
								</view>
								<view class="car_type_li">
									<view class="type" v-for="(items,indexs) in item.accessorys" :key="indexs">
										{{items.name}}
									</view>
								</view>
								<view class="price_box">
									<view class="left">
										剩余<span> {{item.rentalCar ? item.rentalCar : 0}} </span>辆
									</view>
									<view class="right">
										日租￥ <span>{{item.price}}</span>
										<view class="btn" @click="toOrdder(choseStore,item)" :style="{ background: item.rentalCar < 1 ? '#ccc' : ''}">
											立即租
										</view>
									</view>

								</view>
							</view>

						</view>
					</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 class="choosedata" v-if="showdata">
			<view class="tit">
				请选择租车周期
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uLzTHCbE6TTRPYj6rv8X" mode=""
					@click="closeData()"></image>
			</view>
			<view class="li" v-for="(item,index) in dataList" :key="index" :class="index == dataIndex? 'act':''"
				@click="chooseData(item,index)">
				{{item.dictLabel}}
			</view>

		</view>
		<u-mask :show="showkf" :z-index='100' />
		<view class="kfbox" v-if="showkf">
			<view class="tit">
				请选择您要联系的客服
			</view>
			<view class="words">
				我们根据选择为您提供服务
			</view>
			<view class="phone_box" @click="callPhone(AgentInfo.servicePhone)">
				<view class="img">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uwiRmed6Kz4OUJh00HBD" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						官方客服
					</view>
					<view class="phone">
						{{AgentInfo.servicePhone}}
					</view>
				</view>
			</view>
			<view class="phone_box" @click="callPhone(choosePhone.serverPhone)">
				<view class="img">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/unsZOLTPuYrpQKF8MpFt" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						门店客服
					</view>
					<view class="phone">
						{{choosePhone.serverPhone}}
					</view>
				</view>
			</view>
			<image class="close" src="https://lxnapi.ccttiot.com/bike/img/static/ulwJylk0JSmOdmU3FnnG" mode=""
				@click="showkf=false"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: '#fff'
				},
				sn: '',
				showchoose: false,
				CouponLists: [],
				hight: 0,
				latitude: null,
				longitude: null,
				isMap: false,
				zoomSize: 15,
				markers: [],
				polyline: [],
				polygons: [],
				showchoose: false,
				CouponLists: [],
				hight: 0,
				showkf: false,
				cityList: [],
				dataList: [],
				gps: {},
				cityInfo: {},
				cityIndex: -1,
				addressInfo: '',
				time1: false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				startTime: '',
				pickertime: '',
				time: '',
				showdata: false,
				dataIndex: 0,
				dataInfo: {},
				shopList: [],

				choosePhone: {},
				shownormal: false,
				choseStore: {},
				AgentInfo: {},
				chosenMarkerId: null,

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

					this.hight = data.height + 45
					console.log('	 height:', this.hight);
				}).exec();


			});
			
		},
		onLoad(e) {
			let that = this
			uni.getLocation({
				type: 'gcj02',
				success: function(lb) {
			
					that.gps.latitude = lb.latitude;
					that.gps.longitude = lb.longitude;
					that.getCity()
			
					that.getaddress()
					that.getshopList()
				},
				fail: function(error) {
					uni.showToast({
						title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
						icon: 'none',
						duration: 2000
					});
					// that.getmarks()
					// 在这里处理获取位置信息失败的情况
				}
			
			})
			// 获取当前日期，并设置startDate和pickertime
			const now = new Date();
			const month = now.getMonth() + 1; // 月份从0开始，因此加1
			const day = now.getDate();
			
			// 格式化为 MM-DD 的字符串
			this.startDate = `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
			this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`;
			// 初始化pickertime为当天的默认日期
			this.pickertime = this.startDate;
			
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.ips_box').boundingClientRect(data => {
			
					this.hight = data.height + 45
					console.log('ips_box height:', this.hight);
				}).exec();
			});
			console.log(e);
			if(e){
				this.dataIndex=e.index
				// this.dataInfo=
			}
			this.getcityList()
			this.getdata()
		},
		methods: {
			toOrdder(item,items){
				console.log(items,'toOrdder');
				
				if(items.rentalCar>0){
					console.log(items,'toOrdder');
					uni.navigateTo({
						url:'/page_user/ordder?storeId='+item.storeId+'&modelId='+items.modelId
					})
				}else{
					uni.showToast({
						title: '改车型已没货，请查看其他车型',
						icon: 'none',
						duration: 2000
					});
				}
			},
			toStore(item){
				console.log(item,'itemitemitem');
				uni.navigateTo({
					url:'/page_user/carStore?storeId='+item.storeId
				})
			},
			getMapLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.addressInfo=res.name
						// 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
								})
							}
						})
					}
				});
			},
			handleMarkerTap(event) {
				console.log('点击了');
				// 获取被点击的标记 id
				const markerId = event.detail.markerId;

				// 查找对应的标记信息
				const clickedMarker = this.markers.find(marker => marker.id === markerId);

				if (clickedMarker) {
					console.log('Clicked Marker:', clickedMarker);
					this.shownormal = true;

					// 根据 clickedMarker.id 查找 this.shopList 中对应的 storeId
					const matchedStore = this.shopList.find(store => store.storeId === clickedMarker.id);

					// 如果找到了匹配的 storeId，则将值赋给 this.choseStore
					if (matchedStore) {
						this.choseStore = matchedStore; // 或者你想要的具体字段，如 matchedStore.someField
					} else {
						console.log('未找到匹配的商店');
					}

					// 更新标记样式
					this.markers = this.markers.map(marker => {
						// 恢复之前高亮的标记颜色
						if (this.chosenMarkerId !== null && marker.id === this.chosenMarkerId) {
							return {
								...marker,
								label: {
									...marker.label,
									bgColor: '#4297F3', // 恢复默认背景色
									color: '#FFFFFF', // 恢复默认文字颜色
									borderColor: '#FFFFFF', // 恢复默认边框颜色
								}
							};
						}

						// 更新当前点击的标记
						if (marker.id === markerId) {
							return {
								...marker,
								label: {
									...marker.label,
									bgColor: '#FFFFFF', // 点击后的背景色
									color: '#4297F3', // 点击后的文字颜色
									borderColor: '#4297F3', // 点击后的边框颜色
								}
							};
						}

						return marker; // 不改变其他标记
					});

					// 更新当前高亮的标记 ID
					this.chosenMarkerId = markerId; // 记录当前点击的标记 ID

					// 刷新视图
					this.$forceUpdate();
				}
			},
			shownm(item) {
				this.shownormal = true
				this.choseStore = item
			},
			showKfs(item) {
				console.log('点击了');
				this.choosePhone = item
				this.showkf = true

			},
			returnKm(item) {
				let distance = item.distance
				if (distance < 1000) {
					return `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm'
				} else {
					return `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数
				}
			},
			getAgent() {
				let data = {
					// phoneLon:this.gps.latitude,
					cityId: this.cityInfo.cityId,

				}
				this.$u.get(`/app/getAgentByCityId?`, data).then((res) => {
					if (res.code == 200) {
						this.AgentInfo = res.data
						this.latitude = Number(this.AgentInfo.latitude);
						this.longitude = Number(this.AgentInfo.longitude);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getshopList() {
				let that=this
				uni.getLocation({
					type: 'gcj02',
					success: function(lb) {
					
						
						let data = {
							// phoneLon:this.gps.latitude,
							phoneLon: lb.longitude,
							// phoneLat:this.gps.longitude,
							phoneLat: lb.latitude,
							isFreeCar: true
						}
						that.$u.post(`app/getStoreListByLocation`, data).then((res) => {
							if (res.code == 200) {
								that.shopList = res.data;
								that.shopList.forEach(item => {
									that.markers.push({
										id: parseFloat(item.storeId),
										latitude: parseFloat(item.lat),
										longitude: parseFloat(item.lng),
										width: 5,
										height: 5,
										iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uzNZFrhZypy1CdYMHlhi',
										label: {
											content: '￥69 起', // 修改为你想要显示的文字内容
											color: '#fff', // 文字颜色
											fontSize: 12, // 文字大小
											borderRadius: 16, // 圆角
											bgColor: '#4297F3', // 背景颜色
											padding: 2, // 内边距
											borderWidth: 2, // 边框宽度
											borderColor: '#FFFFFF', // 边框颜色
											display: 'ALWAYS', // 一直显示
										},
									});
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						});
					},
					fail: function(error) {
						uni.showToast({
							title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
							icon: 'none',
							duration: 2000
						});
						// that.getmarks()
						// 在这里处理获取位置信息失败的情况
					}
				
				})
				
				
			},
			chooseData(item, index) {
				this.dataInfo = item
				this.dataIndex = index
				this.showdata=false
			},
			closeData() {
				this.showdata = false
			},
			confirm1(selectedDate) {
				// 将用户选择的日期和当前日期进行比较

				// 从回调中获取选择的月份和日期
				const selectedMonth = parseInt(selectedDate.month, 10);
				const selectedDay = parseInt(selectedDate.day, 10);

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

				// 比较选择的日期和当前日期
				if (selectedMonth < currentMonth || (selectedMonth === currentMonth && selectedDay < currentDay)) {
					// 如果选择的日期比当前日期早，则重置为pickertime
					const now = new Date();
					const month = now.getMonth() + 1; // 月份从0开始，因此加1
					const day = now.getDate();

					// 格式化为 MM-DD 的字符串

					this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`;
					uni.showToast({
						title: '选择的日期不能小于当前日期',
						icon: 'none',
						duration: 2000
					});
				} else {
					// 否则，设置为用户选择的日期
					this.time = `${selectedDate.month}月${selectedDate.day}日`;
				}
			},

			getaddress() {
				this.$u.get(`app/getAddress?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => {
					if (res.code == 200) {
						this.addressInfo = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			getCity() {
				this.$u.get(`app/getCity?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => {
					if (res.code == 200) {
						this.cityInfo = res.data;
						this.getAgent()
						// 假设 cityList 是一个包含城市信息的数组，并且 cityInfo 中有一个唯一标识字段，例如 cityName 或 cityId
						const index = this.cityList.findIndex(city => city.cityName === this.cityInfo.cityName);

						if (index !== -1) {
							this.cityIndex = index
							console.log('City found at index:', index);
							// 可以在这里对找到的索引进行其他处理
						} else {
							console.log('City not found in the list');
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			showCity() {

			},
			getdata() {

				this.$u.get("/app/getDictData?dictType=rl_rental_period").then((res) => {
					if (res.code == 200) {
						this.dataList = res.data
						if(this.dataIndex==0){
								this.dataInfo = this.dataList[0]
						}else{
							this.dataInfo= this.dataList[this.dataIndex]
						}
					
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});

					}
				});
			},
			getcityList() {

				this.$u.get("app/city/list").then((res) => {
					if (res.code == 200) {
						this.cityList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});

					}
				});
			},

		}
	}
</script>

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

	.page {
		width: 100%;
		position: relative;

		.kfbox {
			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;

			.close {
				position: relative;
				bottom: -124rpx;
				width: 60rpx;
				height: 60rpx;
			}

			.phone_box {
				margin-top: 32rpx;
				width: 528rpx;
				height: 144rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;

				.img {
					width: 86rpx;
					height: 86rpx;

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

				.info {
					display: flex;
					flex-wrap: wrap;
					margin-left: 34rpx;

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

					.phone {
						width: 100%;
						font-weight: 400;
						font-size: 32rpx;
						color: #3D3D3D;
					}
				}
			}

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

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

		.choosedata {
			padding: 46rpx 37rpx;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			// height: 757rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			z-index: 101;

			.tit {
				margin-bottom: 54rpx;
				position: relative;
				width: 100%;
				text-align: center;
				font-weight: 600;
				font-size: 40rpx;
				color: #3D3D3D;

				image {
					position: absolute;
					right: 36rpx;
					width: 52rpx;
					height: 52rpx;
				}
			}



			.li {
				margin-bottom: 24rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				width: 676rpx;
				height: 88rpx;
				background: #F7F7F7;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				border: 2rpx solid #fff;
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
			}

			.act {

				background: #DCEDFF;

				border: 2rpx solid #4297F3;
			}
		}


		.bot_cont {
			position: fixed;
			bottom: 0;
			width: 100%;

			.fresh {
				margin-left: 22rpx;
				width: 66rpx;
				height: 66rpx;
			}

			.normal_store {
				width: 100%;
				background: #fff;

				.card_box {
					.card {
						padding: 28rpx 36rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						border-bottom: 1rpx solid #808080;

						image {
							width: 172rpx;
							height: 132rpx;
						}

						.infos {
							width: 100%;
							margin-left: 30rpx;

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

							.cartool {
								margin-top: 16rpx;
								font-weight: 400;
								font-size: 24rpx;
								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;
								}

							}

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

								.left {
									font-weight: 400;
									font-size: 24rpx;
									color: #FF1C1C;

									span {
										font-size: 48rpx;
									}
								}

								.right {
									display: flex;
									flex-wrap: nowrap;
									align-items: center;
									margin-left: auto;
									font-weight: 400;
									font-size: 24rpx;
									color: #FF1C1C;

									span {
										font-size: 48rpx;
									}

									.btn {
										margin-left: 28rpx;
										display: flex;
										align-items: center;
										justify-content: center;
										width: 138rpx;
										height: 50rpx;
										background: #F14C4C;
										border-radius: 31rpx 31rpx 31rpx 31rpx;
										font-weight: 500;
										font-size: 24rpx;
										color: #FFFFFF;
									}
								}
							}
						}
					}
				}

				.store_info {
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					padding: 30rpx 28rpx;
					box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

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

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

						.img {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.address {
						margin-top: 12rpx;
						width: 100%;
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;

					}

					.time {
						width: 100%;
						margin-top: 8rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #3D3D3D;

						span {
							font-weight: 600;
						}
					}

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

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

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

				}
			}

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

			.mini_store {
				// width: 100%; // 确保 mini_store 宽度为100%占满可用空间
				margin-left: 22rpx;
				display: flex;
				flex-wrap: nowrap;
				margin-bottom: 28rpx;
				overflow-x: auto; // 添加水平滚动条
				// margin-bottom: 200rpx;
				white-space: nowrap; // 确保子元素不换行

				.store_li {
					padding: 24rpx;
					display: inline-block; // 确保元素水平排列
					min-width: 670rpx; // 使用 min-width 保证滑动效果
					height: 340rpx;
					background: #ffffff;
					// box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.3);
					border-radius: 22rpx;
					flex-shrink: 0; // 防止元素缩小
					margin-right: 10rpx; // 添加右侧间距

					.car_li {
						margin-top: 2rpx;
						display: flex;
						align-items: center;

						.car {
							display: flex;
							align-items: center;
							flex-wrap: nowrap;
							width: 49%;

							.imgs {
								width: 100rpx;
								height: 76rpx;
							}

							.infos {
								margin-left: 24rpx;

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

								.price {
									font-weight: 400;
									font-size: 24rpx;
									color: #3D3D3D;
								}
							}
						}

						.lines {
							height: 94rpx;
							width: 1rpx;
							background: #D8D8D8;
						}
					}

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

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

						.infos {
							margin-top: 8rpx;
							flex-grow: 1; // 让 .infos 占据剩余的宽度

							.info_li {
								display: flex;
								flex-wrap: nowrap;
								justify-content: space-between;

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

									span {
										font-weight: 600;
									}
								}

								.price {
									font-weight: 400;
									font-size: 24rpx;
									color: #FF1C1C;

									span {
										font-size: 36rpx;
									}
								}

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

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

						.img {
							margin-left: auto;
							margin-left: 16rpx;
							width: 48rpx;
							height: 48rpx;
						}
					}

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

						.store_name {
							font-weight: 600;
							font-size: 36rpx;
							color: #3D3D3D;
						}

						.img {
							width: 48rpx;
							height: 48rpx;
						}

					}

					.store_address {
						margin-top: 12rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;

						.icon-ditufuwu {

							margin-right: 6rpx;
						}
					}
				}
			}
		}

		.map {
			position: relative;
			width: 750rpx;
			height: 78vh;


		}

		.cont {
			position: relative;

			.price_sele {
				position: relative;

				width: 750rpx;
				background: #FFFFFF;

				.choose_cont {

					position: absolute;
					background: #fff;
					width: 750rpx;
					// height: 200rpx;
					// left: -58rpx;
					z-index: 100;
					padding-bottom: 40rpx;

					.tit {
						margin: 0 58rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.type_box {
						margin: 0 58rpx;
						display: flex;
						margin-top: 16rpx;

						.type_li {
							position: relative;
							margin-right: 10rpx;
							padding: 8rpx 16rpx;
							background: #F0F0F0;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #3D3D3D;

							image {
								position: absolute;
								right: 0;
								bottom: 0;
								width: 28rpx;
								height: 28rpx;
							}
						}

						.act1 {
							background: #DCEDFF;
							color: #4297F3;
						}
					}

					.btn_box {
						position: absolute;
						bottom: -140rpx;
						margin-top: 50rpx;
						width: 750rpx;
						height: 140rpx;
						background: #FFFFFF;
						box-shadow: 0rpx -2rpx 22rpx 0rpx rgba(0, 0, 0, 0.1);
						border-radius: 0 0 40rpx 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.btn1 {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 240rpx;
							height: 78rpx;
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							border: 2rpx solid #4297F3;
							font-weight: 400;
							font-size: 36rpx;
							color: #4297F3;
						}

						.btn2 {
							margin-left: 44rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 382rpx;
							height: 78rpx;
							background: #4297F3;
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							border: 2rpx solid #4297F3;
							font-weight: 400;
							font-size: 36rpx;
							color: #FFFFFF;
						}
					}
				}

				.words {
					padding: 18rpx 58rpx;
					display: flex;
					flex-wrap: nowrap;
					// margin-top: 6rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;

					.icon-xiangxia1 {
						margin-left: 4rpx;
						margin-top: 4px;
						font-size: 22rpx;
					}

				}

			}

			.ips_box {
				padding: 22rpx 38rpx;
				width: 750rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;

				.ipt {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 30rpx;
					width: 100%;
					background: #EFEFEF;
					border-radius: 39rpx 39rpx 39rpx 39rpx;

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

						.txt {
							font-weight: 400;
							font-size: 24rpx;
							color: #6F6F6F;
						}

						.txt1 {
							font-weight: 400;
							font-size: 24rpx;
							color: #6F6F6F;
							width: 252rpx;
							/* 设置宽度 */
							white-space: nowrap;
							/* 禁止文本换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}
					}

					.right {
						width: 32rpx;
						height: 32rpx;

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





			.choose_card {
				position: absolute;
				top: 0;
				padding-bottom: 28rpx;


				width: 750rpx;
				// height: 511rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				z-index: 100;

				.check {
					margin-bottom: 40rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					width: 676rpx;
					height: 96rpx;
					background-image: url('https://lxnapi.ccttiot.com/bike/img/static/u5r7QJyFfPruTi4VsXzV');
					background-size: cover;
					/* 背景图片等比缩放以覆盖整个容器 */
					background-position: center;

					.txt1 {
						width: 50%;
						text-align: center;
						font-weight: 600;
						font-size: 40rpx;
						color: #3D3D3D;
					}

					.txt2 {
						width: 50%;
						text-align: center;
						font-weight: 600;
						font-size: 36rpx;
						color: #808080;
					}
				}

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

					.btns {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 238rpx;
						height: 80rpx;

						font-weight: 500;
						font-size: 36rpx;
						color: #6DB3FF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #6DB3FF;
					}

					.btn {

						display: flex;
						align-items: center;
						justify-content: center;
						width: 406rpx;
						height: 80rpx;
						background: #6DB3FF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						//
						margin-left: 14rpx;
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
						border: 2rpx solid #fff;
					}
				}

				.time_box {
					margin: 0 auto;
					padding: 22rpx 24rpx 28rpx 24rpx;
					display: flex;
					flex-wrap: nowrap;
					width: 658rpx;
					// height: 128rpx;
					background: #EEEEEE;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.time_li {
						width: 50%;

						.txt {
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}

						.words {
							margin-top: 6rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;

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

				.area_li {
					display: flex;
					flex-wrap: nowrap;
					align-items: flex-start;
					padding: 20rpx 46rpx 28rpx 46rpx;

					.dingw {
						display: flex;
						align-items: center;
						margin-left: 30rpx;
						margin-top: 46rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;

						image {
							margin-left: 8rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}

					.city {

						.txt {
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}

						.words {
							margin-top: 6rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;

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

					.area {
						margin-left: 20rpx;

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

							.txt {
								font-weight: 400;
								font-size: 24rpx;
								color: #808080;
							}

							.type {
								margin-left: 10rpx;
								background: #FFE9D4;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								padding: 2rpx 6rpx;
								font-weight: 400;
								font-size: 22rpx;
								color: #FF8C1E;
							}
						}

						.bot {
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							margin-top: 6rpx;

							.txt3 {
								font-weight: 600;
								font-size: 32rpx;
								color: #3D3D3D;
								width: 252rpx;
								/* 设置宽度 */
								white-space: nowrap;
								/* 禁止文本换行 */
								overflow: hidden;
								/* 超出部分隐藏 */
								text-overflow: ellipsis;
								/* 超出部分显示省略号 */
							}

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


		}

	}
</style>