<template>
	<view class="page">
		<bluetooth-control ref="bluetoothControl" :sn="deviceInfos.sn" :mac="deviceInfos.mac"
			@operation-complete="deviceInfo" @mask-closed="handleMaskClosed" @changeCarstause="changeCarstause" />
		<view class="page1" v-if="showdevice">
			<view class="fixed" v-if="false">
				<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36'
					height='45' back-icon-color='#000'></u-navbar>

			</view>
			<view class="top">
				<view class="model" @click="toselect()">
					{{ deviceInfos.model }}  <image src="https://lxnapi.ccttiot.com/bike/img/static/utP93v8em0Mq8UHLc4UM" mode="" ></image>
				</view>
				<view class="switch" v-if="openBlue">

					<view v-if="connectBlue == false" class="switch">
						<u-loading mode="circle" size="40" style="margin-right: 30rpx;margin-left: 20rpx;"
							color="#FF8282"></u-loading>
						连接中
						<image src="https://lxnapi.ccttiot.com/bike/img/static/ukhgaoFSHmlJWkgyC4U4" mode=""
							class="bluetooth">
						</image>
					</view>
					<view v-else class="switch" style="color: #4297F3;padding-left: 40rpx;">

						连接成功
						<image src="https://lxnapi.ccttiot.com/bike/img/static/udli5LEVfOT62XShk99A" mode=""
							class="bluetooth">
						</image>
					</view>
				</view>
			</view>
			<view class="power">
				<view class="tit">
					电量
				</view>
				<view class="num">
					{{ deviceInfos.remainingPower }}%
				</view>
			</view>
			<view class="car_img">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ukC1CG1uAz1pwV0qZ03n" mode=""></image>
			</view>
			<view class="tips">
				<view class="yuan">

				</view>
				当前车辆状态： {{ deviceInfos.lockStatus == 1 ? '开锁' : '关锁' }}
			</view>
			<view class="btn_box">
				<view class="btn1" @click="devicebtn(2)">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uaW9kLzl1RYoU8WyiuYL" mode=""></image>
					鸣笛寻车
				</view>
				<!-- <view class="btn2" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
				          <view class="slider" :style="{ transform: 'translateX(' + translateX + 'rpx)' }"></view>
				          右滑启动
				        </view> -->
				<view class="btn1" @click="devicebtn(1)" v-if="deviceInfos.lockStatus == 1">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uEUTkjiSqIDTjnLxGvP8" mode=""></image>
					已启动
				</view>
				<view class="btn1" @click="devicebtn(0)" v-else>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uAx8pleqdhKswoupY8Wo" mode=""></image>
					已关锁
				</view>
				<view class="btn1" @click="mapFuns">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uGrptW1UAUQy0v1pQQvC" mode=""></image>
					导航寻车
				</view>
			</view>
			<view class="order_info">
				<view class="info_top">
					<view class="tit1">
						欢迎使用电动车
					</view>
					<view class="txt1" @click="topage(1)">
						查看订单 <image src="https://lxnapi.ccttiot.com/bike/img/static/uAxKe5Or9LMUn4DNBL9B" mode="">
						</image>
					</view>
				</view>
				<view class="info_cont">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ueWcek6yF0kSadYfYhyV" mode=""></image>
					<view class="infos">
						<view class="time">
							{{ time1() }}
						</view>
						<view class="data">
							{{ time2() }}
						</view>
						<view class="tips1">
							到期后将产生超时费用
						</view>
					</view>
				</view>
				<view class="btns" @click="topage(0)">
					去续租
				</view>
			</view>
			<view class="min_map">

				<view class="map_top" @click="tomap">
					<view class="map_left">
						<view class="map_left_top">
							<view class="map_left_top_tit">
								上次车辆位置
							</view>
							<view class="map_left_top_data">
								更新于 05-12 10:22
							</view>
						</view>
						<view class="map_left_bottom">
							福建省宁德市福鼎市海滨路200号靠近福鼎第四中学
						</view>
					</view>
					<view class="map_right">
						<view class="iconfont icon-xiangyou1"></view>
					</view>
				</view>
				<map style="width: 99%; height: 99%;border-radius: 30rpx;overflow: hidden;" :latitude="latitude"
					:show-location="true" :longitude="longitude" :markers="markers"></map>
			</view>

		</view>
		<view class="page2" v-else>
			<image src="https://lxnapi.ccttiot.com/bike/img/static/uBAfXJ4nwrD45c8YmK50" mode="" class="img"></image>
			<view class="tips" style="width: 100%;">
				<view class="yuan">

				</view>
				当前暂无租赁车辆
			</view>
			<view class="addbtn" @click=" addivice()">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uqIufjb8EAbQCnCQBiLz" mode="" class="addimg">
				</image>
				添加车辆

			</view>
			<u-select v-model="showadd" :list="list" title='选择添加方式' @confirm="confirm"></u-select>
		</view>
		<tab-bar :indexs='0' style="" :userInfo='userInfo'></tab-bar>
	</view>
</template>

<script>


import BluetoothControl from '@/components/bluetooth-control.vue'

export default {
	components: {
		BluetoothControl
	},
	data() {
		return {
			list: [
				{
					value: '1',
					label: '扫码添加'
				},
				{
					value: '2',
					label: '手动输入'
				}
			],
			showadd: false,
			devicesList: [
				// {name:'110000',
				// mac:'11111'}
			],
			searching: false,
			texts: '正在扫描蓝牙设备...',
			btnflag: true,
			tishiflag: false,
			option: '',
			bluthlist: [], //蓝牙数组
			// status: 'loading',
			statusflag: false,
			Bluetoothmac: '',
			mac: '',
			ishave: false,
			ver_data: null,
			deviceInfoss: {},
			gps: {},
			isband: false,
			// status: false,
			deviceIds: '',
			name: '',

			dl: 0,
			czmoney: true,
			iscz: true,
			bgc: {
				backgroundColor: "#F7FAFE",
			},
			show: true,
			showgj: true,
			searchKeyword: '11',
			latitude: 39.916527,
			longitude: 116.397128,
			isMap: false,
			zoomSize: 15,
			markers: [],
			polyline: [],
			polygons: [],
			cardId: '001区域',
			sn: '',

			carstause: false,

			maskloading: false,
			toploadtxt: "开锁中0%",
			loadimg: 'https://lxnapi.ccttiot.com/bike/img/static/urJQJnOI1DEjWatFqHYh',
			tiptxt: '请定点停放，规范用车',
			maskepage: 0,
			backgps: {},
			buletxt: '',

			buleclose: false,
			buleopen: false,
			bulering: false,
			bulerebort: false,

			orderinfo: {},
			storeInfo: {},
			latitude: null,
			longitude: null,
			showdevice: false,
			deviceInfos: {},
			openBlue: false,
			connectBlue: false,
			deviceList: [],
		}
	},
	onLoad(e) {
		// 1. 先检查是否有存储的 sn（说明是登录后返回）
		let storedSn = uni.getStorageSync('sn')
		if (storedSn) {
			const token = uni.getStorageSync('token');
			if (token) {
				console.log('已登录');
				uni.removeStorageSync('sn')
				// 已登录，直接跳转到订单页
				uni.navigateTo({
					url: '/page_user/ordder?sn=' + storedSn
				});
			} else {
				console.log('未登录');
				// 未登录，存储 sn 并跳转到登录页
				uni.setStorageSync('sn', storedSn)
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}

		// 2. 处理扫码进入的情况
		if (e.q) {
			// 解析二维码参数
			const decodedUrl = decodeURIComponent(e.q);
			const snMatch = decodedUrl.match(/sn=([^&]*)/);
			const sn = snMatch ? snMatch[1] : null;

			if (!sn) {
				uni.showToast({
					title: '无效的二维码',
					icon: 'none'
				});
				return;
			}

			const token = uni.getStorageSync('token');
			if (token) {
				console.log('已登录');
				uni.removeStorageSync('sn')
				// 已登录，直接跳转到订单页
				uni.navigateTo({
					url: '/page_user/ordder?sn=' + sn
				});
			} else {
				console.log('未登录');
				// 未登录，存储 sn 并跳转到登录页
				uni.setStorageSync('sn', sn)
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
		if (e.sn) {
			// 解析二维码参数
			const sn = e.sn;

			if (!sn) {
				uni.showToast({
					title: '无效的二维码',
					icon: 'none'
				});
				return;
			}

			const token = uni.getStorageSync('token');
			if (token) {
				console.log('已登录');
				uni.removeStorageSync('sn')
				// 已登录，直接跳转到订单页
				uni.navigateTo({
					url: '/page_user/ordder?sn=' + sn
				});
			} else {
				console.log('未登录');
				// 未登录，存储 sn 并跳转到登录页
				uni.setStorageSync('sn', sn)
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
		// this.deviceInfo()
		// this.getorderInfo()
		uni.getBluetoothAdapterState({
			success: function (res) {
				if (!res.available) {
					console.log('蓝牙不可用');
					return;
				}
				if (!res.discovering) {
					console.log('蓝牙正在搜索中');
					// 实际业务中可能需要根据需求处理
				}
				if (res.authorized) {
					console.log('已授权');
					// 已授权，可以进行蓝牙操作
				} else if (res.authorizing) {
					console.log('正在授权');
					// 正在请求授权
				} else {
					console.log('未授权');
					// 未授权，需要请求授权
					uni.authorize({
						scope: 'scope.bluetooth',
						success() {
							console.log('授权成功');
							// 授权成功，可以进行蓝牙操作
						},
						fail() {
							console.log('授权失败');
							// 用户拒绝授权或者授权失败
						}
					});
				}
			},
			fail: function (err) {
				console.log('获取蓝牙状态失败', err);
			}
		});
		let that = this
		uni.getNetworkType({
			success: function (res) {
				console.log(res.networkType); // 输出网络类型，如 "wifi", "4g", "3g", "2g", "none"
				if (res.networkType == 'none') {
					that.netonlines = false


				} else {
					that.netonlines = true
					uni.getLocation({
						type: 'gcj02',
						success: function (lb) {

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

					})




					// console.log('有网络连接');\

				}
			}
		});
	},
	onShow() {
		this.getDeviceList()
	},

	methods: {
		addivice(){
			const token = uni.getStorageSync('token');
			if(token){
				this.showadd = true
			}else{
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			
			
		},
		changeCarstause(newVal) {
			this.connectBlue = newVal
			console.log(newVal, 'newVal');
		},
		// 蓝牙操作
		openBluetooth() {
			console.log('打开蓝牙');

			const bluetoothControl = this.$refs.bluetoothControl;
			bluetoothControl.Binddevice();
		},

		devicebtn(num) {
			// this.showbtntip = false
			if (num == 0) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.post('/appVerify/device/unlock?sn=' + this.deviceInfos.sn+'&orderNo='+this.orderinfo.orderNo).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
						this.deviceInfo()
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						this.handleBluetoothOperation('opne')
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			} else if (num == 1) {
				uni.showLoading({
					title: '加载中...'
				})

				this.$u.post('/appVerify/device/lock?sn=' + this.deviceInfos.sn+'&orderNo='+this.orderinfo.orderNo).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
						this.deviceInfo()
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						this.handleBluetoothOperation('close')
					}
				}).catch(error => {
					console.error("Error fetching area data:", error);
				});
			} else if (num == 2) {

				uni.showLoading({
					title: '加载中...'
				})
				this.$u.post('app/device/ring?sn=' + this.deviceInfos.sn).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {

						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						this.handleBluetoothOperation('ring')
					}
				})
			} else if (num == 3) {

			} else if (num == 4) {


			} else if (num == 5) {

			} else if (num == 6) {


			} else if (num == 7) {


			} else if (num == 8) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.post('/appVerify/device/reboot?sn=' + this.sn).then((res) => {
					if (res.code == 200) {
						this.deviceInfo()
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						// uni.hideLoading()
						// this.bulebtn(4)
					}
				})


			} else if (num == 9) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.post('/appVerify/device/seatCushionLock?sn=' + this.sn).then((res) => {
					if (res.code == 200) {
						this.deviceInfo()
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			} else if (num == 10) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.post('/appVerify/refreshDevice?sn=' + this.sn).then((res) => {
					if (res.code == 200) {
						this.deviceInfo()
						uni.showToast({
							title: '操作成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		},
		handleBluetoothOperation(type) {
			const bluetoothControl = this.$refs.bluetoothControl;
			if (!bluetoothControl) return;

			if (this.connectBlue) {
				console.log('调用的1');

				switch (type) {
					case 'open':
						bluetoothControl.open();
						break;
					case 'close':
						bluetoothControl.close();
						break;
					case 'ring':
						bluetoothControl.ring();
						break;
					case 'reboot':
						bluetoothControl.reboot();
						break;
				}
			} else {
				console.log('调用的2');
				switch (type) {
					case 'open':
						bluetoothControl.buleopen = true;
						break;
					case 'close':
						bluetoothControl.buleclose = true;
						break;
					case 'ring':
						bluetoothControl.bulering = true;
						break;
					case 'reboot':
						bluetoothControl.bulerebort = true;
						break;
				}
				bluetoothControl.Binddevice();
			}
		},


		tomap() {
			uni.navigateTo({
				url: '/page_user/carMap?sn=' + this.deviceInfos.sn
			})
		},
		toselect() {
			uni.navigateTo({
					url: '/page_user/selectCar'
				})
		},
		getDeviceList() {

			this.$u.get(`/appVerify/getDeviceListByToken`).then((res) => {
				if (res.code == 200) {
					// 检查返回的数据数组是否非空
					this.deviceList = res.data
					if (res.data && res.data.length > 0) {
						// 找出所有 isDefault 为 0 的设备
						let defaultDevices = res.data.filter(item => item.isDefault == 0);

						// 如果找到多个设备，按索引赋值给 deviceinfo
						if (defaultDevices.length > 0) {
							this.deviceInfos = defaultDevices[0]; // 取第一个设备
							this.getorderInfo()
							console.log(this.deviceinfos, 'this.deviceinfos');
							this.sn = this.deviceInfos.sn
							this.markers.push({
								id: parseFloat(this.deviceInfos.sn),
								latitude: parseFloat(this.deviceInfos.latitude),
								longitude: parseFloat(this.deviceInfos.longitude),

								width: 49,
								height: 114 / 2,

								iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uhmzfPtuFGybfWcZq61q'

							})
							// if(this.deviceInfos.onlineStatus==1){
							// 	this.openBlue=true
							// 	this.openBluetooth()
							// }
							console.log(this.markers, 'this.markers');
							this.$forceUpdate()

						} else {
							this.deviceInfos = res.data[0];
							this.sn = this.deviceInfos.sn
							// if(this.deviceInfos.onlineStatus==1){
							// 	this.openBlue=true
							// 	this.openBluetooth()
							// }

							this.getorderInfo()
							this.markers.push({
								id: parseFloat(this.deviceInfos.sn),
								latitude: parseFloat(this.deviceInfos.latitude),
								longitude: parseFloat(this.deviceInfos.longitude),

								width: 49,
								height: 114 / 2,

								iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/uhmzfPtuFGybfWcZq61q'

							})
							console.log(this.markers, 'this.markers');
							this.$forceUpdate()
						}

						// 设置 showdevice 为 true
						this.showdevice = true;
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		getorderInfo() {
			let data = {
				sn: this.deviceInfos.sn
			}
			this.$u.get(`/appVerify/getInProgressOrder`, data).then((res) => {
				if (res.code == 200) {
					this.orderinfo = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});

		},
		confirm(e) {

			this.showadd = false
			if (e[0].value == '1') {
				uni.navigateTo({
					url: '/page_user/QrBind'
				})
			} else if (e[0].value == '2') {
				uni.navigateTo({
					url: '/page_user/SnBind'
				})
			}
		},
		toback() {
			uni.redirectTo({
				url: '/page_user/user_order?orderNo=' + this.orderinfo.orderNo
			})
		},
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			})
			// setTimeout(()=>{
			// 	this.showkf=false
			// },500)
		},
		topage(num) {

			console.log(this.orderinfo.orderNo);
			if (this.orderinfo && this.orderinfo.orderNo) {
				// console.log(this.orderInfo.orderNo);
				if (num == 0) {
					uni.redirectTo({
						url: '/page_user/renewCar?orderNo=' + this.orderinfo.orderNo
					});
				} else if (num == 1) {
					uni.redirectTo({
						url: '/page_user/user_order?orderNo=' + this.orderinfo.orderNo
					});
				}
			} else {
				console.error('orderInfo is undefined or orderNo is missing');
			}
		},
		time1() {
			const expiryTime = new Date(this.orderinfo.expiryTime); // 获取过期时间
			const now = new Date(); // 获取当前时间

			// 计算时间差（毫秒）
			const timeDifference = expiryTime - now;

			if (timeDifference < 0) {
				return '已超时';
			} else {
				const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
				if (days > 0) {
					return `${days}天`;
				}

				const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				if (hours > 0) {
					return `${hours}小时`;
				}

				const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
				if (minutes > 0) {
					return `${minutes}分钟`;
				}

				return '即将超时'; // 如果时间差小于1分钟
			}
		},
		time2() {
			console.log(this.orderinfo);
			const expiryTime = new Date(this.orderinfo.expiryTime);

			const month = (expiryTime.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并补零
			const day = expiryTime.getDate().toString().padStart(2, '0'); // 获取日期并补零
			const hours = expiryTime.getHours().toString().padStart(2, '0'); // 获取小时并补零
			const minutes = expiryTime.getMinutes().toString().padStart(2, '0'); // 获取分钟并补零

			return `${month}/${day} ${hours}:${minutes}到期`;
		},
		mapFuns() {
			console.log('点击了');
			uni.openLocation({
				latitude: parseFloat(this.deviceInfos.latitude),  // 将纬度转换为数字
				longitude: parseFloat(this.deviceInfos.longitude), // 将经度转换为数字
				//经度 - 目的地/坐标点
				// name: "荆门市",
				address: '车辆定位'
			});
		},
		mapFun() {
			console.log('点击了');
			uni.openLocation({
				latitude: this.storeInfo.lat,
				//纬度 - 目的地/坐标点
				longitude: this.storeInfo.lng,
				//经度 - 目的地/坐标点
				// name: "荆门市",
				address: this.storeInfo.simpleAddress
			});
		},

		getstoreInfo() {
			let data = {
				storeId: this.orderinfo.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
					});
				}
			});
		},
		deviceInfo() {
			this.$u.get('app/getDeviceBySn?sn=' + this.sn).then((res) => {
				console.log(res, 'rererer');
				if (res.code === 200) {
					// console.log(this.areaId,);
					this.deviceInfos = res.data

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

		},


	}
}
</script>




<style lang="scss">
page {
	overflow-y: auto;
	background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
	background-size: cover;
	/* 背景图片等比缩放以覆盖整个容器 */
	background-position: center;
	/* 背景图片居中显示 */
	background-repeat: no-repeat;
	/* 防止背景图片重复 */
	min-height: 100vh;
	/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */

}

.page {
	width: 750rpx;
	// height: 100vh;
	padding-bottom: 200rpx;

	.page2 {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 0;

		.img {
			margin-top: 200rpx;
			width: 530rpx;
			height: 530rpx;
		}

		.addbtn {
			margin-top: 122rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 614rpx;
			height: 92rpx;
			background: #4297F3;
			box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;

			.addimg {
				margin-right: 20rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}


	}

	.min_map {
		margin: 0 auto;
		margin-top: 44rpx;
		width: 688rpx;
		height: 380rpx;
		border-radius: 40rpx;
		overflow: hidden;
		position: relative;

		.map_top {
			padding: 22rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: flex-start;
			position: absolute;
			top: 0;
			left: 0;
			width: 688rpx;
			height: 152rpx;
			background: linear-gradient(180deg, #FFFFFF 60%, rgba(255, 255, 255, 0) 100%);
			z-index: 100;

			.map_right {
				display: flex;
				align-items: center;

				.icon-xiangyou1 {
					margin-top: 20rpx;
					margin-right: 28rpx;
					font-size: 40rpx;
					color: #3D3D3D;
				}

			}

			.map_left {
				display: flex;
				align-items: center;

				flex-wrap: wrap;

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

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

					.map_left_top_tit {
						font-weight: 700;
						font-size: 36rpx;
						color: #3D3D3D;
					}

					.map_left_top_data {
						margin-left: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
					}
				}
			}
		}
	}

	.bot_btn {
		position: fixed;

		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 174rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

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

	.order_info {

		position: relative;
		margin: 0 auto;
		margin-top: 44rpx;
		padding: 18rpx 24rpx 40rpx;
		width: 698rpx;
		border-radius: 30rpx;
		background: #FFFFFF;

		.btns {
			position: absolute;
			right: 32rpx;
			bottom: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 174rpx;
			height: 68rpx;
			background: #4297F3;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
		}

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

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

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

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

		.info_cont {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;

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

			.infos {
				margin-top: 30rpx;
				margin-left: 36rpx;

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

				.data {
					margin-top: 10rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #F14C4C;
				}

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

	.store_car {

		border-radius: 30rpx;
		width: 696rpx;
		padding: 30rpx 28rpx 0 28rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		// height: 342rpx;
		// margin-bottom: 100rpx;
		background: #FFFFFF;

		.store_btn_li {
			display: flex;
			flex-wrap: nowrap;
			margin-top: 26rpx;
			margin-left: -28rpx;
			border-top: 1rpx solid #D8D8D8;
			width: 696rpx;
			height: 102rpx;

			.store_btn:first-child {
				border-right: 1rpx solid #D8D8D8;
			}

			.store_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 102rpx;

				image {
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
					margin-right: 18rpx;
					width: 40rpx;
					height: 40rpx;
				}

			}
		}

		.line {
			width: 100%;
			height: 1rpx;
			background: #D8D8D8;
		}

		.address {
			margin-top: 48rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #3D3D3D;
		}

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

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

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

		}
	}

	.btn_box {
		width: 100%;

		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-around;

		.btn1 {
			width: 130rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			font-weight: 400;
			font-size: 32rpx;
			color: #3D3D3D;

			image {
				margin-bottom: 10rpx;
				width: 120rpx;
				height: 120rpx;
			}
		}

		.btn2 {
			width: 268rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ebebeb;
			border-radius: 45rpx;
			padding-right: 30rpx;
			position: relative;
			overflow: hidden;

			.slider {
				width: 90rpx;
				height: 90rpx;
				background-color: #fff;
				border-radius: 45rpx;
				position: absolute;
				left: 0;
			}
		}
	}

	.tips {
		margin-top: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;

		.yuan {
			margin-right: 14rpx;
			border-radius: 50%;
			width: 16rpx;
			height: 16rpx;
			background: #FF8282;
		}
	}

	.car_img {
		margin: 0 auto;
		margin-top: -108rpx;
		width: 440rpx;
		height: 340rpx;
	}

	.power {
		padding-top: 60rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		width: 562rpx;
		height: 348rpx;
		background-image: url('https://lxnapi.ccttiot.com/bike/img/static/unqrw7KFxtvIjYBfBGus');
		background-size: cover;
		/* 背景图片等比缩放以覆盖整个容器 */
		background-position: center;

		/* 背景图片居中显示 */
		.tit {

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

		.num {
			margin-top: 16rpx;
			width: 100%;
			text-align: center;
			font-weight: 600;
			font-size: 88rpx;
			color: #3D3D3D;

			span {
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}

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

		.model {
			font-weight: 600;
			font-size: 48rpx;
			color: #3D3D3D; 
			image{
				margin-left: 10rpx;
				width: 32rpx;
				height: 26rpx;
			}
		}

		.switch {
			// margin-left: auto;
			width: 272rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FF8282;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;

			.replay {
				margin-left: 22rpx;
				margin-right: 14rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.bluetooth {
				margin-left: auto;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.fixed {
		z-index: 999;
		position: fixed;
		top: 0;
	}
}
</style>