<template>
	<view class="page">
		<view class="fixed">
			<u-navbar  title="租车" :border-bottom="false" :background="background" title-color='#fff' title-size='36' height='45' back-icon-color='#fff'></u-navbar>
		</view>
		<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uSCRH3mWfzIsDjQ3jGvy" mode=""></image>
		<view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
		<view class="statusBars" :style="{ height:navBarHeight+'px' }"></view>
		<view class="store_info">
			<view class="left">
				<view class="store_tit">
					{{storeInfo.name}}
				</view>
				<view class="address">
				</view>
				<view class="time">
					营业时间 | {{storeInfo.businessTimeStart}} -  {{storeInfo.businessTimeEnd}}
				
				</view>
				<view class="type_li">
					<view class="type1">
					  {{storeInfo.rentalCar ? storeInfo.rentalCar : 0}} 辆可租
					</view>
					<view class="type2" v-if="agentInfo.isFreeCar">
						免费送取车
					</view>
				</view>
			</view>
			<view class="right">
				<view class="img_box" style="margin-left: -29rpx;" @click="mapFun()">
						<image class="img1" src="https://lxnapi.ccttiot.com/bike/img/static/uG86Af90zSFQz9rZwgKb" mode=""></image>
						<view class="txt1">
							{{kmInfo}}
						</view>
				</view>
				<view class="img_box" style="margin-left: 44rpx;" @click="showkf=true">
					<image class="img2" src="https://lxnapi.ccttiot.com/bike/img/static/uetWl3PLcTTOM3GYN6EW" mode="" ></image>
					<view class="txt1">
						电话
					</view>
				</view>
				
			</view>
		</view>
		<view class="ips_box" v-if="false">
			<view class="ipt">
				<view class="left">
					<view class="txt">
						取车时间
					</view>
					<view class="words">
						09月2日 
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
						</image>
					</view>
					<view class="txt" style="margin-left: 58rpx;">
					租车周期
					</view>
					<view class="words">
						日租
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
						</image>
					</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="car_card" v-for="(item,index) in storeInfo.models" :key="index">
			<view class="car_img">
				<image :src="item.picture" mode=""></image>
			</view>
			<view class="car_info">
				<view class="info_top">
					<view class="txt">
						{{item.model}}
					</view>
					<view class="red1">
						剩余
					</view>
				</view>
				<view class="info_cont">
					<view class="txt">
						{{item.modelsType}}
						<!-- 手机开关锁 | 定位防盗 -->
					</view>
					<view class="red1" style="white-space: nowrap;">
						<span>{{item.rentalCar}}</span>辆
					</view>
				</view>
				<view class="info_bot">
					<view class="price">
						日租￥<span>{{item.price}}</span>
					</view>
					<view class="btn" @click="" @click="toOrdder(storeInfo,item)" :style="{ background: item.rentalCar < 1 ? '#ccc' : ''}">
						立即租
					</view>
					<!-- <view class="red1" :style="{ color: item.rentalCar < 1 ? '#ccc' : 'inherit', whiteSpace: 'nowrap' }">
					    <span>{{ item.rentalCar }}</span>辆
					</view> -->
				</view>
			</view>
		</view>
		<view class="tip">
			没有更多了哦
		</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.phone)">
				<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.phone}}
					</view>
				</view>
			</view>
			<view class="phone_box"  @click="callPhone(storeInfo.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">
						{{storeInfo.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 {
				background: {
					backgroundColor: 'transparent'
				},
				statusBarHeight:0,
				navBarHeight:0,
				showkf:false,
				storeId:'',
				storeInfo:{},
				agentInfo:{},
				gps:{},
				kmInfo:''
				
			}
		},
		onLoad(e) {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
		
		
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
		
		
			// #endif
			this.storeId=e.storeId
			this.getStoreInfo()
		},
		onShow() {
			
		},
		computed: {
		  // getType() {
		  //   return (item) => {
		  //     let data = {
		  //       modelId: item.modelId
		  //     };
		  //     this.$u.get(`app/getFunctionListByModelId?`, data).then((res) => {
		  //       if (res.code == 200) {
		  //         return res.data;
		  //       }
		  //       return '';
		  //     });
		  //   };
		  // }
		},
		methods: {
			toOrdder(item,items){
				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
					});
				}
			
			},
			mapFun() {
				console.log('点击了');
				uni.openLocation({
					latitude: this.storeInfo.lat,
					 //纬度 - 目的地/坐标点
					longitude:  this.storeInfo.lng, 
					 //经度 - 目的地/坐标点
					// name: "荆门市",
					address: this.storeInfo.simpleAddress
				});
			},
			
			getkm(){
				  let data = {
				    lon: this.gps.longitude,
				    lat: this.gps.latitude,
				    storeId: this.storeInfo.storeId
				  };
				  this.$u.get(`app/computeDistance?`, data).then((res) => {
				    if (res.code == 200) {
				      let distance = res.data; // 获取返回的距离
				      
				      // 判断距离单位，如果小于1000米则显示米，大于等于1000米则显示千米
				      if (distance < 1000) {
				        this.kmInfo = `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm'
				      } else {
				        this.kmInfo = `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数
				      }
				      
				    } else {
				      uni.showToast({
				        title: res.msg,
				        icon: 'none',
				        duration: 2000
				      });
				    }
				  });
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
				setTimeout(()=>{
					this.showkf=false
				},500)
			},
			getAgent(){
				let data={
					agentId:this.storeInfo.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
						});
					}
				});
			},
			 getType(item) {
			    let data = {
			      modelId: item.modelId
			    };
			    return this.$u.get(`app/getFunctionListByModelId?`, data).then((res) => {
			      if (res.code == 200) {
			        // 截取前两项并提取 function 字段，拼接上 '|'
			        return res.data.slice(0, 2).map(func => func.function).join(' | ');
			      } else {
			        uni.showToast({
			          title: res.msg,
			          icon: 'none',
			          duration: 2000
			        });
			        return ''; // 返回空字符串或其他默认值
			      }
			    }).catch(err => {
			      console.error('Request failed:', err);
			      return ''; // 返回空字符串或其他默认值
			    });
			  },
			
			  async updateModelsType() {
			    for (let index = 0; index < this.storeInfo.models.length; index++) {
			      const item = this.storeInfo.models[index];
			      // 调用 getType 函数并等待返回结果
			      const modelsType = await this.getType(item);
			      // 将返回的内容添加到对应的项
			      this.$set(this.storeInfo.models, index, {
			        ...item,
			        modelsType // 添加 modelsType 字段
			      });
				
			    }
				console.log( this.storeInfo,'aaa');
			  },
			getStoreInfo(){
				let data={
					storeId:this.storeId
				}
				this.$u.get(`app/getStore?`,data).then((res) => {
					if (res.code == 200) {
						this.storeInfo = res.data;
						 this.updateModelsType(); // 确保在设置 storeInfo 后调用
						this.getAgent()
						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()
								// 在这里处理获取位置信息失败的情况
							}
						
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}
	
	.page{
		.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;
			}
		}
		
		.tip{
			margin-top: 30rpx;
			width: 100;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
		}
		.car_card{
			display: flex;
			flex-wrap: nowrap;
			margin: 0 auto;
			margin-top: 16rpx;
			width: 676rpx;
			// height: 260rpx;
			padding: 22rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.car_img{
				width: 216rpx;
				height: 216rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				background: #EFEFEF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				image{
					width: 172rpx;
					height: 132rpx;
				}
			}
			.car_info{
				margin-left: 16rpx;
				width: 70%;
				// display: flex;
				// flex-wrap: wrap;
				
				.info_top{
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					height: 38rpx;
					.txt{
						font-weight: 600;
						font-size: 28rpx;
						color: #3D3D3D;
					}
					.red1{
						font-weight: 400;
						font-size: 24rpx;
						color: #FF1C1C;
					}
				}
				.info_cont{
					width: 100%;
					height: 66rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					.txt{
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
					}
					.red1{
						font-weight: 400;
						font-size: 24rpx;
						color: #FF1C1C;
						span{
							font-size: 48rpx;
							font-weight: 600;
						}
					}
				}
				.info_bot{
					margin-top: 56rpx;
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					.price{
						font-weight: 400;
						font-size: 24rpx;
						color: #FF1C1C;
						span{
							font-size: 44rpx;
							font-weight: 600;
						}
					}
					.btn{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 138rpx;
						height: 50rpx;
						background: #F14C4C;
						border-radius: 31rpx 31rpx 31rpx 31rpx;
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
			
		}
		.ips_box {
			margin-top: 16rpx;
			padding: 22rpx 38rpx;
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
		
			.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;
					}
					.words{
						margin-left: 12rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
						image{
							width: 40rpx;
							height: 22rpx;
						}
					}
				}
		
		// 		.right {
		// 			width: 32rpx;
		// 			height: 32rpx;
		
		// 			image {
		// 				width: 32rpx;
		// 				height: 32rpx;
		// 			}
		// 		}
			}
		}
		
		.store_info{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			margin-top: 62rpx;
			width: 750rpx;
			
			background: #FFFFFF;
			border-radius: 20rpx;
			.right{
				display: flex;
				align-items: center;
				width: 166rpx;
				height: 166rpx;
				background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiIqqyZ7lKmwHShwdb7e');
				background-size: cover;
				/* 背景图片等比缩放以覆盖整个容器 */
				background-position: center;
				.img_box{
					width: 80rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					.img1{
						
						width: 58rpx;
						height: 58rpx;
					}
					.img2{
						
						width: 58rpx;
						height: 58rpx;
					}
					.txt1{
						text-align: center;
						width: 80rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
				
			}
			.left{
				.store_tit{
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
				.address{
					margin-top: 10rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.time{
					margin-top: 8rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.type_li{
					margin-top: 22rpx;
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					.type1{
						padding: 4rpx 12rpx;
						background: #FFE9D4;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF8C1E;
					}
					.type2{
						margin-left: 12rpx;
						padding: 4rpx 12rpx;
						background: #DCEDFF;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #4297F3;
					}
				}
			}
		}
		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}
		
		.backimg {
			position: fixed;
			width: 750rpx;
			height: 324rpx;
			z-index: -1;
		}
	}
</style>
