<template>
	<view style="padding-bottom: 296rpx;">
		<ujp-navbar title="充电价格详情"></ujp-navbar>
		<u-alert-tips type="warning" 
		 v-if="showtips"
		:descStyle="{
			     fontSize: '28rpx',
			     color: '#ef7a30',
		 }"   description="每个月的电价可以在“网上国网”APP网站上查到，会根据“煤电联动”机制进行调整。" :show-icon="true"></u-alert-tips>
		<view class="price-main">
			<view class="price-item" v-for="(item,i) in list" :key="i">
				<view class="time " v-if="!item.current">
					{{item.startTime}}-{{item.endTime}}
				</view>
				<view class="time curent" v-if="item.current">
					{{item.startTime}}-{{item.endTime}} <view class="current-time">当前时段</view>
				</view>
				<view class="price">
					<text class="price-1"><text class="num">{{item.costPrice.toFixed(2)}}</text> <text >元/度</text></text> 
					<text class="price-2"  v-if="stationDetail&&stationDetail.giveDiscount||(item.discountServicePrice)" >
						<text class="num">{{((item.servicePrice*1000+item.electricityPrice*1000)/1000).toFixed(2)}}元/度</text>
					</text>
				</view>
				<view class="else-price">
					<view class="electric-price">
						电费{{item.electricityPrice.toFixed(2)}}元/度
					</view>
					
					<view
					 v-if="stationDetail&&stationDetail.giveDiscount||(item.discountServicePrice)"
					
					 class="service-price">服务费{{item.discountServicePrice}}元/度(折前{{item.servicePrice.toFixed(2)}}元/度)</view>
					
					<view 
						v-if="stationDetail&&!stationDetail.giveDiscount&&(!item.discountServicePrice)"
					class="service-price">服务费{{item.servicePrice}}元/度</view>

		</view>
			</view>
			
			
		</view>
		<u-divider color="#B6BDC3" style="margin-top:20px;" bg-color="#F2F4F4">*充电费用仅供参考，请以充电桩上的费用为准。</u-divider>
		
	<view class="hint">
		
	</view>
	</view>
</template>

<script>
	import * as api from "@/apis/site.js"
	let _self;
	var formatNum=function(num) {
		let res = Number(num);
		return res < 10 ? '0' + res : res;
	};
	
	export default {
		data() {
			return {
				id:"",
				description:"",
				type:"",
				elderMode:false,
				chargingStation:{},
				list:[],
				items:[],
				current: 0,
				deviceNo:'',
				showtips:true,
			}
		},
		onLoad(op){
			
			_self = this; 
			
			
			if(op!=null && op.stationId!=null){
				//('stationId'+JSON.stringify(op.stationId))
				let data = {stationId:op.stationId};
				api.getChargingStationPrice(data).then(res=>{
//					//('data'+JSON.stringify(res))
					if(res.result){
						_self.stationDetail=res.data.chargingStation;
						
						let data = res.data;
						
						let date = new Date();
						let hours = date.getHours();
						let minutes = date.getMinutes();
						let seconds = date.getSeconds();
						let date_str = formatNum(hours) + ':' + formatNum(minutes); //+ ' ' +formatWeek;
						
						
						this.list = res.data.prices[0].priceList
						console.log(this.list)
						
						for (var i in this.list) {
							var obj = this.list[i]
						
							if (date_str >= obj.startTime && date_str <= obj.endTime) {
								obj.current = true;
								
								if(obj.electricityPrice==0||_self.stationDetail.stationType == 50){
									this.showtips=false
								}
							}

						}
						
					}
				})
				
			}
/*			api.getPriceDetails(op).then(function(res){
					_self.list = res;
 				},function(err){
					
				}
			);*/
		},		
		onReady(){
			this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
			
			let date = new Date();
			let hours = date.getHours();
			let minutes = date.getMinutes();
			let seconds = date.getSeconds();
			let date_str =  formatNum(hours)+ ':'+ formatNum(minutes);//+ ' ' +formatWeek;
			//('date_str'+JSON.stringify(date_str))
			for(let i = 0;i< _self.list.length;i++)
			{
				for(let j = 0;j< _self.list[i].items.length;j++){
					let start_time = _self.list[i].items[j].time.substr(0,5);
					let end_time = _self.list[i].items[j].time.substr(6,5);
//					//('start time ' +JSON.stringify())
//					//('end time ' +JSON.stringify())
					if(date_str< start_time)
						continue;
					if(date_str> end_time)
						continue;
					_self.list[i].items[j].current = true;
  				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.items = this.list[index].items;
			},
			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> 
	@import "@/_theme.scss";
	
	.product_tip{
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 55rpx;
	  height: 55rpx;
	  text-align: right;
	  p{
	    font-size: 24rpx;
	    color: #ffffff;
	    transform: rotate(45deg);
	    position: relative;
	    top: 0rpx;
	    right: 0rpx;
	  }
	  .product_tip_bg{
	    width: 0;
	    height: 0;
	    border-bottom: 44rpx solid #FD662A;
	    border-right: 44rpx solid transparent;
	    border-left: 44rpx solid transparent;
	    transform: rotate(45deg);
	    position: absolute;
	    top: -7rpx;
	    right: -29rpx;
	  }
	}

	.main {
		background-color: #fff;
       
		.tabs-box {
			width: 55%;
			height: 88rpx;
			margin: 0 auto;
			// line-height: 44px;
			position: relative;
		}
			.line-box{
				width: 100%;
				height: 88rpx;
				position: absolute;
				top: 145rpx;
 			}

		.time-frame {
			padding-left: 32rpx;
/*			position: absolute;
			top:260rpx;
	*/		
			.time-items {
				padding-right: 32rpx;
				height: 152rpx;
				border-bottom: #F2F4F4 2rpx solid;
                  position: relative;
				.time-price {
					display: flex;
					justify-content: space-between;
					padding: 32rpx 0 20rpx;

					.time {
						color: rgba(16, 16, 16, 100);
						@include themeify{
							font-size:themed('font-size3'); 
						}
/*						font-size: 32rpx;*/
					}

					.price {
						.price-text{
							color: #ff3d00; 
							@include themeify{
								font-size:themed('font-size4'); 
							}
/*							font-size: 36rpx;*/
						}
						.unit {
							color: rgba(102, 102, 102, 100);
							@include themeify{
								font-size:themed('font-size2'); 
							}
/*							font-size: 28rpx;*/
							margin-left: 8rpx;
						}
					}

				}

				.unitPrice-serviceCharge {
					float: right;
					@include themeify{
						font-size:themed('font-size1'); 
					}
/*					font-size: 24rpx;*/
					color: #888888;
				}
			}
		}
	}
	.hint{
		width: 100%;
		text-align: center;
		color: #999999;
		@include themeify{
			font-size:themed('font-size1'); 
		}
/*		font-size: 24rpx;*/
		position: absolute;
		bottom: 24rpx;
		left: 0;
		
		}
		
		.tabs-box{
			width: 90% !important;
		}
		// 价格详情
		.price-main{
			background-color: #fff;
			.price-item{
				padding: 20rpx 40rpx 20rpx 0;
				margin-left: 20px;
				border-bottom:rgb(238, 242, 240) solid 1px;
				.time{
					color:  #00b962;;
					font-size: 18px;
					position: relative;
					
				}
				.curent{
					position: relative;
					color: #ff8b17;
					.current-time{
						background-color: #ffecdd;
						width: 72px;
						line-height: 20px;
						border-radius: 4px;
						padding:2px;
						position: absolute;
						top: 0;
					    right: 0;
						font-size: 14px;
						text-align: center;
					}
				}
				.price{
					color: #101010;
					  font-size: 16px;
					.price-1{
						
						
						.num{
							font-size: 28px;
							font-weight: 550;
							margin-right: 4px;
						}
					}
					.price-2{
						margin-left: 8px;
						text-decoration: line-through;
						.num{
							margin-right: 4px;
						}
					}
				}
				.else-price{
					
					display: flex;
					justify-content: space-between;
					color:  rgba(153, 153, 153, 100);
					
				}
			}
			
		}
		
</style>
