var layer;
var form;
var depotId;
var chartTop;
var chartMain;
// 上面的图标数据
var chartTopData = [ {
	name : '有功电能',
	value : 0.0,
	unit : 'kW·h',
	pos : [ '16.6%', '50%' ],
	range : [ 0, 500 ]
}, {
	name : '无功电能',
	value : 0.0,
	unit : 'kW·h',
	pos : [ '49.8%', '50%' ],
	range : [ 0, 500 ]
}, {
	name : '总电能',
	value : 0.0,
	unit : 'kW·h',
	pos : [ '83%', '50%' ],
	range : [ 0, 1000 ]
} ];

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

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

		laydate.render({
			elem : '#checkMonth',
			type : 'month',
			theme : '#7b8e9f'
		});
		
		
		chartTop = initChartTop();
		chartMain = initChartMain();
		
		//系统自动调用查询
		query();
	});
});

// 根据条件刷新数据
function query() {
	var checkDate = $("#checkDate").val();
	var timeType = $('#timeType input[name="timeType"]:checked ').val();

	if (!checkDate) {
		layer.msg("选择时间条件不能为空");
		return;
	}

	var index = layer.load();
	$.ajax({
		type : "POST",
		url : "../../basic/es/summary-query",
		data : JSON.stringify({
			checkDate : checkDate,
			timeType : timeType
		}),
		dataType : "json",
		contentType : "application/json;charset=UTF-8",
		success : function(result) {
			layer.close(index);
			if (result.code != "0000") {
				layer.alert(result.msg);
				return;
			}
			// 渲染数据信息
			renderSum(result.data.esSum);
			// 渲染仓库分组统计
			renderList(result.data.esSumList);
		},
		error : function() {
			layer.close(index);
			layer.msg("执行异常，后台出现错误！");
		}
	});
};

// 渲染整体统计数据
function renderSum(esSum) {
	var esMax = 10000;
	if(esSum.esCur > esMax){
		chartTopData[0].range =[0,50000];
		chartTopData[1].range =[0,50000];
		chartTopData[2].range =[0,100000];
	}else{
		chartTopData[0].range =[0,2000];
		chartTopData[1].range =[0,2000];
		chartTopData[2].range =[0,8000];
	}
	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.epSum);
		attrData1.push(item.eqSum);
		attrData2.push(item.esSum);
		attrX.push(item.depotName);
	});
	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 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 : '#222939',
		tooltip : {
			trigger : 'axis',
			axisPointer : { // 坐标轴指示器，坐标轴触发有效
				type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		legend : {
			data : [ '有功电能', '无功电能', '总电能' ],
			textStyle : {
				color : 'rgba(55,255,249,1)'
			}
		},
		grid : {
			left : '3%',
			right : '4%',
			bottom : '3%',
			containLabel : true
		},
		xAxis : [ {
			type : 'category',
			data : [ '35号仓', '36号仓', '37号仓', '38号仓', '39号仓', '40号仓', '41号仓',
					'42号仓', '43号仓', '44号仓', '45号仓', '46号仓', '47号仓', '48号仓',
					'49号仓', '50号仓', '51号仓', '52号仓', '53号仓', '54号仓' ],
			splitLine : {
				show : false
			},
			axisLine : {
				lineStyle : {
					color : 'rgba(55,255,249,1)',
				}
			},
			axisLabel : {
				color : 'rgba(55,255,249,1)'
			}
		} ],
		yAxis : [ {
			type : 'value',
			splitLine : {
				show : false
			},
			axisLine : {
				lineStyle : {
					color : 'rgba(55,255,249,1)',
				}
			}
		} ],
		series : [
				{
					name : '有功电能',
					type : 'bar',
					barWidth : 15,
					itemStyle : {
						barBorderRadius : 15,
						color : new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[ {
									offset : 0,
									color : "rgba(55,255,249,1)"
								}, {
									offset : 1,
									color : "rgba(0,222,215,0.2)"
								} ])
					},
					data : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4,
							3, 2, 1, 0.0 ]
				},
				{
					name : '无功电能',
					type : 'bar',
					barWidth : 15,
					itemStyle : {
						barBorderRadius : 15,
						color : new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[ {
									offset : 0.4,
									color : "rgba(255,252,0,1)"
								}, {
									offset : 1,
									color : "rgba(8,228,222,0.2)"
								} ])
					},
					data : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4,
							3, 2, 1, 0.0 ]
				},
				{
					name : '总电能',
					type : 'bar',
					barWidth : 15,
					itemStyle : {
						barBorderRadius : 15,
						color : new echarts.graphic.LinearGradient(0, 0, 0, 1,
								[ {
									offset : 0.4,
									color : "rgba(100,252,2,1)"
								}, {
									offset : 1,
									color : "rgba(16,100,100,0.2)"
								} ])
					},
					data : [ 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 18, 16, 14,
							12, 10, 8, 6, 4, 2, 1 ]
				} ]
	}

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