<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">环比分析</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<loading :visible="isLoading"></loading>
		
		<div class="mui-content">
			<dl class="returnChart">
				<dt>
					<span>每月用电量(kW·h)</span>
				</dt>
				
				<dd>
					<div id="kwPicture1" style="width:100%;height: 300px;">
					
					</div>
				</dd>
				<dd v-html="description" style="padding-left:20px ;">
					 
				</dd>
			</dl>
			<dl class="returnChart">
				<dt>
					<span>每小时用电量(kW·h)</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="kwPicture2" style="width:100%;height: 300px;">
					
					</div>
				</dd>
			</dl>
		</div>
	</div>
</template>


<script>
	require('$project/assets/js/mui.picker.min.js');
	
	import * as API from '@/apis/Other/energy'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as echarts from 'echarts'
	import {
		unixTimeStamp,
		currentTimeStamp,
		parseUnixTime,
		beforeTimeStamp
	} from '$project/utils'
	export default {
		name: 'MasterHealthArchives',
		components: {
			Common,
			Loading,
		
		},
		data() {
			return {
				meterNo:'',
				
				isLoading: true,
				nowDate:"",
				queryDate:"",
				showlist1:[],
				graphMap:{},
				description:"",
				timeList1:[],
				timeList2:[],
			nowYear:'',
			}
		},
		created() {
		
			
			this.meterNo=this.$route.query.meterNo;
		
			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.electricityHourByYear()
					picker.dispose();
				});
			},
			init(){
				this.nowDate=parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				this.queryDate=parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
				//this.showlist1=['总功率','A相功率','B相功率','C相功率'];
				this.electricityMonthTB()
					
			},
			electricityMonthTB(){
				this.isLoading = true;
				API.electricityMonthHB({
					queryDate:this.queryDate,
					meterNo:this.meterNo,
			
				}).then(response => {
					this.isLoading = false;
							
					this.description = response.description;
					this.graphMap= response.graphMap
					this.setMap1();
					this.electricityHourByYear()
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			electricityHourByYear(){
				var time1=parseUnixTime(unixTimeStamp(this.queryDate)-1000*60*60*24, '{y}-{m}-{d}')
				var time2=parseUnixTime(unixTimeStamp(this.queryDate)-2000*60*60*24, '{y}-{m}-{d}')
				
				this.nowYear=new Date().getFullYear()
				this.showlist1=[this.queryDate,time1,time2];
				
				this.isLoading = true;
				API.electricityHourByDay({
					queryDate:this.queryDate,
					meterNo:this.meterNo,
				
				}).then(response => {
					this.isLoading = false;
							
 					this.graphMap2= response.graphMap
					this.setMap2();
					
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			setMap2(){
				this.timeList2=[];
				for(var i in  this.graphMap2){
									
					this.timeList2.push(parseInt(i)+'时')
				}
				 
				var list1=[];
				var list2=[];		
				// var list= this.setSz2(this.graphMap2,'bar')
				// this.echarts2('kwPicture2',list);
				
				var list= this.setSz(this.graphMap2,'line',this.showlist1)
				this.echarts1('kwPicture2',list,this.timeList2,{});
			},
			setMap1(){
				
				for(var i in  this.graphMap){
			
					this.timeList1.push(parseInt(i)+1+'月')
				}
				 
				var list1=[];
				var list2=[];		
				var list= this.setSz(this.graphMap,'line',[this.nowYear+''])
			
				this.echarts1('kwPicture1',list,this.timeList1,null);
				
				
			},
			setSz(energyCenterMapObj,type,showsz){
				var returnsz=[]
				
				for(var j in showsz){
					
					var ap={
						 name: showsz[j],
						 type: type,
						 symbol: 'circle',
						 data:[]
					}
					for(var i in energyCenterMapObj){
										 
										 
						var sz=energyCenterMapObj[i];
						
						 
						ap.data.push(parseInt(sz[j]))
										
					}
					returnsz.push(ap)
				}
				
				 
				 return returnsz
				
			},	setSz2(energyCenterMapObj,type){
				var returnsz=[];
				
				 for(var i in energyCenterMapObj){
				 	var sz=energyCenterMapObj[i];
					
				 	var obj=[i+'时',parseInt(sz[0]),parseInt(sz[1]),parseInt(sz[2])]
					 
				 	
					returnsz.push(obj)
				 }
				
				 return returnsz;
				
			},
				echarts1(className,seriesdata,timeList,legend){
				var 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"
								}
							  },
							  
							  grid: {
								
								left: '3%',
								right: '4%',
								bottom: '15%',
								containLabel: true
							  },
							 
							  xAxis: {
								type: 'category',
								boundaryGap: false,
								data: timeList,
								axisLabel:{
								    textStyle:{
								      color:colorName
								    }
								  },
								  axisLine:{
									  show:true,
								      lineStyle:{
								        color:colorName
								      }
								    },
							  },
							  yAxis: {
								type: 'value',
								
								  axisLabel:{
								      textStyle:{
								        color:colorName
								      }
								    },  axisLine:{
									  show:true,
								      lineStyle:{
								        color:colorName
								      }
								    },
							  },
							    dataZoom: [
							      {
							        type: 'inside',
							        start: 0,
							        end: 100
							      },
							      {
							        start: 0,
							        end: 100
							      }
							    ],
							  series: seriesdata
							};
							if(legend){
								option.legend={}
							}else{
								option.grid.top='3%'
							}
							//console.log(option)
					myChart.setOption(option);
			},	echarts2(className,seriesdata){
				var colorName="#333"
			 
				
				var myChart = echarts.init(document.getElementById(className), 'light');
				myChart.clear()
				var option = {
							  dataset: {
							  
							    source:[
									 ['product',...this.showlist1 ],
									 ...seriesdata
								] 
							  },
							 grid: {
							 		left: '3%',
									
							 		right: '4%',
							 		bottom: '15%',
							 		containLabel: true
							 },
							  legend: {
								
							  },
							
							   tooltip: {
								    trigger: 'axis',
								       axisPointer: {
								         type: 'shadow'
								       }
							   },
							  xAxis: {
								type: 'category',

							  },
							  yAxis: {
							
							  },
							    dataZoom: [
							      {
							        type: 'inside',
							        start: 0,
							        end: 100
							      },
							      {
							        start: 0,
							        end: 100
							      }
							    ],
								
							      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]

							};
							 
					myChart.setOption(option);
			}
			
		}
		
	}
	
</script>
<style src="$project/assets/css/mui.picker.min.css"></style>


<style>

	.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;
		margin-bottom: 16px;
	}

	.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>
