var layer;
var form;
var depotId;
var chartTop;
var chartMain;
var chartCur;
var chartTopCurData = [ {
	name : 'A向电压',
	value : 0.0,
	unit : 'V',
	pos : [ '12.5%', '50%' ],
	range : [ 0, 400 ]
}, {
	name : 'A向电流',
	value : 0.0,
	unit : 'A',
	pos : [ '37.5%', '50%' ],
	range : [ 0, 50 ]
}, {
	name : '频率',
	value : 0.0,
	unit : 'Hz',
	pos : [ '62.5%', '50%' ],
	range : [ 0, 100 ]
}, {
	name : '近1小时用电',
	value : 0.0,
	unit : 'kW·h',
	pos : [ '87.5%', '50%' ],
	range : [ 0, 200 ]
} ];

var chartTopData = [ {
	name : '有功电能',
	value : 0.0,
	unit : 'kW·h',
	pos : [ '16.6%', '50%' ],
	range : [ 0, 1000 ]
}, {
	name : '无功电能',
	value : 0.0,
	unit : 'kW·h',
	pos : [ '49.8%', '50%' ],
	range : [ 0, 1000 ]
}, {
	name : '总电能',
	value : 0.0,
	unit : 'kW·h',
	pos : [ '83%', '50%' ],
	range : [ 0, 5000 ]
} ];

$(function() {
	layui.use([ 'layer', 'table', 'form', 'laydate' ], function() {
		table = layui.table;
		form = layui.form;
		layer = layui.layer;
		laydate = layui.laydate;

		laydate.render({
			elem : '#start',
			theme : '#7b8e9f'
		});

		laydate.render({
			elem : '#end',
			theme : '#7b8e9f'
		});
		
		chartCur = initCahrtCur();
		chartTop = initChartTop();
		chartMain = initChartMain();
	});
});

//根据条件刷新数据
function query(){
	var depotId = $("#depotId").val();
	var start = $("#start").val();
	var end = $("#end").val();
	if (!depotId) {
		layer.alert("条件不满足，请选择仓库");
		return;
	}
	var index = layer.load();
	$.ajax({
		type : "POST",
		url : "../../basic/es/detail-query",
		data : JSON.stringify({depotId:depotId,start:start,end:end}),
		dataType : "json",
		contentType : "application/json;charset=UTF-8",
		success : function(result) {
			layer.close(index);
			if (result.code != "0000") {
				layer.alert(result.msg);
				return;
			}
			//渲染数据信息
			renderCur(result.data.esCur);
			//渲染数据信息
			renderSum(result.data.esSum);
			//渲染仓库分组统计
			renderList(result.data.esSumList);
		},
		error : function() {
			layer.close(index);
			layer.msg("执行异常，后台出现错误！");
		}
	});
};

//渲染实时信息
function renderCur(esCur){
	if(!esCur){
		return ;
	}
	chartTopCurData[0].value = esCur.ua;
	chartTopCurData[1].value = esCur.ia;
	chartTopCurData[2].value = esCur.f;
	chartTopCurData[3].value = esCur.esInc.toFixed(2);

	initCahrtCur();
};

//渲染整体统计数据
function renderSum(esSum){
	chartTopData[0].value = esSum.epSum.toFixed(2);
	chartTopData[1].value = esSum.eqSum.toFixed(2);
	chartTopData[2].value = esSum.esSum.toFixed(2);

	$("#esCur").text(esSum.esCur.toFixed(2) +" kW·h");
	$("#esMom").text(esSum.esMom.toFixed(2) +" kW·h");
	$("#esYoy").text(esSum.esYoy.toFixed(2) +" kW·h");

	initChartTop();
};


function renderList(list){
	var attrData0= new Array();
	var attrData1= new Array();
	var attrData2= new Array();
	var attrX = new Array();
	
	$.each(list, function(index, item) {
		attrData0.push(item.ep);
		attrData1.push(item.eq);
		attrData2.push(item.es);
		attrX.push(item.updateTime);
	});
	chartMain.option.series[0].data = attrData0;
	chartMain.option.series[1].data = attrData1;
	chartMain.option.series[2].data = attrData2;
	chartMain.option.xAxis[0].data = attrX;
	chartMain.chart.setOption(chartMain.option, true);
};

function initCahrtCur() {
	var highlight = '#03b7c9';
	var option = {
		backgroundColor : '#222939',
		series : (function() {
			var result = [];
			chartTopCurData.forEach(function(item) {
				result.push(
				// 外围刻度
				{
					type : 'gauge',
					center : item.pos,
					radius : '70%', // 1行3个
					splitNumber : item.splitNum || 5,
					min : item.range[0],
					max : item.range[1],
					// startAngle : 225,
					// endAngle : -45,
					axisLine : {
						show : true,
						lineStyle : {
							width : 2,
							shadowBlur : 0,
							color : [ [ 1, highlight ] ]
						}
					},
					axisTick : {
						show : true,
						lineStyle : {
							color : highlight,
							width : 1
						},
						length : -5,
						splitNumber : 10
					},
					splitLine : {
						show : true,
						length : -14,
						lineStyle : {
							color : highlight,
						}
					},
					axisLabel : {
						distance : -20,
						textStyle : {
							color : highlight,
							fontSize : '14',
							fontWeight : 'bold'
						}
					},
					pointer : {
						show : 0
					},
					detail : {
						show : 0
					}
				},

				// 内侧指针、数值显示
				{
					name : item.name,
					type : 'gauge',
					center : item.pos,
					radius : '50%',
					// startAngle : 225,
					// endAngle : -45,
					min : item.range[0],
					max : item.range[1],
					axisLine : {
						show : true,
						lineStyle : {
							width : 16,
							color : [ [ 1, 'rgba(255,255,255,.1)' ] ]
						}
					},
					axisTick : {
						show : 0,
					},
					splitLine : {
						show : 0,
					},
					axisLabel : {
						show : 0
					},
					pointer : {
						show : true,
						length : '105%'
					},
					detail : {
						show : true,
						offsetCenter : [ 0, '100%' ],
						textStyle : {
							fontSize : 20,
							color : '#fff'
						},
						formatter : [ '{value} ' + (item.unit || ''),
								'{name|' + item.name + '}' ].join('\n'),
						rich : {
							name : {
								fontSize : 14,
								lineHeight : 30,
								color : '#ddd'
							}
						}
					},
					itemStyle : {
						normal : {
							color : highlight,
						}
					},
					data : [ {
						value : item.value
					} ]
				});
			});
			return result;
		})()
	};

	var myChart = echarts.init(document.getElementById('chart_cur'), "light");
	myChart.setOption(option, true);
	return {
		"chart" : myChart,
		"option" : option
	};
};

function initChartTop() {
	var highlight = '#03b7c9';
	var option = {
		backgroundColor : '#222939',
		series : (function() {
			var result = [];
			chartTopData.forEach(function(item) {
				result.push(
				// 外围刻度
				{
					type : 'gauge',
					center : item.pos,
					radius : '70%', // 1行3个
					splitNumber : item.splitNum || 5,
					min : item.range[0],
					max : item.range[1],
					// startAngle : 225,
					// endAngle : -45,
					axisLine : {
						show : true,
						lineStyle : {
							width : 2,
							shadowBlur : 0,
							color : [ [ 1, highlight ] ]
						}
					},
					axisTick : {
						show : true,
						lineStyle : {
							color : highlight,
							width : 1
						},
						length : -5,
						splitNumber : 10
					},
					splitLine : {
						show : true,
						length : -14,
						lineStyle : {
							color : highlight,
						}
					},
					axisLabel : {
						distance : -20,
						textStyle : {
							color : highlight,
							fontSize : '14',
							fontWeight : 'bold'
						}
					},
					pointer : {
						show : 0
					},
					detail : {
						show : 0
					}
				},

				// 内侧指针、数值显示
				{
					name : item.name,
					type : 'gauge',
					center : item.pos,
					radius : '50%',
					// startAngle : 225,
					// endAngle : -45,
					min : item.range[0],
					max : item.range[1],
					axisLine : {
						show : true,
						lineStyle : {
							width : 16,
							color : [ [ 1, 'rgba(255,255,255,.1)' ] ]
						}
					},
					axisTick : {
						show : 0,
					},
					splitLine : {
						show : 0,
					},
					axisLabel : {
						show : 0
					},
					pointer : {
						show : true,
						length : '105%'
					},
					detail : {
						show : true,
						offsetCenter : [ 0, '100%' ],
						textStyle : {
							fontSize : 20,
							color : '#fff'
						},
						formatter : [ '{value} ' + (item.unit || ''),
								'{name|' + item.name + '}' ].join('\n'),
						rich : {
							name : {
								fontSize : 14,
								lineHeight : 30,
								color : '#ddd'
							}
						}
					},
					itemStyle : {
						normal : {
							color : highlight,
						}
					},
					data : [ {
						value : item.value
					} ]
				});
			});
			return result;
		})()
	};

	var myChart = echarts.init(document.getElementById('chart_top'), "light");
	myChart.setOption(option, true);
	return {
		"chart" : myChart,
		"option" : option
	};
};

function initChartMain() {
	var option = {
		backgroundColor : '#1b2735',
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				lineStyle : {
					color : '#57617B'
				}
			}
		},
		legend : {
			itemGap : 13,
			data : [ '有功电能', '无功电能', '总电能' ],
			top : '3%',
			left : 'center',
			textStyle : {
				fontSize : 12,
				color : '#F1F1F3'
			}
		},
		grid : {
			left : '3%',
			right : '4%',
			bottom : '8%',
		},
		xAxis : [ {
			type : 'category',
			boundaryGap : false,
			axisLine : {
				lineStyle : {
					color : '#57617B'
				}
			},
			data : [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
					'12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
					'22', '23', '24', '25', '26', '27', '28', '29', '30', '31' ],
		} ],
		yAxis : [ {
			type : 'value',
			axisTick : {
				show : false
			},
			axisLine : {
				lineStyle : {
					color : '#57617B'
				}
			},

			axisLabel : {
				margin : 10,
				textStyle : {
					color : "rgba(255,255,255,.6)",
					fontSize : '12',
				}
			},
			splitLine : {
				lineStyle : {
					color : "rgba(255,255,255,0.1)",
				}
			}
		} ],
		series : [
				{
					name : '有功电能',
					type : 'line',
					smooth : true,
					lineStyle : {
						normal : {
							width : 1
						}
					},
					symbol : 'circle',
					symbolSize : 4,
					itemStyle : {
						normal : {
							color : 'green',
						}
					},
					data : [ 50, 52, 52, 52, 52, 58, 52, 55, 48, 52, 52, 52,
							54, 52, 52, 52, 50, 52, 52, 52, 52, 52, 55, 52, 52,
							49, 52, 52, 52, 52, 52 ]
				},
				{
					name : '无功电能',
					type : 'line',
					smooth : true,
					lineStyle : {
						normal : {
							width : 1
						}
					},
					symbol : 'circle',
					symbolSize : 4,
					itemStyle : {
						normal : {
							color : '#00A1EA',
						}
					},
					data : [ 30, 32, 32, 32, 32, 38, 32, 33, 36, 32, 32, 32,
							34, 32, 32, 32, 39, 32, 32, 32, 32, 32, 33, 32, 32,
							23, 32, 32, 32, 32, 32 ]
				},
				{
					name : '总电能',
					type : 'line',
					smooth : true,
					lineStyle : {
						normal : {
							width : 1
						}
					},
					symbol : 'circle',
					symbolSize : 4,
					itemStyle : {
						normal : {
							color : 'yellow',
						}
					},
					data : [ 10, 11, 12, 13, 11, 9, 11, 12, 13, 11, 9, 8, 10,
							12, 13, 11, 9, 8, 10, 12, 10, 13, 11, 9, 11, 12,
							13, 11, 9, 8, 10, 12, 13, 11, 9, 8, 10, 12, 10 ]
				} ]

	}

	var myChart = echarts.init(document.getElementById('chart_main'), "light");
	myChart.setOption(option, true);
	return {
		"chart" : myChart,
		"option" : option
	};
}