<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">{{typeName}}监测</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
				
			</a>
			<a class="fyy-bar mui-pull-right" @click="getPowerDetection">
				刷新
			</a>
		</header>
		<div class="mui-content">
			<dl class="returnChart">
				<dt>
					<span>{{typeName}}监测({{typeN}})</span>
					<div class="returnChart-drop"  @click="selectData">
						<p>{{queryDate==nowDate?'今日':queryDate}}</p>
						<i class="mui-icon mui-icon-arrowdown"></i>
					</div>
				</dt>
				<dd>
					<div id="kwPicture" style="width:100%;height: 300px;">
					
					</div>
				</dd>
			</dl>
			<div class="returnTable">
				<table>
					<tr>
						<th></th>
						<th>实时{{typeName}}</th>
						<th>最大{{typeName}}</th>
						<th>最小{{typeName}}</th>
					</tr>
					<tr v-if="type=='P'">
						<td class="tableft">总功率</td>
						<td>{{queryDate==nowDate?currentMap.AL1:'\\'}}</td>
						<td>{{currentMap.AL2}}</td>
						<td>{{currentMap.AL3}}</td>
					</tr>
				 
					<tr>
						<td class="tableft">A相</td>
						<td>{{queryDate==nowDate?currentMap.A1:'\\'}}</td>
						<td>{{currentMap.A2}}</td>
						<td>{{currentMap.A3}}</td>
					</tr>
					<tr>
						<td class="tableft">B相</td>
						<td>{{queryDate==nowDate?currentMap.B1:'\\'}}</td>
						<td>{{currentMap.B2}}</td>
						<td>{{currentMap.B3}}</td>
					</tr>
					<tr>
						<td class="tableft">C相</td>
						<td>{{queryDate==nowDate?currentMap.C1:'\\'}}</td>
						<td>{{currentMap.C2}}</td>
						<td>{{currentMap.C3}}</td>
					</tr>
				</table>
			</div>
		</div>
		<loading :visible="isLoading"></loading>
		
	</div>
</template>

<script>
	require('@/assets/js/mui.picker.min.js');
	
	import * as API from '@/apis/Other/energy'
	import Common from '@/components/Common.vue'
	import Loading from '@/components/Loading.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as echarts from 'echarts'
	import {
		currentTimeStamp,
		parseUnixTime,
		beforeTimeStamp
	} from '@/utils'
	export default {
		name: 'MasterHealthArchives',
		components: {
			Common,
			Loading,
		
		},
		data() {
			return {
				meterNo:'',
				type:'',
				isLoading: true,
				nowDate:"",
					queryDate:"",
				graphMap:{},
				currentMap:{},
				timeList:[],
				typeName:'',
				typeN:'',
			}
		},
		created() {
			
			this.meterNo=this.$route.query.meterNo;
			this.type=this.$route.query.type;
			if(this.type=='P'){
				this.typeName='功率'
				this.typeN='kW'
			}else if(this.type=='A'){
				this.typeName='电流'
				this.typeN='A'
			}else if(this.type=='V'){
				this.typeName='电压'
				this.typeN='V'
				
			}
			this.init();
		},
		methods: {
			//选择日期
			selectData() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"endDate": new Date(),
					"value": _this.queryDate
				});
				picker.show(function(rs) {
					_this.queryDate = rs.text;
			
					_this.getPowerDetection()
					picker.dispose();
				});
			},
			init(){
				this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				//this.showlist1=['总功率','A相功率','B相功率','C相功率'];
				this.getPowerDetection()
			},
			getPowerDetection(){
				this.isLoading = true;
				API.powerDetection({
					queryDate:this.queryDate,
					meterNo:this.meterNo,
					type:this.type
				}).then(response => {
					this.isLoading = false;
							
					this.currentMap = response.currentMap;
					this.graphMap= response.graphMap
					this.setMap();
					
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			setMap(){
				this.timeList=[]
				for(var i in  this.graphMap){
					var mod=this.graphMap[i];
					var time=mod.createTime	
					mod.createTime=time.replace("-","/").replace("-","/")
					this.timeList.push(i)
				}
				this.showlist1=['总功率','A相功率','B相功率','C相功率'];
							
				this.showlist2=['A相电流','B相电流','C相电流'];
				this.showlist3=['A相电压','B相电压','C相电压'];
				
				var sz1=['总功率','A相功率','B相功率','C相功率'];
				var sz2=['A相电流','B相电流','C相电流'];
				var sz3=['A相电压','B相电压','C相电压'];
				var list1=[];
				var list2=[];
				var list3=[];
		
				
				if(this.type=='P'){
					this.typeName='功率'
					
					
					this.setSz(sz1,['totalPower','ap','bp','cp'],list1,this.graphMap,this.showlist1)
					
					this.echarts('kwPicture',1,this.showlist1,list1);
					
				}else if(this.type=='A'){
					this.typeName='电流'
							this.setSz(sz2,['aa','ba','ca'],list2,this.graphMap,this.showlist2)
					this.echarts('kwPicture',0,this.showlist2,list2);
					
				}else if(this.type=='V'){
					this.typeName='电压'
					this.setSz(sz3,['av','bv','cv'],list3,this.graphMap,this.showlist3)
					
					this.echarts('kwPicture',0,this.showlist3,list3);
					
				}
				
			},
			setSz(sz1,sz2,list,energyCenterMapObj,showList){
				
				for(var j in sz1){
					var k =showList.indexOf(sz1[j]);
					if(k==-1){
						continue
					}
					var ap={
						 name: sz1[j],
						 type: 'line',
						  symbol: 'none',
						  //      sampling: 'lttb',
						// stack: 'Total',
						 data:[]
					}
					list.push(ap)
					
					
					for(var i in energyCenterMapObj){
						var time=this.queryDate.replace("-","/").replace("-","/")
						
						var obj=energyCenterMapObj[i][sz2[j]];
					
						var time = new Date(time+' '+i).getTime()
							
						ap.data.push([time,parseInt(obj)]);
						
						
					}
				}
			 
			 
				
			},	echarts(className,color,legenddata,seriesdata){
				var colorName="#333"
				// if(color=='1'){
				// 	colorName="#ECEDF0"
				// }else{
				// 	colorName="#333"
				// }
				
				var myChart = echarts.init(document.getElementById(className), 'light');
				myChart.clear()
				var option = {
							
							  tooltip: {
								trigger: 'axis',
								borderColor:"#F0F0F0",
								borderWidth:1,
								backgroundColor:"#ffffff",
								textStyle:{
									color:"#333"
								}
							  },
							  legend: {
								data: legenddata,
								  textStyle: {
								      color: colorName
								    }
							  },
							  grid: {
								top: '23%',
								left: '3%',
								right: '4%',
								bottom: '15%',
								containLabel: true
							  },
							 
							  xAxis: {
								
								type: 'time',
								splitNumber: 4,
								boundaryGap: false,
								
								axisLabel:{
									 
								    textStyle:{
								      color:colorName
								    }
								  },
								  axisLine:{
									  show:true,
								      lineStyle:{
								        color:colorName
								      }
								    },
							  },
							  yAxis: {
								type: 'value',
								name: '单位('+this.typeN+')',
								  axisLabel:{
									
								      textStyle:{
								        color:colorName
								      }
								    },  axisLine:{
									  show:true,
								      lineStyle:{
								        color:colorName
								      }
								    },
							  },
							    dataZoom: [
							      {
							        type: 'inside',
							        start: 0,
							        end: 100
							      },
							      {
							        start: 0,
							        end: 100
							      }
							    ],
							  series: seriesdata
							};
						//	console.log(option);
					myChart.setOption(option);
			}
			
		}
		
	}
	
</script>
<style src="@/assets/css/mui.picker.min.css"></style>

<style>
	body{
		background-color: #fff;
	}
	.mui-content{
		background-color: #fff;
	}
	.returnTable{
		background-color: #EEF0F3;
		border-radius: 8px;
		padding: 16px;
		margin: 16px;
	}
	.returnTable table{
		width: 100%;
		background: none;
		text-align: center;
	}
	.returnTable table td{
		padding: 5px 0;
	}
	.tableft{
		text-align: left;
	}
	.returnChart {
		/* 	//padding: 0 16px; */
		background-color: #fff;
		margin: 0;
	}

	.returnChart dt {
		padding: 16px 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.returnChart-drop {
		display: flex;
		align-items: center;
	}

	.returnChart-drop p {
		font-size: 14px;
		margin-right: 3px;
	}

	.returnChart dt span {
		position: relative;
		padding-left: 15px;
		font-size: 18px;
	}

	.returnChart dt span:before {
		content: '';
		position: absolute;
		width: 4px;
		height: 14px;
		background-color: #1677FF;
		border-radius: 2px;
		left: 0;
		top: 2px;
	}

	.returnChart dd {
		padding-bottom: 16px;
		margin: 0;

	}
</style>
