JP-ChargeTeam51/pages/searchPile/stationAndPile/stationDetails.vue

<template>
	<view>
		<ujp-navbar title="站点详情">
			<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">

				<view class="iconfont service">
					&#xe60d;
				</view>
			</view>
		</ujp-navbar>

		<u-alert-tips type="warning" @click="noticeShow=false" icon="volume-up-fill"
			v-show="noticeShow&&stationDetail.station&&stationDetail.station.maxSoc&&stationDetail.station.maxSoc!=100"
			:descStyle="{
			     fontSize: '28rpx',
			     color: '#ef7a30',
		 }" :show-icon="true"
			:description="'【充电SOC限制】为保障充电安全，并积极响应主管部门对新能源汽车充电安全工作，从即日起，该站充电设施SOC上限阈值为'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%，即充电量达到满充电量'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%时，充电设施将自动结束充电。'">

		</u-alert-tips>
		<u-notice-bar mode="vertical" font-size="36" :more-icon="true" @click="noticeShow=true"
			v-show="!noticeShow&&stationDetail.station&&stationDetail.station.maxSoc&&stationDetail.station.maxSoc!=100"
			:list="['【充电SOC限制】为保障充电安全，并积极响应主管部门对新能源汽车充电安全工作，从即日起，该站充电设施SOC上限阈值为'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%，即充电量达到满充电量'+(stationDetail&&stationDetail.station&&stationDetail.station.maxSoc?stationDetail.station.maxSoc:'')+'%时，充电设施将自动结束充电。']">
		</u-notice-bar>


		<view class="head" v-if="stationDetail.station!=null">
			<img @click="previewImage(stationDetail.station.image)" v-if="stationDetail.station.image"
				:src="stationDetail.station.image" mode=""></img>
			<img v-else src="@/assets/img/chargesite_default.png" mode=""></img>
		</view>
		<!-- 站点详情 -->
		<view class="stationDetail">
			<view class="stationDetailHead">


				<!-- 标题 -->
				<view class="title">
					{{stationDetail.station.name}}
				</view>
				<view v-if="quickChargeReduceMethod1(stationDetail.station)&&personInfo&&personInfo.userType==2"
					style="margin-top: 10rpx;color: rgba(255, 121, 0, 1);font-size: 28rpx;    display: flex; align-items: center;">

					<span style="color: #fff;background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
				   border-radius: 4px;
				    padding: 0rpx 10rpx;
				    margin-right: 8rpx;
				    font-size: 24rpx;
				   line-height:40rpx;
				">活动</span>
					快充订单满{{stationDetail.station.quickChargeDegree}}度服务费{{discountRatio10(stationDetail.station.quickChargeDiscountRatio)}}折
				</view>
				<view v-if="quickChargeReduceMethod2(stationDetail.station)&&personInfo&&personInfo.userType==2"
					style="margin-top: 10rpx;color: rgba(255, 121, 0, 1);font-size: 28rpx;    display: flex; align-items: center;">

					<span style="color: #fff;background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
				   border-radius: 4px;
				    padding: 0rpx 10rpx;
				    margin-right: 8rpx;
				    font-size: 24rpx;
				   line-height:40rpx;
				">活动</span>
					喜迎国庆，充电有奖
				</view>
				<!-- 标签 -->
				<view class="tags sign">
					<view class="tags1 sign-1"
						v-if="station.giveDiscount&&station.discountRatio&&station.discountRatio!=100">
						会员{{discountRatio10(station.discountRatio)}}折</view>

					<view class="tags1 sign-3" v-if="station.category=='超充'">160kW超充站</view>
					<view class="tags1 sign-4" v-if="stationDetail.station.nightLowPriceEnabled">
						夜间超低价</view>
					<view class="tags1 sign-2" v-if="stationDetail.station.platformType==1">自营站</view>
					<view class="tags1 sign-2" v-if="stationDetail.station.tagList.length != 0"
						v-for="(tagName,tagIndex) in stationDetail.station.tagList"
						:style="'border: 1px solid '+tagNameBy(tagName,1)+';color:'+tagNameBy(tagName,1)"
						:key="tagIndex">{{tagNameBy(tagName,0)}}</view>
				</view>
				<u-line color="#EEF2F0" margin="24rpx 0"></u-line>
				<!-- 定位 -->
				<template v-if="stationDetail&&stationAddressList&&stationAddressList.length">


					<view class="position" v-for="(item ,i) in stationAddressList" :key="i">

						<view class="block">
							{{item.areaTitle}}
						</view>
						<view class="address">
							{{item.address}}
						</view>
						<view class="distance" @click="map(item)">
							<view class="distance-icon">
								<img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
							</view>
							<view class="distance-text">
								{{item.distance!=null&&item.distance>0.1 ? item.distance.toFixed(1)+'公里':'小于100米'}}
							</view>
						</view>
					</view>
				</template>
				<view class="position" v-else>

					<view class="address">
						{{stationDetail.station.address}}
					</view>
					<view class="distance" @click="map()">
						<view class="distance-icon">
							<img src="../../../assets/img/riFill-navigation-fill@1x.png" alt="">
						</view>
						<view class="distance-text" v-if="stationDetail.station.distance">
							{{stationDetail.station.distance!=null&&stationDetail.station.distance>0.1 ? stationDetail.station.distance.toFixed(1)+'公里':'小于100米'}}

						</view>
					</view>
				</view>
			</view>
			<view class="stationDetailBody">


				<!-- 充电桩类型 -->
				<view class="type" v-if="numShowBl">
					<view class="type-box" v-if="stationDetail.station.superNum" :class="{
					'checked':flag=='super',
					numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0)
				}" @click="flag!='super'?flag='super':flag=''">
						<view class="box-top">
							<view class="super">
								超
							</view>
							<view class="pile-type">
								直流超充
							</view>
						</view>
						<view class="pile-amount">
							<view class="super">
								{{stationDetail.station.superAvailableNum}}空闲
							</view>
							<view class="cut">
								|
							</view>
							<view class="sum">
								{{stationDetail.station.superNum}}总
							</view>
						</view>
						<!-- 尖角 -->
						<view class="angle" v-if="flag=='super'">
						</view>

					</view>
					<view class="type-box" v-if="stationDetail.station.fastNum-stationDetail.station.superNum" :class="{
					'checked':flag=='fast',
					numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0),
					numShowviewleft:stationDetail.station.slowNum
				}" @click="flag!='fast'?flag='fast':flag=''">
						<view class="box-top">
							<view class="fast">
								快
							</view>
							<view class="pile-type">
								直流快充
							</view>
						</view>
						<view class="pile-amount">
							<view class="fast">
								{{stationDetail.station.fastAvailableNum-stationDetail.station.superAvailableNum}}空闲
							</view>
							<view class="cut">
								|
							</view>
							<view class="sum">
								{{stationDetail.station.fastNum-stationDetail.station.superNum}}总
							</view>
						</view>
						<!-- 尖角 -->
						<view class="angle" v-if="flag=='fast'">
						</view>

					</view>
					<view class="type-box" v-if="stationDetail.station.slowNum" :class="{
					 'checked':flag=='slow',
					numShowview2:(stationDetail.station.superNum==0||stationDetail.station.slowNum==0||stationDetail.station.fastNum-stationDetail.station.superNum==0)
				}" @click="flag!='slow'?flag='slow':flag=''">
						<view class="box-top">
							<view class="slow">
								慢
							</view>
							<view class="pile-type">
								交流慢充
							</view>
						</view>
						<view class="pile-amount">
							<view class="free">
								{{stationDetail.station.slowAvailableNum}}空闲
							</view>
							<view class="cut">
								|
							</view>
							<view class="sum">
								{{stationDetail.station.slowNum}}总
							</view>
						</view>
						<!-- 尖角 -->
						<view class="angle" v-if="flag=='slow'">

						</view>
					</view>


				</view>
				<!-- 充电桩状态 -->
				<view class="pile-state">
					<view v-if="quickChargeReduceMethod1(stationDetail.station)&&personInfo&&personInfo.userType==2"
						style="margin-bottom: 10rpx;color: rgba(255, 121, 0, 1);font-size: 28rpx;    display: flex; align-items: center;">

						<span style="color: #fff;background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
					  border-radius: 4px;
					   padding: 0rpx 10rpx;
					   margin-right: 8rpx;
					   font-size: 24rpx;
					  line-height:40rpx;
					">活动</span>
						快充订单满{{stationDetail.station.quickChargeDegree}}度服务费{{discountRatio10(stationDetail.station.quickChargeDiscountRatio)}}折
					</view>
					<view v-if="quickChargeReduceMethod2(stationDetail.station)&&personInfo&&personInfo.userType==2"
						style="margin-bottom: 10rpx;color: rgba(255, 121, 0, 1);font-size: 28rpx;    display: flex; align-items: center;">

						<span style="color: #fff;background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
					  border-radius: 4px;
					   padding: 0rpx 10rpx;
					   margin-right: 8rpx;
					   font-size: 24rpx;
					  line-height:40rpx;
					">活动</span>
						喜迎国庆，充电有奖
					</view>
					<!-- 总计 -->
					<view class="statistics">
						<view class="free">
							{{pilestate.num1}} 空闲
						</view>
						<view class="cut">
							|
						</view>
						<view class="busy">
							{{pilestate.num2}} 占用
						</view>
						<view class="cut">
							|
						</view>
						<view class="malfunction">
							{{pilestate.num3}}故障
						</view>
					</view>

					<!-- 充电枪详情 -->
					<view class="gun-details">
						<view class="item" v-for="(item,index) in stationDetailDevices" v-show="getShow(item)" @click="test(item)"
							:key="index">
							<view v-if="item.deviceAddressShow==1" class="deviceAddressShow deviceAddressShow1">

								<img src="@/assets/img/9-4/标题装饰左.svg">
								{{item.showTitle}}
								<img src="@/assets/img/9-4/标题装饰右.svg">

							</view>
							<view v-if="item.deviceAddressShow==2" class="deviceAddressShow deviceAddressShow2">
								<img src="@/assets/img/9-4/标题装饰左.svg">
								{{item.showTitle}}
								<img src="@/assets/img/9-4/标题装饰右.svg">

							</view>

							<view class="itemShowOpen">
							 
								<view class="itemView">
									<!-- 充电桩状态 -->
									<view class="state" v-if="item.device.online" :class="{
							//预约
							'charging a ':item.enableShare&&!item.enableShareWithinTime&&item.device.online,
							
							'charging b ':item.enableShare&&item.workStatus!=0,
							'charging c ':item.workStatus==2,
							//插枪
							'off-line a ':(item.workStatus == 0&&item.insertStatus&&stationDetail.station.stationType!=50),
							'off-line b':item.isRed&&item.workStatus!=2,
							
							 
							
						}">
										<view class="state-icon">
											<img src="../../../assets/img/pileIcon.svg" alt="">
										</view>
										<view class="state-text"
											v-if="item.workStatus == 0&&item.insertStatus&&stationDetail.station.stationType!=50">
											已插枪
										</view>
										<view class="state-text" v-else>
											<span v-if="item.workStatusText.length<4">{{item.workStatusText}}</span>
											<span v-else-if="item.workStatusText.length==4"
												style="    display: flex; flex-direction: column;">
												<span>{{item.workStatusText.substring(0,2)}}</span>
												<span>{{item.workStatusText.substring(2)}}</span>
											</span>
											<span v-else>{{item.workStatusText}}</span>
										</view>
									</view>
									<view class="state off-line" style="width: 96rpx;" v-else>
										<view class="state-icon">
											<img src="../../../assets/img/pileIcon.svg" alt="">
										</view>
										<view class="state-text ">
											离线
										</view>
									</view>

									<!-- 详细信息 -->
									<view class="infos">
										<view class="gun-name">
											<span
												v-if="item.sortNo">{{item.sortNo}}号<text>/</text></span>{{item.device.name}}{{item.device.gunList.length>1?'枪'+channelNoShow(item.channelNo,item.device.manufacturer,item.customNo):''}}
										</view>
										<groupItem v-if="!item.device.groupName"
										 
										 :item="item" :openlist="openlist" @setOpen="setOpen" ></groupItem>
										
									</view>
								</view>
								
								
										 
								<template
									v-if="!item.isRed&&item.enableShare&&item.enableShareWithinTime&&item.device.online">
									<!-- 充电按钮 -->
									<view class="charge" v-if="!enableAppointmentBl(item)"
										@click="book(item,item.isAppointment&&!item.insertStatus)"
										:class="item.isAppointment&&!item.insertStatus?'':'not-open-tag'">
										预约
									</view>
									<!-- 充电按钮 -->
									<view class="charge"
										:style="item.haveLock&&item.lockStatus==1?'background-color:#009ED7':''"
										@click="book2(item,item.enableShare&&item.enableShareWithinTime)" :class="{
									'not-open-tag':!(item.enableShare&&item.enableShareWithinTime),
									'not-enable-Appointment':enableAppointmentBl(item)
								}">
										充电
									</view>
								</template>
								<!-- 电量 -->
								<view class="electric-quantity" v-if="item.workStatus == 2 ">
									<img src="../../../assets/img/electricQuantity.svg" alt="">
									<view class="" v-if="true" :class="{
														percentage:item.soc,
														percentage2:!item.soc
													}">
										{{item.soc?item.soc+'%':'充电中'}}
									</view>
									<view v-else class="percentage2">
										充电中
									</view>
								</view>
						
							</view>
							<view  class="item-tip" v-if="item.device.groupName">
								<groupItem :item="item" :openlist="openlist" @setOpen="setOpen"  ></groupItem>
							</view>
							
							<view class="open-time" v-show="openlist&&openlist.get(item.id)">
								<table>
									<tr v-if="pricesInfoCurrent">
										<td colspan="2">当前电价:
											<b style="color:#080808;margin-left: 4px;"
												v-if="(station&&station.giveDiscount||pricesInfoCurrent2.discountServicePrice)&&(!personInfo||personInfo.userType==1)">{{((pricesInfoCurrent.servicePrice*1000+pricesInfoCurrent.electricityPrice*1000)/1000).toFixed(2)}}元/度</b>
											<b v-else
												style="color:#080808;margin-left: 4px;">{{pricesInfoCurrent.costPrice.toFixed(2)}}元/度</b>

										</td>

									</tr>
									<tr v-if="item.device.deviceAddress">
										<td colspan="2">充电桩地址:
											<span style="  margin-left: 4px;">{{item.device.deviceAddress}}</span>
										</td>

									</tr>
									<tr>
										<td>开放充电时段:</td>


										<td
											v-if="!item.enableShare||!(item.sharedWeekSettingList&&item.sharedWeekSettingList.length)">
											充电功能未开放</td>


										<template v-else v-for="(time,index) in  item.sharedWeekSettingList">

											<td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>

										</template>

									</tr>
									<template v-if="item.enableShare"
										v-for="(time,index) in  item.sharedWeekSettingList">

										<tr :key="index" v-if="index==1">
											<td></td>
											<td>{{time.startTime}}-{{time.endTime}}</td>
										</tr>

									</template>



									<tr>
										<td>开放预约时段:</td>


										<td v-if="enableAppointmentBl(item)">
											预约功能未开放
										</td>
										<template v-else v-for="(time,index) in  item.reserveWeekSettingList">
											<td :key="index" v-if="index==0">{{time.startTime}}-{{time.endTime}}</td>
										</template>
									</tr>
									<template v-if="item.enableAppointment"
										v-for="(time,index) in  item.reserveWeekSettingList">

										<tr :key="index" v-if="index==1">
											<td></td>
											<td>{{time.startTime}}-{{time.endTime}}</td>
										</tr>

									</template>


								</table>
							</view>
						</view>

					</view>

				</view>

				<!-- 价格信息 -->
				<view class="price-infos" v-if="pricesInfoCurrent2">
					<view class="title">
						价格信息<text>（{{pricesInfoCurrent.startTime==pricesInfoCurrent2.startTime?'当前时段 ':''}}{{pricesInfoCurrent2.startTime}}-{{pricesInfoCurrent2.endTime}}）</text>
					</view>

					<view class="classify"
						v-if="(!personInfo||personInfo.userType==1)&&station&&(station.giveDiscount||(pricesInfoCurrent2.discountServicePrice))">
						<view class="item item-visitor">
							<view class="visitor">
								充电价格
							</view>
							<view class="unit-price">
								<text>{{(pricesInfoCurrent2.servicePrice+pricesInfoCurrent2.electricityPrice).toFixed(2)}}</text>

								<text class="unit">元/度</text>
							</view>
						</view>

						<view class="item item-member">
							<view class="visitor">
								会员价
							</view>
							<view class="unit-price">

								<text>{{pricesInfoCurrent2.costPrice.toFixed(2)}}</text>

								<text class="unit">元/度</text>
								<text class="register" @click="gotoUrl('pages/login/login')">注册</text>
							</view>
						</view>
					</view>
					<view class="classify" v-else-if="stationDetail.station&&stationDetail.station.tagList&&
				(stationDetail.station.tagList.indexOf('月卡')!=-1
				||stationDetail.station.tagList.indexOf('6折卡')!=-1
				||stationDetail.station.tagList.indexOf('自营站')!=-1)">


						<view class="item item-member-vip">
							<view class="visitor">
								充电价格
							</view>
							<view class="unit-price">
								<text>{{pricesInfoCurrent2.costPrice.toFixed(2)}}</text>

								<text class="unit">元/度</text>
							</view>

							<view class="unit-price2"
								v-if="(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(pricesInfoCurrent2.discountServicePrice))">

								原价：{{(pricesInfoCurrent2.electricityPrice+pricesInfoCurrent2.servicePrice).toFixed(2)}}元/度

							</view>
						</view>

						<view class="item item-vip" v-if="userId&&userCardBool&&userCard.classify==1">
							<view class="visitor">
								折扣卡会员价
							</view>
							<view class="unit-price">

								<text>{{(pricesInfoCurrent2.electricityPrice).toFixed(2)}}</text>

								<text class="unit">元/度</text>

								<view class="unit-price3">
									已开通
								</view>
							</view>
						</view>
						<view class="item " v-if="!userCardBool" :class="{
						'item-vip2':prevMonthKwhBL,
						'item-vip':!prevMonthKwhBL
					}">
							<template v-if="prevMonthKwhBL">
								<view class="visitor">
									6折卡会员价
								</view>
								<view class="unit-price">

									<text>{{showNumJP(pricesInfoCurrent2.electricityPrice+(pricesInfoCurrent2.servicePrice*0.6))}}</text>

									<text class="unit">元/度</text>
									<text class="register"
										@click="gotoUrl('pages/discountCard/productDetails')">开通</text>


								</view>
							</template>
							<template v-else>
								<view class="visitor">
									月卡价格
								</view>
								<view class="unit-price">

									<text>{{(pricesInfoCurrent2.electricityPrice).toFixed(2)}}</text>

									<text class="unit">元/度</text>
									<text class="register" v-if="userId&&!userCardBool"
										@click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">开通</text>
									<text class="register" v-if="userId&&userCardBool">
										已开通
									</text>
								</view>
							</template>




						</view>
						<view class="item item-vip3" :class="{
						'discount-card-4':userCard.cardType==4
					}" v-if="userId&&userCardBool&&userCard.classify==2">
							<view class="visitor" v-if="userCard.cardType==4">
								{{userCard.monthlyRentName}}
							</view>
							<view class="visitor" v-else>
								服务费{{userCard.serviceFeeDiscountRate/10}}折卡会员价
							</view>
							<view class="unit-price">

								<view class="unit"><span>{{thisendTime(userCard.endTime)}} 到期</span></view>

								<view class="unit" v-if="userCard.chargeDegreeLimit">
									<span>已用{{userCard.chargedDegree?userCard.chargedDegree.toFixed(0):0.00}}度 /
										共{{userCard.chargeDegreeLimit}}度</span></view>
										
								<view class="unit" v-if="userCard.chargeDegreeLimit==0&&userCard.saveInformation">
											<span>已用{{userCard.saveInformation.num}}次 /
											共省{{userCard.saveInformation.saveMoney}}元</span>
								</view>
								<u-line-progress :show-percent="false" active-color="#2979ff"
									:percent="thispercent(userCard)"></u-line-progress>

							</view>
						</view>


					</view>
					<view class="classify" v-else>


						<view class="item item-member-all">
							<view class="visitor">
								充电价格
							</view>
							<view class="unit-price">

								<text>{{pricesInfoCurrent2.costPrice.toFixed(2)}}</text>

								<text class="unit">元/度</text>

							</view>

							<view class="unit-price2"
								v-if="(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(pricesInfoCurrent2.discountServicePrice))">

								原价：{{(pricesInfoCurrent2.electricityPrice+pricesInfoCurrent2.servicePrice).toFixed(2)}}元/度

							</view>

						</view>
					</view>
					<!-- 提示 -->
					<p class="hint">*该价格为含服务费价格，实际价格以扫码价格为准。</p>
					<!-- 表格 -->
					<view class="chat-box" v-if="pricesInfoCurrent2.electricityPrice">
						<view class="chat-infos">
							<view class="item">
								<view class="name">
									<view class="icon icon1">

									</view>
									<view class="text">
										时段
									</view>
								</view>
								<view class="value">
									{{pricesInfoCurrent2.startTime}}-{{pricesInfoCurrent2.endTime}}
								</view>

							</view>
							<view class="item">
								<view class="name">
									<view class="icon icon2">

									</view>
									<view class="text">
										电价

									</view>
								</view>
								<view class="value">
									{{pricesInfoCurrent2.electricityPrice.toFixed(2)}}元/度
								</view>

							</view>

							<view class="item" style="margin-bottom:0">
								<view class="name">
									<view class="icon icon3">

									</view>
									<view class="text">
										服务费
									</view>
								</view>
								<view class="value" v-if="station">

									<span
										v-if="(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(pricesInfoCurrent2.discountServicePrice))">
										{{pricesInfoCurrent2.discountServicePrice.toFixed(2)}}元/度

									</span>

									<span v-else>{{pricesInfoCurrent2.servicePrice.toFixed(2)}}元/度</span>
								</view>


							</view>

							<view class="item"
								v-if="(personInfo&&personInfo.userType==2)&&station&&(station.giveDiscount||(pricesInfoCurrent2.discountServicePrice))">
								<view class="name">
									<view class=" ">

									</view>
									<view class="text">

									</view>
								</view>
								<view class="value value2">

									<span>(原价：{{pricesInfoCurrent2.servicePrice.toFixed(2)}}元/度)</span>
								</view>

							</view>


						</view>

					</view>
					<view class="chat_hhh" v-if="pricesInfoCurrent2.electricityPrice">
						<view class="chatTime" v-for="(item,i) in pricesInfo" :style="'width:'+getW(item)" :key="i"
							:class="{
							 current1: pricesInfoCurrent.startTime==item.startTime,
							 
							current2: pricesInfoCurrent2.startTime==item.startTime,
						 }" @click="pricesInfoCurrent2=item">

							<template v-if="station">
								<template
									v-if="(personInfo&&personInfo.userType==2)&&(station.giveDiscount||(item.discountServicePrice))">
									<span class="chats1"
										:style="'height:'+getH(item.discountServicePrice)">{{item.discountServicePrice}}</span>

								</template>
								<template v-else>
									<span class="chats1"
										:style="'height:'+getH(item.servicePrice)">{{item.servicePrice}}</span>

								</template>
							</template>



							<span class="chats2" :style="'height:'+getH(item.electricityPrice)">
								<span>{{item.electricityPrice}}</span>
								<span class="chats0" v-if="pricesInfoCurrent.startTime==item.startTime">
									<span>当前</span>
									<span>时段</span>

								</span>
								<span class="chats9" v-else>
									<span>当前</span>
									<span>时段</span>

								</span>
							</span>
						</view>
					</view>
					<view class="chat_hhh_time" v-if="pricesInfoCurrent2.electricityPrice">
						<span>00:00</span>
						<span>12:00</span>
						<span>24:00</span>
					</view>
				</view>

				<!-- 附加信息 -->
				<view class="overhead-infos"
					v-if="stationDetail&&(stationDetail.station.describe||stationDetail.station.parkingDescription)">
					<view class="item" v-if="stationDetail.station.describe">
						<view class="title">
							营业时间
						</view>
						<view class="value">
							{{stationDetail.station.describe}}<text></text>
						</view>
					</view>
					<u-line margin="24rpx 0 " color="#F0F0F2"></u-line>
					<view class="item" v-if="stationDetail.station.parkingDescription">
						<view class="title">
							停车费
						</view>
						<view class="value"
							@click="()=>{if(stationDetail.station.parkingSimpleDescription){parkingTips=true}}">
							{{stationDetail.station.parkingDescription}}
							<text v-if="stationDetail.station.parkingSimpleDescription"><u-icon name="arrow-right"
									color="#999999" size="28"></u-icon></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="parkingTips" title="新能源汽车停车费说明" :title-style="{fontSize: '40rpx'}" confirm-text="知道了"
			confirm-color="#53b56b">
			<view style="padding: 15px;" v-html="stationDetail.station.parkingSimpleDescription"></view>
		</u-modal>
		<u-modal v-model="show" confirm-text="去看空闲桩" cancel-text="查看处罚规则" confirm-color="#00B962">
			<view class="" style="padding: 15px 20px;">
				因您近期存在预约超时未前往充电的违约行为，平台为保证每位车主的合理权益，
				对您作出停用预约充电功能1天的处罚。
				您可于<span style="color: #00b962;">2022年6月20日09时45分</span>后使用此功能。
			</view>
		</u-modal>
		<u-modal v-model="openModalBl" @confirm="confirmPhoneBl" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="consumerPhone"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
	</view>
</template>

<script>
	import * as indexAPI from '@/apis/index.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import MapLoader from '@/utils/AMap'
	import * as API from '@/apis/chargeProcess.js'
	import * as api from "@/apis/site.js"
	let _self;
	import {
		newDate,
		parseUnixTime

	} from '@/utils'
	import groupItem from '@/components/GroupItem.vue'
	
	export default {
		components: {
			groupItem
		},
		data() {
			return {
				openModalBl: false,
				showNt: false,
				showNtStep: 0,
				showNtValue: 30,
				pricesInfoCurrent: null,
				pricesInfoCurrent2: null,
				noticeShow: false,
				parkingTips: false,
				stationId: '',
				pricesInfo: [],
				devicesId: '',
				elderMode: false,
				userId: '',
				userCard: null,
				show: false,
				showtips: true,

				list: [{
						"name": "充电桩"
					},
					{
						"name": "价格说明"
					}
				],
				current: 0,
				currentPos: {
					/*						name:'荆鹏软件园充电站',
											longitude: 112.28468,
											latitude: 30.307094,*/
				},
				stationAddressList: [],
				station: {},
				stationDetail: {

					devices: [],
					slowPrice: null,
					station: {},
					fastPrice: null

				},
				openlist: null,
				personInfo: null,
				consumerPhone: "",
				info: {
					station: {

						time: '周一到周日 07:00~22:00(节假日除外)',
						/*						id:1,
												name:'荆鹏软件园充电站',
												longitude: 112.28468,
												latitude: 30.307094,
												type:'交流慢充',
												distance:0.1,
												address:'湖北省荆州市沙市区江津东路附155号'*/
					},
					prices: [

					],
					park: {
						price: '2小时免费停车'
					},
					uuid: '',
					setIntervalBool: true,
					priceList: [],
					platform: '',
					personInfo: {},
					consumerPhone: "",

					devices: {
						idleNum: 1,
						total: 6,
						items: [

						]
					},
				},
				carImg3span1: 0,
				carImg3span2: 0,
				canUse: false,
				flag: "",
				pilestate: {}
			}
		},

		onLoad(op) {
			uni.getSystemInfo({
				success: (res) => {
					// console.log("----------")
					// console.log(res.platform)
					this.platform = res.platform
				}
			})
			_self = this;

			//			document.getElementsByTagName('body')[0].style.setProperty('--mode',1)

			if (op.jg == '1') {
				this.current = 1;
			}
			if (op != null) {

				if (op.id != null && op.id != undefined) {
					this.stationId = op.id;

					this.getPriceList(op.id)

					this.getChargingStationDetail()


				}

			}
		},
		onHide() {
			this.setIntervalBool = false
			if (this.uuid) {
				clearInterval(this.uuid)
				this.uuid = '';
			}
		},
		onShow() {
			this.setIntervalBool = true
			if (!this.uuid) {
				this.uuid = setInterval(() => {
					if (this.setIntervalBool) {
						this.getChargingStationDetail(true)
					}
				}, 5 * 1000)
			}
			if (this.carhelp.getPersonInfo()) {

				this.getHomePage()

			}
			//this.getHomePage()
		},
		onUnload() {
			if (this.uuid) {
				clearInterval(this.uuid)

			}
		},
		onReady() {

			var consumerPhone = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.consumerPhone = consumerPhone
			}

			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';

			if (this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')

			if (this.carhelp.getPersonInfo()) {
				this.userId = this.carhelp.getPersonInfo().id;
				this.personInfo = this.carhelp.getPersonInfo()
				//this.userCard = this.carhelp.getPersonInfoPlus().userCard
				this.getHomePage()

			}
			WxJsApi.getWxConfig(['getLocation', 'openLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})

		},
		computed: {
			prevMonthKwhBL() {
				if (this.carImg3span1 >= 1000) {
					return false
				}
				return true
			},
			userCardBool() {
				if (this.userCard) {
					var date = new Date().getTime()
					var reg = new RegExp('-', 'gi')
					var str = this.userCard.endTime;
					//console.log(str.replace(reg,'/'))
					var date2 = newDate(str).getTime();
					if (date < date2) {
						return true;
					}
				}
				return false
			},
			numShowBl() {
				//true  tab false line

				var superNum = this.stationDetail.station.superNum;

				var fastNumZ = this.stationDetail.station.fastNum;
				var fastNum = fastNumZ - superNum;

				var slowNum = this.stationDetail.station.slowNum;
				if (superNum && fastNum == 0 && slowNum == 0) {
					return false
				}
				if (fastNum && superNum == 0 && slowNum == 0) {
					return false
				}
				if (slowNum && fastNum == 0 && superNum == 0) {
					return false
				}


				return true;
			},
			stationDetailDevices() {
				var sz = [];
				for (var i in this.stationDetail.devices) {
					var item = this.stationDetail.devices[i]
					for (var j in item.gunList) {
						var gun = item.gunList[j]
						gun.device = item;

						sz.push(gun);
					}
				}
				sz = sz.sort(function(it1, it2) {
					if (!it2.device.online) {
						return -1
					}
					var i = 1;
					if (it1.device.online) {
						i = 1
					}

					if (it1.enableShare && !it1.enableShareWithinTime) {
						i = 1
					}
					i = it1.workStatus == 0 ? -1 : 1
					if (it2.workStatus == 0) {
						i = 1
					}
					if (!it2.enableShare || it2.enableShare && !it2.enableShareWithinTime) {
						i = -1
					}

					//console.log(it1,i)
					return i
				})
				var addis = ""
				var showIng = true
				if (this.flag == '' && this.stationAddressList && this.stationAddressList.length > 1) {
					sz.forEach(item => {
						item.deviceAddressShow = 0
						if (item.workStatus == 0) {
							if (item.device.deviceAddress != addis && item.device.deviceAddress) {
								addis = item.device.deviceAddress
								item.deviceAddressShow = 1
								item.showTitle = addis
							}
						} else {
							if (showIng) {
								showIng = false
								item.deviceAddressShow = 2
								item.showTitle = "其他状态"
							}
						}

					})
				}

				return sz
			}

		},
		watch: {
			flag(b) {
				this.pilestate = this.getpilestate()
			}
		},
		methods: {
			getChargeList() {
				var obj = this.carhelp.get("carhelp_getChargeList")
				var time = new Date().toLocaleString().substr(0, 12).replace("T", " ");
				if (obj && time == obj.time) {

					this.carImg3span1 = parseInt(obj.electricQuantity);
					this.carImg3span2 = parseInt(obj.totalServiceMoney);
					console.log("carhelp_getChargeList", this.carImg3span1, this.carImg3span2)
					return
				}

				var date = new Date().getTime() - 30 * 1000 * 60 * 60 * 24;
				var startDate = parseUnixTime(new Date(date), '{y}-{m}-{d}');

				if (this.carhelp.getPersonInfo() || this.userId) {

					indexAPI.chargingRecordData({
						pageIndex: 1,
						pageSize: 999,
						startDate: startDate,
						// endDate: this.endDate
					}).then((res) => {


						var chargeList = res.data.data;
						var num1 = 0;
						var num2 = 0;
						for (var i in chargeList) {
							var obj = chargeList[i]
							if (obj.status == 2) {
								num1 += obj.electricQuantity
								num2 += obj.totalServiceMoney
							}
						}
						console.log(num1, num2)
						this.carImg3span1 = parseInt(num1);
						this.carImg3span2 = parseInt(num2);

						this.carhelp.set("carhelp_getChargeList", {
							time: time,
							electricQuantity: num1,
							totalServiceMoney: num2
						})

						// if(num2*0.4>20){

						// 	this.carImg3Bl=true;
						// }else{
						// 	this.carImg4Bl=true;
						// }

					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
			},
			getHomePage() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})



				API.userCard({
					stationId: this.stationId
				}).then((res) => {
					console.log(res)
					this.userCard = res.data.regUserCard
					this.canUse = res.data.canUse
					// if(this.canUse){
					// 	this.userCard=res.data.regUserCard
					// }
					uni.hideLoading()
					if (!this.userCardBool && !this.carImg3span1) {
						this.getChargeList()
					}


				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			thisendTime(endTime) {
				if (endTime) {
					var reg = new RegExp('-', 'gi')
					var str = endTime.substring(0, 10).replace(reg, '.')
					return str
				}
				return ''
			},
			thispercent(userCard) {
				if(userCard.classify==1||(userCard.classify==2&&userCard.chargeDegreeLimit==0)){
					var k1=daysDistance(userCard.startTime, userCard.endTime)
					var k2=this.thisdaysDistance(userCard.endTime)
					var p=(k1-k2)/k2* 100
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				}else if(userCard.classify==2){
					var p = 0
					
					if (userCard && userCard.chargeDegreeLimit) {
						p = userCard.chargedDegree / userCard.chargeDegreeLimit * 100
					}
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				}else{
					return 0
				}
			},
			getpilestate() {
				var num1 = 0
				var num2 = 0
				var num3 = 0
				for (var i in this.stationDetailDevices) {
					var item = this.stationDetailDevices[i]
					if (this.getShow(item)) {

						if (item.isRed && item.workStatus != 2 || !item.device.online) {
							num3++
						} else if (item.workStatusText == '空闲中') {
							num1++
						} else {
							num2++
						}

					}

				}

				return {
					num1: num1,
					num2: num2,
					num3: num3
				}
			},
			getShow(item) {
				if (this.flag == '') {
					return true
				} else if (this.flag == 'super' && item.device.chargingType == '超充') {
					return true
				} else if (this.flag == 'fast' && item.device.chargingType == '快充') {
					return true
				} else if (this.flag == 'slow' && item.device.chargingType == '慢充') {
					return true
				} else {
					return false
				}

			},
			getH(item) {

				return item * 100 + 'px'
			},
			getW(item) {
				var t1 = item.endTime.substring(0, 2)
				var t2 = item.startTime.substring(0, 2)
				var k = parseInt(t1) - parseInt(t2);
				return 100 / 24 * k + "%"
			},
			changeFlag() {
				this.flag = !this.flag
			},
			enableAppointmentBl(item) {
				if (!this.personInfo || this.personInfo.memberLevel != 4) {
					return true
				}

				return (!item.enableAppointment || !(item.reserveWeekSettingList && item.reserveWeekSettingList.length));
			},
			confirmPhoneBl() {
				this.openModalBl = false;

				uni.makePhoneCall({
					phoneNumber: this.consumerPhone //仅为示例
				});

			},
			confirmPhone() {

				if (this.stationDetail.station && this.stationDetail.station.contactPhone) {
					uni.makePhoneCall({
						phoneNumber: this.stationDetail.station.contactPhone //仅为示例
					});
				}

			},
			getChargingStationDetail(bl) {
				if (!this.stationId) {

					return false
				}
				var _self = this;
				if (!bl) {
					uni.showLoading({

					})
				}

				let data = {
					stationId: this.stationId
				};
				var distance = null;
				if (bl && this.stationDetail && this.stationDetail.station) {
					distance = this.stationDetail.station.distance
					//防止重新获取定位
				}

				api.getChargingStationDetail(data).then(function(res) {
					uni.hideLoading()

					if (res && res.result && res.data) {

						let data = res.data;

						_self.stationDetail = data;
						//console.log(data)
						if (_self.stationDetail.station.contactPhone) {
							_self.consumerPhone = _self.stationDetail.station.contactPhone
						}

						if (_self.stationAddressList.length == 0) {
							_self.stationAddressList = _self.stationDetail.stationAddressList
						}

						if (_self.stationDetail.station.parkingDescription != null && _self.stationDetail.station
							.parkingSimpleDescription != null) {
							var tagList = _self.stationDetail.station.tagList;
							for (var i = 0; i < tagList.length; i++) {
								if (tagList[i] == _self.stationDetail.station.parkingDescription) {
									tagList.splice(i, 1);
								}
							}
							_self.stationDetail.station.tagList = tagList;
						}

						if (distance) {
							_self.stationDetail.station.distance = distance
						}
						var totalNum = 0;
						// _self.stationDetail.station.chargingType1=0;
						// _self.stationDetail.station.chargingType2=0;
						// _self.stationDetail.station.chargingType3=0;

						// _self.stationDetail.station.chargingType1run=0;
						// _self.stationDetail.station.chargingType2run=0;
						// _self.stationDetail.station.chargingType3run=0;
						// for(var  i in _self.stationDetail.devices ){
						// 	var device=_self.stationDetail.devices[i]
						// 	var keyset="";
						// 	if(device.chargingType=='超充'){
						// 		keyset="chargingType1";
						// 	}
						// 	if(device.chargingType=='快充'){
						// 		keyset="chargingType2";
						// 	}
						// 	if(device.chargingType=='慢充'){
						// 		keyset="chargingType3";
						// 	}
						// 	for (let j = 0; j < device.gunList.length; j++) {

						// 		if(device.gunList[j].workStatus==0){
						// 			_self.stationDetail.station[keyset+"run"]++;
						// 		}
						// 		_self.stationDetail.station[keyset]++;
						// 	}
						// }
						if (_self.openlist == null) {
							_self.openlist = new Map();


							for (var i in _self.stationDetail.devices) {
								var device = _self.stationDetail.devices[i]
								totalNum += device.gunList.length
								for (let j = 0; j < device.gunList.length; j++) {

									_self.openlist.set(device.gunList[j].id, false);
								}
								//console.log(_self.stationDetail.station)

							}
							_self.list[0].name = "充电桩(" + totalNum + ")"
						}


						if (_self.stationDetail.station.distance == null && !bl) {
							_self.getPoint();
						}
						_self.pilestate = _self.getpilestate()
					}

				})
			},
			setOpen(item) {

				var obj = this.openlist.get(item.id)
				if (obj) {
					obj = false;

				} else {
					obj = true
				}
				this.openlist.set(item.id, obj)
				this.$forceUpdate()
			},

			change(index) {
				this.current = index;
				this.items = this.list[index].items;
			},
			previewImage(img) {
				let imgs = [];
				imgs.push(img);
				uni.previewImage({
					urls: imgs,
					current: 0
				})
			},
			book2(item, bl) {
				if (bl) {

				} else {
					return
				}
				uni.navigateTo({
					url: '/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id=' + item.gunNo,
				})
				////('book'+JSON.stringify(item))
			},
			test(item) {
				if (process.env.NODE_ENV === "development") {
					uni.navigateTo({
						url: '/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id=' + item.gunNo,
					})
				
				}
				
				////('book'+JSON.stringify(item))
			},
			book(item, bl) {
				if (bl) {

				} else {
					uni.showToast({
						title: '当前设备不可预约'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/searchPile/apointment/apointmentRecharge?id=' + item.gunNo,
				})
				////('book'+JSON.stringify(item))
			},
			getPoint() {

				//			//('getPoint')
				WxJsApi.getLocation().then((res) => {

					var latitude = parseFloat(res.latitude);
					var longitude = parseFloat(res.longitude);
					var startLngLat = {
						longitude: longitude,
						latitude: latitude
					};
					var endLngLat = {
						longitude: _self.stationDetail.station.longitude,
						latitude: _self.stationDetail.station.latitude
					};
					_self.calculateDistance(startLngLat, endLngLat);
					_self.calculateDistanceList(startLngLat)
					/*uni.showToast({
						title:'getPoint'+JSON.stringify(res)
					})*/
					////('当前位置' +JSON.stringify(data))

					//this.latitude2 = latitude;
					//this.longitude2 = longitude;
					/*uni.showToast({
						title:JSON.stringify(res)
					})*/
					//this.message=JSON.stringify(res)
				}).catch(error => {
					// uni.showToast({
					// 	title: error //'getPoint'+JSON.stringify()
					// })
				})
			},
			calculateDistanceList(startLngLat) {
				if (_self.stationDetail && _self.stationDetail.stationAddressList && _self.stationDetail.stationAddressList
					.length) {

				} else {
					return
				}
				var list = _self.stationDetail.stationAddressList;
				MapLoader().then(AMap1 => {

					for (var i in list) {
						var endLngLat = list[i]
						var lnglat = new AMap.LngLat(startLngLat.longitude, startLngLat.latitude);
						var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);

						endLngLat.distance = myDistance / 1000;
						endLngLat.time = myDistance / 500;
					}
					_self.stationAddressList = list;
					_self.$forceUpdate()
					//console.log("11111111111111")
					//console.log(_self.stationDetail.stationAddressList)


				})

			},
			calculateDistance(startLngLat, endLngLat) {
				var _this = this;
				//直线距离
				MapLoader().then(AMap1 => {
					var lnglat = new AMap.LngLat(startLngLat.longitude, startLngLat.latitude);
					var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);
					_self.stationDetail.station.distance = myDistance / 1000;
					_self.stationDetail.station.time = myDistance / 500;
				})

				//
				return
				//驾车距离
				var _this = this;
				MapLoader().then(AMap1 => {

					this.AMap = AMap;

					var map = new AMap.Map("container", {
						center: [116.397559, 39.89621],
						zoom: 14
					});
					var lnglat = new AMap.LngLat(117.186602, 34.261579);

					//AMap.Walking
					AMap.plugin('AMap.Driving', function() {
						var driving = new AMap.Driving({
							// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
							policy: AMap.DrivingPolicy.LEAST_TIME
						})

						//var startLngLat = [116.379028, 39.865042]
						//var endLngLat = [116.427281, 39.903719]
						var startLngLat2 = [startLngLat.longitude, startLngLat.latitude]
						var endLngLat2 = [endLngLat.longitude, endLngLat.latitude]


						driving.search(startLngLat2, endLngLat2, function(status, result) {
							//(result)
							//(result.routes[0].time)//秒
							//(result.routes[0].distance)//米
							_self.stationDetail.station.distance = result.routes[0].distance /
								1000;
							_self.stationDetail.station.time = result.routes[0].time / 60;

						})

					})


				}, e => {
					//_this.mui.toast('地图加载失败');
					//('地图加载失败', e)
					console.log(e)
				})
			},
			getScanCode() {

				WxJsApi.scanQRCode(1).then(res => {
					if (res) {
						indexAPI.scanCode(res).then((response) => {

						}).catch(error => {
							uni.showToast({
								title: error,
								icon: "none"
							})
						})
					}
				}).catch(error => {

				})

			},
			getPriceList(id) {
				var formatNum = function(num) {
					let res = Number(num);
					return res < 10 ? '0' + res : res;
				};
				let data = {
					stationId: id
				};
				api.getChargingStationPrice(data).then((res) => {

					if (res.data.prices.length) {

						let date = new Date();
						this.station = res.data.chargingStation
						let hours = date.getHours();
						let minutes = date.getMinutes();
						let seconds = date.getSeconds();
						let date_str = formatNum(hours) + ':' + formatNum(minutes); //+ ' ' +formatWeek;


						this.pricesInfo = res.data.prices[0].priceList
						//console.log(this.pricesInfo)

						for (var i in this.pricesInfo) {
							var obj = this.pricesInfo[i]

							if (date_str >= obj.startTime && date_str <= obj.endTime) {
								obj.current = true;
								this.pricesInfoCurrent = obj
								this.pricesInfoCurrent2 = obj
								if (obj.electricityPrice == 0 || this.station.stationType == 50) {
									this.showtips = false
								}
							}

						}
					}

				})
			},


			navigate(item) {
				if (item) {
					if (item.areaTitle) {
						item.name = _self.stationDetail.station.name
					}

				} else {
					item = _self.stationDetail.station
				}
				//console.log(item)
				uni.showLoading({

				})
				WxJsApi.openLocation({
					latitude: parseFloat(item.latitude), //目的地latitude
					longitude: parseFloat(item.longitude), //目的地longitude
					name: item.name,
					address: item.address,
					scale: 15, //地图缩放大小，可根据情况具体调整
					success(res) {
						uni.hideLoading()
					},
					complete() {
						//	uni.hideLoading()
					}
				});
				// //('station'+JSON.stringify(_self.stationDetail.station))
				// window.location.href = "https://uri.amap.com/marker?position=" + _self.stationDetail.station.longitude +
				// 	"," + _self.stationDetail.station.latitude + "&name=" + _self.stationDetail.station.name;

			},
			charge() {
				//('扫码充电')
				//#ifdef MP-WEIXIN
				uni.scanCode({
					success: function(res) {
						uni.navigateTo({
							url: 'chargingPileDetails?pile=' + encodeURIComponent(JSON.stringify(data))
						})

					}
				})
				return;
				//#endif

				//('扫码充电1')
				uni.navigateTo({
					url: 'chargingPileDetails'
				})

			},
			priceDetail(t, id) {
				uni.navigateTo({
					url: 'chargePriceDetails?stationId=' + _self.stationDetail.station.id + "&type=" + t + "&id=" +
						id
				})
			},
			map(item) {
				this.navigate(item)
				//var item= _self.stationDetail.station
				//window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;

				// //('map'+JSON.stringify(_self.station))
				// _self.station.address = 'xxxxxxxxxxxxx'
				// //this.carhelp.set(_self.stationDetail.station.id,_self.station);
				// uni.navigateTo({
				// 	url: 'stationDetailsMap?stationId=' + _self.stationDetail.station.id
				// 	//url:'stationDetailsMap?station='+encodeURIComponent(JSON.stringify(_self.station))

				// })
			},
			theme(type) {
				if (type == 'elder') {
					document.getElementsByTagName('body')[0].setAttribute('data-theme', type);

				} else {
					document.getElementsByTagName('body')[0].setAttribute('data-theme', type);

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oldTextClassF {
		.stationDetail .title {
			font-size: 62rpx;

		}

		.stationDetail .position .address {
			font-size: 38rpx;
		}

		.stationDetail .type .type-box .box-top .pile-type {
			font-size: 38rpx;
			color: #101010;
		}

		.stationDetail .pile-state .gun-details .item .itemShowOpen .itemView .infos .gun-name {
			font-size: 48rpx;
		}

		.stationDetail .price-infos .title {
			font-size: 38rpx;
		}

	}

	.service {
		font-size: 24px;
		color: #101010;

	}

	page {
		background-color: #F2F2F2;

	}

	.head {
		width: 100%;
		height: 360rpx;

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

	// 站点详情
	.stationDetail {

		background-color: #F2F2F2;
		// background: linear-gradient(180deg, rgba(255,255,255,1) 59%,rgba(255,255,255,0) 100%);
		border-radius: 24rpx 24rpx 0px 0px;
		margin-top: -48rpx;
		color: #101010;
		z-index: 99;
		position: absolute;
		left: 0;
		right: 0;
		padding-bottom: 100rpx;

		.stationDetailHead {
			border-radius: 24rpx 24rpx 0px 0px;
			background-color: #FFF;
			padding: 24rpx 32rpx 12rpx 32rpx;
		}

		.stationDetailBody {
			padding: 24rpx 32rpx;
		}

		// 标题
		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 40rpx;
			font-weight: bold;
		}

		// 标签
		.tags {
			display: flex;
			margin-top: 8rpx;
			flex-wrap: wrap;

			.tags1 {
				//border: 1px solid rgba(255, 139, 0, 1);
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4px;
				//color: rgba(255, 139, 0, 1);
				font-size: 24rpx;
				text-align: center;
				padding: 0 8rpx 0 8rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}


			.sign-1 {
				background-color: rgba(255, 255, 255, 100);
				color: rgba(255, 139, 0, 100);
				border: 1px solid rgba(255, 139, 0, 100);
			}

			.sign-3 {
				background-color: rgba(255, 255, 255, 100);
				color: #8161FF;
				border: 1px solid #8161FF;
			}

			.sign-4 {
				background-color: rgba(255, 255, 255, 100);
				color: #00B962;
				border: 1px solid #00B962;
			}

			.sign-2 {
				background-color: rgba(255, 255, 255, 100);
				color: rgba(153, 153, 153, 100);
				border: 1px solid rgba(204, 204, 204, 100);
			}
		}

		// 定位
		.position {
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.block {
				width: 96rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50px;
				background-color: rgba(0, 185, 98, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 22rpx;
				text-align: center;
				padding: 0 4rpx;
			}

			.address {
				width: 460rpx;
				//margin-left: 16rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				line-height: 44rpx;
			}

			.distance {
				display: flex;
				flex-direction: column;
				align-items: center;

				.distance-icon {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(0, 185, 98, 1);
					border-radius: 999px;
				}

				.distance-text {
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					margin-top: 16rpx;
				}
			}
		}

		// 充电桩类型
		.type {
			display: flex;
			justify-content: space-between;

			.checked {
				background-color: rgba(20, 23, 43, 1) !important;

				.pile-type {
					color: #fff !important;
				}

				.cut {
					color: #fff !important;
				}
			}

			.numShowview {
				width: 100% !important;
			}

			.numShowview2 {
				width: 49% !important;
			}

			.type-box {
				//width: 334rpx;
				padding: 8rpx 0;
				width: 32%;
				border-radius: 8rpx;
				background-color: rgba(255, 255, 255, 1);
				position: relative;
				padding: 8rpx 0;

				.box-top {
					display: flex;
					align-items: center;
					justify-content: center;

					.super,
					.fast,
					.slow {
						width: 40rpx;
						height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8rpx;

						color: rgba(255, 255, 255, 1);
						font-size: 20rpx
					}

					.super {
						background-color: #8161FF;
					}

					.fast {
						background-color: #1677FF;
					}

					.slow {
						background-color: #00B962;
					}

					.pile-type {
						color: #303133;
						font-size: 32rpx;
						margin-left: 4rpx;
					}
				}

				.pile-amount {
					display: flex;
					justify-content: center;

					.super {
						color: #8161FF;

						margin-right: 8rpx;
					}

					.fast {
						color: #1677FF;
						margin-right: 8rpx;
					}

					.free {
						color: #00B962;
						margin-right: 8rpx;
					}

					.sum {
						color: #999;
						margin-left: 8rpx;
					}
				}
			}

			// 尖角
			.angle {
				position: absolute;
				width: 0;
				height: 0;
				display: inline-block;
				border-top: 16rpx solid #000000;
				border-left: 16rpx solid transparent;
				border-right: 16rpx solid transparent;
				bottom: -16rpx;
				left: 167rpx;
			}
		}


		// 充电桩状态
		.pile-state {
			border-radius: 8px 8px 0 0;
			margin-top: 32rpx;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx;

			// 总计
			.statistics {
				width: 406rpx;
				border: 1px solid rgba(204, 204, 204, 1);
				padding: 0 16rpx;
				height: 48rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777777;

				.cut {
					color: #8FCFB1;
				}

			}

			// 充电枪详情
			.gun-details {

				.item {
					margin-bottom: 12rpx;
					.open-time {
						border-bottom: 1px solid rgba(238, 242, 240, 100);
						// padding-left: 150rpx;
						// padding-bottom: 40rpx;
						display: flex;
						justify-content: center;
						line-height: 18px;
						font-size: 14px;
						color: rgb(136, 136, 136);

						p {
							text-indent: 112px;
						}
					}

					.itemShowOpen {
						margin-top: 24rpx;
						padding-top:18rpx;
						border-top:  1px dashed #d5d0d0;
						display: flex;
						align-items: center;
						justify-content: space-between;

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

							.state {

								border-radius: 4px;
								background: linear-gradient(180deg, rgba(98, 228, 167, 1) 0%, rgba(0, 180, 95, 1) 100%);
								padding: 4rpx 12rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;

								img {
									width: 56rpx;
									height: 56rpx;
								}

								.state-text {
									color: rgba(255, 255, 255, 1);
									font-size: 22rpx;
									margin-top: -10rpx;
								}
							}
							
							
							.color185AC6 {
								//color: #185AC6
								background: linear-gradient(180deg, rgba(154,192,255,1) 0%,rgba(22,119,255,1) 100%);
								//background: linear-gradient(90.17deg, rgba(31, 85, 255, 1) -3.73%, rgba(39, 171, 255, 1) 98.97%);
							}
							
							.color00B962 {
								//color: #00B962
								//background: linear-gradient(90deg, rgba(0, 146, 77, 1) 0%, rgba(62, 232, 152, 1) 100%);
							}
							
							.colorCA9DFF {
								// color: #8161FF;
								background: linear-gradient(90.17deg, #4f2ae0b5 -3.73%, #8e71ffba 98.97%);
								//background: linear-gradient(90.17deg, rgba(79, 42, 224, 1) -3.73%, rgba(142, 113, 255, 1) 98.97%) ;
							}
							
							
							.charging {
								background: linear-gradient(180deg, #FFC146 0%, #FF6B00 100%);
							}
							
							//充电中
							.chargingOk {
								
								background: linear-gradient(180deg, rgba(154,192,255,1) 0%,rgba(22,119,255,1) 100%);
							}
							// 离线
							.off-line {
								background: linear-gradient(180deg, rgba(209, 204, 204, 1) 0%, rgba(148, 145, 145, 1) 100%);
							}

							// 详细信息
							.infos {
								margin-left: 16rpx;

								.gun-name {
									color: rgba(51, 51, 51, 1);
									font-size: 44rpx;
									font-weight: bold;
									width: 320rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;

									text {
										color: #D6D6D6;
										font-weight: normal;
									}
								}
							}
							.else {
								display: flex;
								align-items: center;
								margin-top: 8rpx;
							
								.gun-type {
									//color: rgba(22, 119, 255, 1);
									
									color: #fff;
									//background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
									    border-radius: 4px;
									    padding: 1px 12rpx;
									    margin-right: 8rpx;
									    font-size: 22rpx;
									  //  height: 32rpx;
								}
							
								.voltage {
									margin: 0 8rpx;
								}
							}

							
						}
					}
				}
				.item-tip{
					  //  padding-left: 100rpx;
					.else {
						display: flex;
						align-items: center;
						margin-top: 8rpx;
					
						.gun-type {
							//color: rgba(22, 119, 255, 1);
					
							color: #fff;
							//background: linear-gradient(93.02deg, rgba(255,121,0,1) 39.4%,rgba(255,174,0,1) 93.51%);
							border-radius: 4px;
							padding: 1px 12rpx;
							margin-right: 8rpx;
							font-size: 22rpx;
							//  height: 32rpx;
						}
					
						.voltage {
							margin: 0 8rpx;
						}
					}
				}
				// 充电按钮
				.charge {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 50px;
					background-color: rgba(0, 185, 98, 1);
					color: rgba(255, 255, 255, 1);

					text-align: center;


				}

				.not-open-tag {
					background-color: rgba(192, 196, 208, 100);

				}

				.not-enable-Appointment {
					width: 168rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: 32rpx;
				}

				.electric-quantity {
					width: 168rpx;
					height: 52rpx;

					position: relative;

					img {

						width: 168rpx;
						height: 72rpx;
					}

					.percentage2 {
						text-align: center;
						width: 126rpx;
						height: 72rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 30rpx;
						line-height: 88rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);

					}

					.percentage {
						text-align: center;
						width: 126rpx;
						height: 72rpx;
						color: rgba(255, 255, 255, 1);
						font-size: 34rpx;
						line-height: 88rpx;
						position: absolute;
						left: 50%;
						top: 34rpx;

						transform: translate(-50%, -50%);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}

				}

			}
		}

		// 价格信息
		.price-infos {
			background-color: #fff;
			padding: 24rpx;
			border-radius: 0 0 8px 8px;

			.title {
				color: rgba(51, 51, 51, 1);
				font-weight: bold;
				font-size: 32rpx;

				text {
					color: #777777;
					font-weight: normal;
				}
			}

			// 分类
			.classify {
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.item {
					border-radius: 4px;
					background-color: rgba(230, 245, 237, 1);
					padding: 22rpx;

					.unit-price {
						font-size: 56rpx;
					}

					.unit-price2 {
						color: #999999;
						font-size: 24rpx;
						font-weight: normal;
						text-decoration: line-through;
					}

					.unit-price3 {
						color: #999999;
						font-size: 24rpx;
						font-weight: normal;
						//text-decoration: line-through;
					}

					.unit {
						color: rgba(119, 119, 119, 1);
						font-size: 28rpx
					}
				}

				// 游客价
				.item-visitor {
					color: #333333;
					width: 42%;
				}

				// 充电价格
				.item-member {
					color: #27B148;
					width: 57%;
				}

				// 充电价格
				.item-member-vip {
					color: #27B148;
					width: 42%;
				}

				.item-vip {
					//color: #5A3629;
					color: rgba(255, 255, 255, 1);
					//background-color:#FFF9EB ;
					background: linear-gradient(88.81deg, rgba(219, 199, 167, 1) 1.89%, rgba(194, 154, 93, 1) 98%);

					width: 57%;

					.unit {
						color: rgba(255, 255, 255, 1);
					}

					.register {
						padding: 4rpx 16rpx;
						height: 24px;
						border-radius: 50px;
						//background: linear-gradient(87.64deg, rgba(253, 129, 69, 1) 1.81%, rgba(252, 63, 3, 1) 100.04%);
						background: linear-gradient(87.64deg, rgba(255, 255, 255, 1) 1.81%, rgba(255, 251, 215, 1) 98.08%);
						color: rgba(128, 74, 0, 1);
						font-size: 24rpx;
						text-align: center;
						margin-left: 38rpx;
					}
				}

				.item-vip2 {
					color: rgba(255, 255, 255, 1);
					background: linear-gradient(32.4deg, rgba(59, 182, 254, 1) 20.49%, rgba(0, 185, 98, 1) 118.87%);
					;
					width: 57%;

					.register {
						padding: 4rpx 16rpx;
						height: 24px;
						border-radius: 50px;
						//background: linear-gradient(87.64deg, rgba(253, 129, 69, 1) 1.81%, rgba(252, 63, 3, 1) 100.04%);
						background: linear-gradient(87.64deg, rgba(255, 255, 255, 1) 1.81%, rgba(217, 255, 237, 1) 98.08%);
						color: rgba(0, 142, 75, 1);

						font-size: 24rpx;
						text-align: center;
						margin-left: 38rpx;
					}

					.unit {
						color: rgba(255, 255, 255, 1);
					}
				}

				.discount-card-4 {
					background: #da241e !important;

					.unit {
						color: #fff !important;
					}

					.u-progress {
						background-color: #e8aaa5 !important;
						color: #fff;
					}
				}

				.item-vip3 {
					color: rgba(255, 255, 255, 1);
					background-color: rgba(55, 59, 80, 1);
					width: 57%;

					.unit-price {
						font-size: 44rpx;
					}

					.unit {
						color: rgba(204, 204, 204, 1);
						font-size: 10px;
					}

					.progress {
						display: flex;
						justify-content: space-between;
						color: rgba(219, 219, 219, 1);
						font-size: 24rpx;
						margin-bottom: 16rpx;
						margin-top: 24rpx;
					}

					::v-deep .u-active {
						background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
					}
				}

				// 充电价格
				.item-member-all {
					color: #27B148;
					width: 100%;
				}

				.register {
					padding: 4rpx 16rpx;
					height: 24px;
					border-radius: 50px;
					background: linear-gradient(87.64deg, rgba(253, 129, 69, 1) 1.81%, rgba(252, 63, 3, 1) 100.04%);
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					text-align: center;
					margin-left: 38rpx;
				}
			}

			// 提示
			.hint {
				margin: 16rpx 0;
				color: rgba(119, 119, 119, 1);
			}

			// 图表
			.chat-box {
				border-radius: 4px;
				background-color: rgba(249, 249, 249, 1);
				padding: 24rpx;

				.chat-infos {

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 32rpx;

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

							.icon {
								width: 56rpx;
								height: 28rpx;

								margin-right: 8rpx;
							}

							.icon1 {
								border: 2px solid rgba(0, 0, 0, 1);
							}

							.icon2 {

								background-color: rgba(87, 228, 160, 1);
							}

							.icon3 {
								background-color: rgba(220, 220, 220, 1);
							}

							.text {
								color: rgba(102, 102, 102, 1);
								font-size: 32rpx;
							}
						}

						.value {
							color: rgba(16, 16, 16, 1);
							font-size: 32rpx;
							font-weight: bold;
						}

						.value2 {
							color: #999999;
							font-size: 28rpx;
							font-weight: normal;
							text-decoration: line-through;
						}

					}
				}



			}

		}

		.chat_hhh_time {
			display: flex;
			justify-content: space-between;
		}

		.chat_hhh {
			background: #f9f9f9;
			text-align: center;
			min-height: 160px;
			display: flex;
			font-size: 20rpx;

			.current1 {
				.chats2 {
					//border: 1px solid red;
				}
			}

			.current2 {
				.chats1 {
					border: 1px solid #333333;


					border-bottom: 0px;
				}

				.chats2 {
					border: 1px solid #333333;
					background: #26FF6B !important;

					border-top: 0px;
				}

			}

			.chatTime {
				min-width: 68rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				border: 1px solid #f9f9f9;

				.chats0 {
					// background-color: #ff8b17;
					// color: #ffecdd;
					display: flex;
					justify-content: center;

					flex-wrap: wrap;
					flex-direction: column;
				}

				.chats9 {
					opacity: 0;
					display: flex;
					justify-content: center;

					flex-wrap: wrap;
					flex-direction: column;
				}

				.chats1 {
					background: #dcdcdc;
					min-height: 30rpx
				}

				.chats2 {
					background: #80e0a6;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}
		}

		// 附加信息
		.overhead-infos {
			margin-top: 24rpx;
			background-color: #fff;
			padding: 24rpx;
			border-radius: 8px;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;


				.title {
					color: rgba(119, 119, 119, 1);
					font-size: 32rpx;

				}

				.value {
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}

	.color185AC6 {
		//color: #185AC6
		background: linear-gradient(90.17deg, rgba(31, 85, 255, 1) -3.73%, rgba(39, 171, 255, 1) 98.97%);
	}

	.color00B962 {
		//color: #00B962
		background: linear-gradient(90deg, rgba(0, 146, 77, 1) 0%, rgba(62, 232, 152, 1) 100%);
	}

	.colorCA9DFF {
		// color: #8161FF;
		background: linear-gradient(90.17deg, rgba(79, 42, 224, 1) -3.73%, rgba(142, 113, 255, 1) 98.97%) ;
	}

	.deviceAddressShow {
		margin-top: 24rpx;
		font-size: 36rpx;
		// color:#1677FF;
		color: #00b962;
		//    font-weight: bold;
		white-space: pre;

		img {
			width: 48rpx;
			height: 24rpx;
			margin: 0 16rpx;
		}
	}

	.deviceAddressShow2 {
		color: #ff8b00;
	}
</style>