JP-ChargeTeam51/pages/searchPile/searchPile.vue

<template>
	<view>
		<ujp-navbar :is-back="false" height='88' style="background-color: bisque;">
			<view class="ujp-navbar-main">
				<view class="ujp-navbar-main1">
					<view style="margin-left:20rpx;width: 160rpx;">
						<uni-combox class='font2' ref="city" :border="false" v-model="area" :candidates="cities"
							@updateModel='updateCity' @updateSelector="updateTypeSelector(3)"></uni-combox>
					</view>
					<view style="margin-right: 20rpx; flex:1">
						<u-search height="60" :input-style='inputStyle' placeholder="查询站点地址或站名" :showAction="false"
							@focus="navigate"></u-search>
					</view>
					<view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
						<text class="iconfont">&#xe613;</text> <text class="list font2">列表</text>
					</view>
					<view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
						<text class="iconfont">&#xe622;</text> <text class="list font2">地图</text>
					</view>
				</view>
				<view class="ujp-navbar-main2">
					<view style="    max-width: 200rpx;margin-left:20rpx;margin-right:10rpx;flex:1; ">

						<uni-combox class='font2' ref="raidus" :border="false" v-model="raidus" :candidates="radiuses"
							@updateModel='updateRadius'  @updateSelector="updateTypeSelector('0')"></uni-combox>
					</view>
					<view style="  max-width: 200rpx;flex:1;   ">
						<uni-combox ref="type" class='font2' :border="false" v-model="type" :candidates="types"
							@updateModel='updateType' @updateSelector="updateTypeSelector(1)"></uni-combox>
					</view>
					<view style="flex:1;">
						<uni-combox ref="stationType" class='font2' :border="false" v-model="stationType"
							:candidates="stationTypes" @updateModel='updateType2'
							@updateSelector="updateTypeSelector(2)"></uni-combox>
					</view>
					<view style="margin-right: 20rpx;">
						<!--  -->
						<!-- <view v-show="dropdownShow" >
							 <u-mask :show="dropdownShow" ></u-mask>
						</view> -->
						<jp-dropdown @open="dropdownShow=true" @close="dropdownShow=false" ref="uDropdown"
							style="    display: contents;" :top="180">
							<u-dropdown-item title="筛选">
								<view class="slot-content">

									<view v-if="dropdownShow" class="u-text-center u-content-color u-m-t-20 u-m-b-20">
										<view class="preference" style="z-index:1024;width: 100%;">
											<view class="content-s">
												<view class="preference_group">
													<view class="preference_group_item"><label
															class="preference_label">距离我</label></view>
													<view>
														<u-tag class="preference_item"
															v-for="(item, index) in info.miles_type" :key="index"
															:style="index == preference.miles_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
															shape="circle" :text="item.text"
															@click="selectMiles(index)"></u-tag>
													</view>
												</view>
												<view class="preference_group">
													<view class="preference_group_item"><label
															class="preference_label">充电站类型</label></view>
													<view>
														<u-tag class="preference_item_medium"
															v-for="(item, index) in info.obc_type" :key="index"
															:style="index == preference.obc_type_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
															shape="circle" :text="item.text"
															@click="selectOBSType(index)"></u-tag>
													</view>
												</view>
												<view class="preference_group">
													<view class="preference_group_item"><label
															class="preference_label">充电站所属</label></view>
													<view>
														<u-tag class="preference_item_medium"
															v-for="(item, index) in info.obc_stationType" :key="index"
															:style="index == preference.obc_stationType_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
															shape="circle" :text="item.text"
															@click="selectOBSType2(index)"></u-tag>
													</view>
												</view>

												<view class="preference_group" v-if="false">
													<view class="preference_group_item"><label
															class="preference_label">是否对外开放</label></view>
													<view>
														<u-tag class="preference_item_plus"
															v-for="(item, index) in info.obc_status" :key="index"
															:style="index == preference.obc_status_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
															shape="circle" :text="item.text"
															@click="selectOBSStatus(index)"></u-tag>
													</view>
												</view>

												<view class="preference_group" v-if="false">
													<view style="margin-left: 30rpx;"><u-checkbox active-color="#00b962"
															shape="circle" v-model="preference.save_preference"
															@change="radioChange">保存偏好设置</u-checkbox></view>
												</view>

											</view>
											<view class="pre-btn" style="display: flex;flex-direction: row;">
												<view class="btn-1 font3" @click="reset" style="width: 30%;">重置</view>
												<view class="btn-2 font3" @click="close"
													style="width: 70%;background-color: #00B962;color: #fff;">确定</view>
											</view>

										</view>
									</view>
									<!-- <u-button type="primary" @click="closeDropdown">确定</u-button> -->
								</view>
							</u-dropdown-item>
						</jp-dropdown>
					</view>
				</view>
			</view>
		</ujp-navbar>
		<!-- 定位 -->
		<view v-show="!viewMode">
			
		
		<view class="location-box" v-if="message != 'getLocation:ok' && stationslist.length == 0 ">
			<view class="location">
				<view class="location-text">
					<view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
						定位中...
					</view>
					<view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
						授权定位后可查询附近充电站
					</view>
					<view class="text-view">
						<view class="text-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
							重新定位
						</view>
						
						<view class="text-3  text-4 oldTextjp2" oldstyle="font-size: 16px;" @click="searchStationData()">
							直接搜索
						</view>
					</view>
		
				</view>
				<view class="img-box">
					<img src="static/img/暂无网络信号-缺省页 1.png">
				</view>
			</view>

		</view>
		<view v-else-if="message == 'getLocation:ok'&&stationslist.length==0">
			<view class="carNone" v-if="stationslist.length == 0">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p class="oldTextjp2" oldstyle="font-size: 18px;">{{loading?'暂无可用充电站':'正在为你加载可用的充电站...'}}</p>

			</view>
		</view>
		<view >
			<view  >
				<view v-for="(item,index) in (stationslist.length?stationslist:defaultStation)" :key="item.id" class="charing-slow"
					@click="stationDetail(item)">



					<view class="address">
						<view class="name oldTextjp" oldstyle="font-size: 20px;">
							{{item.name}}
						</view>
						<template v-if="stationslist.length!=0">
							
							<view class="distance " v-if="item.distance != '99999999'">
								<text class="iconfont" style="color:#666666">&#xe615;</text>
								{{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
							</view>
							<view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
								<text class="iconfont" style="color:#666666">&#xe615;</text>
								暂无定位
							</view>
						</template>
					</view>
					
					<view class="sign" >
						<view class="sign-tag sign-0" v-if="item.isRecommend||stationslist.length==0">推荐</view>
						<view class="sign-tag sign-5" v-if="item.isAlways" >常用</view>	
						
					
							<view class="sign-1" v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
								会员服务费{{discountRatio10(item.discountRatio)}}折</view>
							
							<view class="sign-4"
								v-if="item.nightLowPriceEnabled">
								夜间超低价</view>
						
						<view class="sign-3" v-if="item.category=='超充'">160kW超充站</view>
						<view class="sign-2" v-if="item.tagList.length != 0"
								v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>

						<template v-if="item.stationType==50">
							{{item.address}}
						</template>
					</view>
					<view class="price-free price-freeList">
						<view class="price"  v-if="personInfo&&personInfo.userType==2">
							<view class="price-1">
								<text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
								: (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
								<text class="unit " oldstyle="font-size: 14px;">
									元/度
								</text>
							</view>
							<view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
								<text class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
								<text class="unit">元/度</text>
							</view>
						</view>
						<!-- 游客价格-->
						<view class="price" v-else>
							<view class="price-1">
								<text class="num">
									{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
								<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
							</view>
							<view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
								<text class="num1">会员</text>
								<text class="num">{{ (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
								<text class="unit ">元/度</text>
							</view>
						</view>

						<view class="free">

							<view class="fast" v-if="item.fastNum">
								<view class="fast-font">
									快
								</view>
								<view class="num">

									{{item.fastAvailableNum}}/{{item.fastNum}}
								</view>
							</view>
							<view class="slow" v-if="item.slowNum">
								<view class="slow-font">
									慢
								</view>
								<view class="num">
									{{item.slowAvailableNum}}/{{item.slowNum}}
								</view>
							</view>
						</view>
					</view>




				</view>

				<u-divider margin-top="20" bg-color="#F2F4F4"
					v-if="stationslist.length &&stationslist.length == recordsTotal">已经到底了</u-divider>

			</view>
			
		</view>
		</view>
		<view v-show="viewMode">
			<view>
				<Chargermap @onMoveStart="moveStart" @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked"
					@onload="mapdown" @clickMap="clickMap"></Chargermap>
				<!--@location="location"-->
				<u-image style='position:absolute;z-index:1023;right:40rpx;bottom:520rpx;  '
					src="@/static/img/location.png" border-radius="8" bg-color="#ffffff" width="30px" height="30px"
					@click="setCenter"></u-image>
		
			</view>
			<!-- 新版卡片 -->
			<view class="chargerCard" v-if="stationsmap.length>0">
				<swiper v-if="stationsmap.length>0" :current="currentIndex" @change="swiperChange"
					slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition">
					<swiper-item v-for="(item,index) in stationsmap" :key="item.id" style="height: 100%;">
						<view class="swiper-item" style="height: 100%; background-color: #ffffff;"
							@click="stationDetail(item)">
							<view class="charing-slow charing-slow-2" @click="stationDetail(item)">
								<view class="address">
									<view class="name oldTextjp" oldstyle="font-size: 20px;">
										{{item.name}}
									</view>
									<view class="distance "  v-if="item.distance != '99999999'">
										<text class="iconfont" style="color:#666666">&#xe615;</text>
										{{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
									</view>
									<view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
										<text class="iconfont" style="color:#666666">&#xe615;</text>
										暂无定位
									</view>
								</view>
								<view class="sign min-h">
									
		
										<view class="sign-1"
											v-if="item.giveDiscount&&item.discountRatio&&item.discountRatio!=100">
											会员服务费{{discountRatio10(item.discountRatio)}}折</view>
										<view class="sign-3" v-if="item.category=='超充'">160kW超充站</view>
										<view class="sign-4"
											v-if="item.nightLowPriceEnabled">
											夜间超低价</view>
										<view class="sign-2" v-if="item.tagList.length != 0"
											v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}
										</view>
									
								</view>
								<view class="price-free  price-freeOne">
									<view class="price"  v-if="personInfo&&personInfo.userType==2">
										<view class="price-1">
											<text class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
											: (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
											<text class="unit " oldstyle="font-size: 14px;">
												元/度
											</text>
										</view>
										<view class="price-2 " oldstyle="font-size: 14px;" v-if="item.giveDiscount">
											<text class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
											<text class="unit">元/度</text>
										</view>
									</view>
									<!-- 游客价格-->
									<view class="price" v-else>
										<view class="price-1">
											<text class="num">
												{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
											<text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
										</view>
										<view class="price-3 " oldstyle="font-size: 48rpx;" v-if="item.giveDiscount">
											<text class="num1">会员</text>
											<text class="num">{{ (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</text>
											<text class="unit ">元/度</text>
										</view>
									</view>
		
		
									<view class="free">
		
										<view class="fast" v-if="item.fastNum">
											<view class="fast-font">
												快
											</view>
											<view class="num">
		
												{{item.fastAvailableNum}}/{{item.fastNum}}
											</view>
										</view>
										<view class="slow" v-if="item.slowNum">
											<view class="slow-font">
												慢
											</view>
											<view class="num">
												{{item.slowAvailableNum}}/{{item.slowNum}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		
		</view>

		<Tabbar :current="2" ref="tabbarMain"></Tabbar>

	</view>
</template>

<script>
	import * as indexAPI from '@/apis/index.js'
	import * as api from '@/apis/site.js';
	import Tabbar from '@/components/Tabbar.vue';
	import Chargermap from '@/components/Chargermap2.vue';
	import jpDropdown from '@/components/Udropdown.vue';

	import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
	import * as WxJsApi from '@/utils/wxJsApi.js'

	export default {
		components: {
			Chargermap,
			Tabbar,
			uniCombox,
			jpDropdown
		},
		data() {
			return {
				personInfo: {},
				loading: false,
				viewMode: false, //列表
				inputStyle: {
					backgroundColor: 'transparent',
					"font-size": '32rpx',
				},
				defaultStation:[],
				cities: ['荆州市'],
				radiuses: ['1公里', '2公里', '5公里', '10公里', '20公里', '50公里', '100公里', '200公里'],
				types: ['全部', '直流快充', '交流慢充'],
				stationTypes: ['全部', '公共充电桩', '个人充电桩'],
				info: {
					miles_type: [{
							distance: 1,
							text: '1公里'
						},
						{
							distance: 2,
							text: '2公里'
						},
						{
							distance: 5,
							text: '5公里'
						},
						{
							distance: 10,
							text: '10公里'
						},
						{
							distance: 20,
							text: '20公里'
						},
						{
							distance: 50,
							text: '50公里'
						},
						{
							distance: 100,
							text: '100公里'
						},
						{
							distance: 200,
							text: '200公里'
						}
					],
					obc_type: [{
						value: '',
						text: '全部'
					}, {
						value: 1,
						text: '直流快充'
					}, {
						value: 2,
						text: '交流慢充'
					}],
					obc_status: [{
						value: 0,
						text: '对外开放'
					}, {
						value: 1,
						text: '不对外开放'
					}],
					obc_voltage: [{
						value: 0,
						text: '低于700V'
					}, {
						value: 1,
						text: '700V及以上'
					}],
					obc_power: {
						minValue: 0,
						maxValue: 1000
					},
					obc_stationType: [{
						value: '',
						text: '全部'
					}, {
						value: 1,
						text: '公共充电桩'
					}, {
						value: 50,
						text: '个人充电桩'
					}]
				},
				preference: {
					miles_index: 3,
					obc_stationType_index: 0,
					obc_type_index: 0,
					obc_status_index: 0,
					obc_voltage_index: 0,
					save_preference: false,
					obc_power: {
						minValue: 0,
						maxValue: 500
					}
				},

				area: '荆州市',
				raidus: '10公里',
				type: '全部',
				stationType: '全部',
				longitude: '',
				latitude: '',
				message: '',
				stationslist: [],
				stationsmap: [],
				pointTimeOut: true,
				dropdownShow: false,
				currentIndex: 0,

			}
		},
		onUnload() {
			//this.timeOut = false;
			this.pointTimeOut = false;
		},
		onHide() {
			//this.timeOut = false;
			this.pointTimeOut = false;
		},
		onShow() {
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(2);
			}
			if (!this.pointTimeOut) {
				this.pointTimeOut = true
				this.getPointTimeOut();
			}
			this.$nextTick(()=>{
				this.type = this.info.obc_type[this.preference.obc_type_index].text;
				this.raidus  = this.info.miles_type[this.preference.miles_index].text;
				this.stationType= this.info.obc_stationType[this.preference.obc_stationType_index].text;
				
				
				if(this.viewMode){
					this.$refs.amap.init();
					this.searchStationData()
				 
										 
				}
				
			})

		},
		onReady() {
			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
			if (this.carhelp.getPersonInfo()) {
				//	this.userId = this.carhelp.getPersonInfo().id;
				this.personInfo = this.carhelp.getPersonInfo();
			}
			this.getPointTimeOut();
		},
		methods: {
			navigate(){
				//('naviage to ')
				uni.navigateTo({
					url:'/pages/search/search'
						 
				})
			},	
			isEnabled() {
				if (this.viewMode) {
					if (this.show)
						return false;
				}
				return true;
			},
			stationDetail(item) {
				if (!this.isEnabled()) {
					return;
				}


				uni.navigateTo({
					url: 'stationAndPile/stationDetails?id=' + item.id
				})
			},
			setCenter(){
						//('getPoint')
						WxJsApi.getLocation().then((res) => {
							
							this.latitude = parseFloat(res.latitude);
							this.longitude = parseFloat(res.longitude);
							//let data = {position:{latitude:latitude,longitude:longitude}};
						 
							 let posCenter= {longitude: this.longitude,latitude: this.latitude};
							
							 this.$refs.amap.setCenter(posCenter);
							 this.searchStationData();
						}).catch(error => {
							uni.showToast({
								title:JSON.stringify(error)
							})					
						})
						
			//			//('setCenter')
					},
			updateType2(e) {
				this.preference.obc_stationType_index = e.value;
				this.close();

			},
			swiperTransitionEnd(e){
			
			},
			swiperTransition (e) {
				//
			},
			updateType(e) {
				this.preference.obc_type_index = e.value;
				this.close();

			},
			updateRadius(e) {
				this.preference.miles_index = e.value;
				this.close();

			},
			selectOBSType(index) {
				this.preference.obc_type_index = index;
			},
			selectOBSType2(index) {
				this.preference.obc_stationType_index = index;
			},
			selectOBSStatus(index) {
				this.preference.obc_status_index = index;
			},
			selectOBCVoltage(index) {
				this.preference.obc_voltage_index = index;
			},
			selectMiles(index) {
				this.preference.miles_index = index;
			},
			swiperChange (e) {
					if(!this.viewMode){
						return
					}
						this.currentIndex = e.detail.current
						let station = this.stationsmap[this.currentIndex];
						
						let posCenter= {longitude: station.longitude,latitude: station.latitude};
			//			//('currentIndex'+JSON.stringify(this.currentIndex))
			//			//('currentIndex'+JSON.stringify(posCenter))
			//			//('station'+JSON.stringify(station))
						let bounds = this.$refs.amap.logMapInfo();
						/*if( (posCenter.latitude<bounds.bounds.northeast.lat && posCenter.latitude>bounds.bounds.sourthwest.lat)
						&&  (posCenter.longitude<bounds.bounds.northeast.lng && posCenter.longitude>bounds.bounds.sourthwest.lng)
						){
							//('bounds'+JSON.stringify(bounds));
							
						}else{			
							this.$refs.amap.setCenter(posCenter);				
						}*/
						
						this.$refs.amap.updateCharger(station);
						this.$refs.amap.setCenter(posCenter);
						  
					},
			listMode() {
				this.close_all();
				this.viewMode = false
			},
			mapMode() {
				//this.$refs.amap.setChargerList(this.stationslist);
				this.$refs.amap.init();
				
				//this.currentIndex = 0;
				this.close_all();
				this.searchStationData()
				this.viewMode = true
			},
			reset() {
				this.preference.obc_status_index = 0;
				this.preference.obc_voltage_index = 0;
				this.preference.obc_stationType_index = 0;

				this.preference.obc_type_index = 0;
				this.preference.miles_index = 3;
				this.preference.save_preference = false;
				//			this.$refs.obc_voltage.currentValue = [0,100];
				this.preference.obc_power.minValue = 0;
				this.preference.obc_power.maxValue = 500;
				this.preference.obc_power.minP = Math.floor((this.preference.obc_power.minValue / (this.info.obc_power
					.maxValue - this.info.obc_power.minValue)) * 100);
				this.preference.obc_power.maxP = Math.floor((this.preference.obc_power.maxValue / (this.info.obc_power
					.maxValue - this.info.obc_power.minValue)) * 100);
				//            //('minP'+this.preference.obc_power.minP)
				//            //('maxP'+this.preference.obc_power.maxP)
				//this.$refs.obc_voltage.reset(this.preference.obc_power);
				//			this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
				// 			//('reset')
			},

			close() {

				this.updateTypeSelector('')

				this.type = this.info.obc_type[this.preference.obc_type_index].text;
				this.raidus = this.info.miles_type[this.preference.miles_index].text;
				this.stationType = this.info.obc_stationType[this.preference.obc_stationType_index].text;

				if (this.preference.save_preference) {
					this.carhelp.set('preference', this.preference)
				}
				this.$refs.uDropdown.close();
				this.searchStationData();


			},
			clickMap(obj) {
				//this.show = false;
				
				if (obj == null || obj.type == null) return;
				if (obj.type == 'charger') {
					if (obj.obj != null) {

						let index = this.stationsmap.findIndex(item => item.id == obj.obj.id);
						this.currentIndex = index;
						//('find Index'+index);
					}

				}
			},
			getPoint() {
				if (this.stationslist.length != 0) {
					return
				}
				
				WxJsApi.getLocation().then((res) => {

					this.latitude = parseFloat(res.latitude);
					this.longitude = parseFloat(res.longitude);
					this.message = res.errMsg;
					
				
					if (res.errMsg != 'getLocation:ok') {
						uni.showToast({
							title: res
						})
					} else {
						uni.showToast({
							title: "定位中..."
						})
						this.searchStationData()
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			searchStationData(obj) {
				let data1 = {
					latitude: this.latitude,
					longitude: this.longitude,
					findType: "1",
					pageIndex: 1,
					pageSize: 999
				};
				if(obj){
					data1={
						...data1,
						...obj
					}
				}
				
				data1.type = this.info.obc_type[this.preference.obc_type_index].value;
				if (this.info.miles_type[this.preference.miles_index].distance != null)
					data1.raidus = this.info.miles_type[this.preference.miles_index].distance.toString();

				if (this.preference.obc_stationType_index != null) {
					data1.stationType = this.info.obc_stationType[this.preference.obc_stationType_index].value
				}
				//this.currentIndex = -1;
				//data1.findType = this.viewMode?"0":"1";
				uni.showLoading({})

				if (this.carhelp.getPersonInfo()) {
					data1.openId = this.carhelp.getOpenId()
				}
				this.loading = false
				api.getChargingStationData(data1).then(res => {
					uni.hideLoading()
					this.loading = true
					this.recordsTotal = res.data.recordsTotal;
					
					 var stationslist=res.data.data
					 if(this.viewMode){
						  this.stationsmap = stationslist;
						 this.$refs.amap.setChargerList(stationslist);
						// this.$refs.amap.init();
						
						if(this.currentIndex==-1||this.currentIndex>stationslist.length){
							this.currentIndex=0
						}
						 if (stationslist.length) {
						 	this.$refs.amap.updateCharger(stationslist[this.currentIndex]);
						 }
						 let posCenter= {longitude: this.longitude,latitude: this.latitude};
						 							
						 this.$refs.amap.setCenter(posCenter);
						 this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)
						 
						// this.$refs.amap.calcDistances([this.longitude, this.latitude], this.stationslist)
						 
					 }else{
						 this.stationslist = stationslist;
					 }
					 if(this.stationslist.length==0){
						 this.getChargingStationDetail()
					 }
					 
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			getChargingStationDetail(){
				var defaultStation=process.car.defaultStation
				for(var item in defaultStation){
					api.getChargingStationDetail({
						stationId:defaultStation[item]
					}).then((res) => {
						
						var station=res.data.station
						//this.MapLoaderthen(station)
						
						this.defaultStation.push(station)
					}).catch(error => {
					
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
				
			},
			getPointTimeOut() {

				setTimeout(() => {
					if (this.pointTimeOut) {
						this.getPoint();
					}
				}, 1000)

			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			},
			close_all() {

				this.updateTypeSelector('')

			},
			updateTypeSelector(val) {
				
				var sz = ["raidus", "type", "stationType", 'city']
				for (var i in sz) {
					if (i == val && val != '') {

					} else {
						this.$refs[sz[i]].closeSelector();
					}
				}
				//this.show = false;		
			},
			mapdown() {
				//this.isReady = true;
				//this.$refs.amap.getLocation ();
				//let state = {};
				uni.getSystemInfo({
					success: (res) => {

						let scrollH = res.windowHeight; // - uni.upx2px(88) - navbarH
						let scrollW = res.windowWidth;
						this.$refs.amap.setMyStyle("height:" + (scrollH - 88 - 50) + "px;width:" + scrollW +
							"px;");
					}
				})

			},
			moveEnd(e) {
				//('moveEnd')
				this.close_all();
				let posCenter = this.$refs.amap.logMapInfo();
				////('posCenter'+JSON.stringify(posCenter))		
					
				
					
				if(this.latitude==e.center.lat&&this.longitude== e.center.lng){
				return	
				}
				this.latitude= e.center.lat
				this.longitude= e.center.lng
				this.searchStationData();
			},
			moveStart(e) {
				//this.close_all();
			},
			onClicked(e) {
				this.close_all();
				////('onClicked e'+JSON.stringify(e))
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/_theme.scss";

	.ujp-navbar-main {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.ujp-navbar-main1 {
			display: flex;
			flex-direction: row;
			height: 100%;
			align-items: center;
			margin-top: 0rpx;
			padding-top: 0rpx;
			padding-bottom: 20rpx;
		}

		.ujp-navbar-main2 {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
			align-items: center;
		}
	}


	.preference_group_item {
		padding: 15rpx;

	}

	.preference_group {
		padding-bottom: 20rpx;
	}

	.preference {
		background-color: #ffffff;
		left: 0rpx;
		//	position: absolute

	}

	.preference_item {
		margin-bottom: 10rpx;
		margin-left: 20rpx;
		text-align: center;
		border-style: none;
		width: 20%;
		height: 56rpx;

		/*	line-height: 14px;*/
	}

	.content-s {
		height: 640rpx;
		overflow-y: scroll;
		text-align: left;
	}

	.preference_item_medium {
		margin-bottom: 10rpx;
		margin-left: 20rpx;
		text-align: center;
		border-style: none;
		min-width: 22%;
		height: 56rpx;

		@include themeify {
			font-size: themed('font-size2');
			line-height: themed('font-size2');
		}

		/*	line-height: 14px;*/
	}

	.preference_item_plus {
		margin-bottom: 10rpx;
		margin-left: 20rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 28%;
		border-style: none;
		height: 56rpx;

		@include themeify {
			font-size: themed('font-size2');
			line-height: themed('font-size2');
		}

		/*	line-height: 14px;*/
	}

	.preference_label {
		@include themeify {
			color: themed('font_colorLabel');
			font-size: themed('font-size1');
			font-weight: themed('fontWeight');
		}

		margin-left: 20rpx;
		margin-bottom: 100rpx;
	}

	.pre-btn {
		width: 100%;
		height: 96rpx;
		z-index: 999;
	}

	.btn-1,
	.btn-2 {
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		border-top: 1px solid rgba(225, 228, 232, 100);
	}

	.station,
	.location,
	.state1 {
		box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
	}

	//定位

	.location {
		width: 91.4%;
		background-color: #ffffff;
		height: 120px;
		display: flex;
		justify-content: space-between;
		margin: 20px auto 0;
		border-radius: 8px;
		border: #F2F4F4 1px;

		.location-text {
			padding: 24px 0 0 28px;

			.text-1 {
				height: 16px;
				line-height: 16px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: left;
			}

			.text-2 {
				height: 17px;
				line-height: 17px;
				color: rgba(102, 102, 102, 100);
				font-size: 12px;
				text-align: left;
				margin-top: 4px;
				white-space: nowrap; //强制不换行
				text-overflow: ellipsis; //文本超出出现省略号
				overflow: hidden;
			}
			.text-view{
				display: flex;
			}
			.text-3 {
				width: 80px;
				height: 24px;
				line-height: 22px;
				border-radius: 50px;
				color: rgba(0, 185, 98, 100);
				font-size: 12px;
				text-align: center;
				border: 1px solid rgba(0, 185, 98, 100);
				margin-top: 11px;
			}
			.text-4{
				margin-left: 10px;
				color:  #ff9900;
				border: 1px solid #ff9900;
			}
		}

		.img-box {
			width: 120px;
			height: 120px;
			margin-right: 20px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.carNone {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		img {
			width: 100%;
			height: 100%;
		}

		p {
			margin-top: -60px;
		}
	}
.charing-slow-2{
	 margin: 0 0 20rpx 0 !important;
	 // border-bottom: 1px solid rgba(238, 242, 240, 100);
	 
 }
	.charing-slow {
		box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
		background-color: #fff;
		margin: 26rpx;
		border-radius: 16rpx;
		padding: 40rpx 24rpx 24rpx;
		position: relative;
		left: 0;
		right: 0;
	}
.min-h{
		min-height: 65px;
	}
	.sign {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		.sign-tag {
			height: 20px;
			line-height: 20px;
			border-radius: 8rpx;
			//background-color: rgba(255, 255, 255, 100);
			//color: rgba(255, 139, 0, 100);
			font-size: 24rpx;
			text-align: center;
			//border: 1px solid rgba(255, 139, 0, 100);
			padding: 0 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}
		.sign-0 {
			background: linear-gradient(89.4deg, rgba(129,97,255,1) 2.8%,rgba(169,147,255,1) 98.02%);
			color: rgba(255, 255, 255, 1);
			padding: 0 10rpx;
			//border: 1px solid rgba(255, 139, 0, 100);
		}
		.sign-5 {
			background: linear-gradient(89.4deg, rgba(255,61,0,1) 2.8%,rgba(255,134,0,1) 98.02%);
			color: rgba(255, 255, 255, 1);
			padding: 0 10rpx;
		}
		.sign-1 {
			height: 20px;
			line-height: 20px;
			border-radius: 4px;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(255, 139, 0, 100);
			font-size: 12px;
			text-align: center;
			border: 1px solid rgba(255, 139, 0, 100);
			padding: 0 4px;
			margin-right: 8px;
			margin-bottom: 4px;
		}

		.sign-2 {
			height: 20px;
			line-height: 20px;
			border-radius: 4px;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(153, 153, 153, 100);
			font-size: 12px;
			text-align: center;
			border: 1px solid rgba(204, 204, 204, 100);
			padding: 0 4px;
			margin-right: 8px;
			margin-bottom: 4px;
		}

		.sign-3 {
			height: 20px;
			line-height: 20px;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 100);
			color: #8161FF;
			font-size: 24rpx;
			text-align: center;
			border: 1px solid #8161FF;
			padding: 0 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}

		.sign-4 {
			height: 20px;
			line-height: 20px;
			border-radius: 8rpx;
			background-color: rgba(255, 255, 255, 100);
			color: #00B962;
			font-size: 24rpx;
			text-align: center;
			border: 1px solid #00B962;
			padding: 0 8rpx;
			margin-right: 16rpx;
			margin-bottom: 8rpx;
		}
	}

	.address {
		width: 100%;
		line-height: 20px;
		display: flex;
		justify-content: space-between;

		.name {
			font-size: 16px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.distance {
			color: rgba(102, 102, 102, 100);
			text-align: end;
			font-size: 30rpx;
			width: 180rpx;
			min-width: 180rpx;

			.iconfont {
				font-size: 12px;
				margin-right: 2px;
			}
		}

		@include themeify {
			font-size: themed('font-size5');
			line-height: themed('font-size7');
		}

		/* 		font-size: 11px;*/
		font-weight: 600;
		color: #101010;
	}

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

	}

	.price {
		display: flex;
		align-items: baseline;
		

		.price-1 {
			line-height: 40rpx;

			.num {

				color: rgba(255, 98, 0, 100);


				font-size: 44rpx;
				height: 44rpx;
				text-align: left;
				font-family: Roboto-medium;
			}

			.unit {
				// font-size: 12px;
				color: rgba(102, 102, 102, 100);

				@include themeify {
					// font-size: themed('font-size2');
					font-size: 24rpx;

					height: themed('font-size2');

				}

				text-align: left;
				font-family: AlibabaPuHui-regular;

				margin-left: 8rpx;
			}
		}

		.price-2 {
			color: rgba(153, 153, 153, 100);
			margin-left: 6rpx;
			text-decoration: line-through;
			font-size: 24rpx
		}
		.price-3 {
			font-size: 24rpx;
			color: #fff;
			margin-left: 8rpx;
			padding-right: 9rpx;
			 background:#00B962 ;
			 border-radius: 8rpx;
			.num1{
				 padding-left:  12rpx;
				border-radius: 8rpx 0 8rpx 8rpx;
				 padding-right: 18rpx;
				 background: #121212;
				 -webkit-clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);
				 clip-path:  polygon(0 0, 93% 0, 84% 100%, 0% 100%);
				 
			}
			 
		}
	}

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

		.slow,
		.fast {
			display: flex;

			.sp-font {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4px;
				background-color: #7a68f6;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				margin-right: 2rpx;
			}

			.fast-font {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4px;
				background-color: rgba(186, 240, 215, 100);
				color: rgba(0, 130, 69, 100);
				font-size: 28rpx;
				text-align: center;
				margin-right: 2rpx;
			}

			.slow-font {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4px;
				background-color: rgba(226, 226, 226, 100);
				color: rgba(128, 128, 128, 100);
				font-size: 28rpx;
				text-align: center;
				margin-right: 2rpx;
			}

			.num {
				font-size: 32rpx;
				color: rgba(0, 145, 67, 100);
				line-height: 40rpx;
			}
		}

		.slow {
			margin-left: 16rpx;
		}
	}
	
	
	.chargerCard{
	    z-index: 999;
		background-color: #fff;
		margin: 0 24rpx;
		border-radius: 16rpx;
		// overflow: hidden;
		bottom: 68px;
		left: 0;
		right: 0;	
		position: fixed; 
		// height: 380rpx;
		
		
		
		// @include themeify{
		// 	height:themed('cardHeight'); 
		// } 
		
	}
</style>