// 窗口大小变化时延时刷新图表大小
$(window).resize(function () {
	var width = $(window).width()
	$("#chartdiv").width(width - 20)
})
$(document).ready(function () {
	$("#win").dialog({
		title: "<b>企业监控点在线详情</b>",
		width: 900,
		height: 400,
		closed: true,
		cache: false,
		modal: true,
	})
	setDate()
	getArea()
	//initDialog();
	getMapMessage()
	getDetail()
	$("#btnQuery").on("click", function () {
		query()
	})
})

function transform(data) {
	if (data) {
		$.each(data, function (i, n) {
			if (n["y"] == -9999) {
				n["y"] = null
			}
		})
	}
	return data
}

function query() {
	var city = $("#area").combobox("getValue")
	var time = $("#day").datebox("getValue").replace(/-/g, "")
	var selectDate = $("#day").datebox("getValue")
	if (!time && !city) {
		return
	}
	ajax({
		url: "/web/platformAnalyse/getPower.json",
		type: "POST",
		dataType: "JSON",
		beforeSend: function () {
			$("#chartdiv").mask("数据加载中....")
		},
		data: {
			city: city,
			time: time,
		},
		success: function (data) {
			$("#chartdiv").unmask()
			if (data["status"] == 1) {
				data = data["data"]
				transform(data["time1"])
				transform(data["time2"])
				var json1 = {}
				json1["name"] = selectDate
				json1["data"] = data["time1"]
				var json2 = {}
				var dateArr = selectDate.split("-")
				var yesterday = new Date(dateArr[0], parseInt(dateArr[1]) - 1, dateArr[2]).getTime() - 24 * 60 * 60 * 1000
				yesterday = new Date(yesterday).format("yyyy-MM-dd")
				json2["name"] = yesterday
				json2["data"] = data["time2"]
				showDayChart(
					[json1, json2],
					{
						title: {
							text: "单位:(万千瓦)",
						},
					},
					""
				)
			}
		},
		error: function () {
			$("#chartdiv").unmask()
			layer.msg(" 服务存在异常，请稍后再试！", {
				icon: 2,
			})
		},
	})
}

function setDate() {
	var today = new Date().format("yyyy-MM-dd")
	$("#day").datebox("setValue", today)
}

// 饼图加载
function pieChartBuild(project, pieData) {
	$("#" + project).highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false,
		},
		colors: ["#ED561B", "#24CBE5", "#64E572", "#FF9655", "#FFF263", "#6AF9C4"],
		tooltip: {
			pointFormat: " <b>{point.percentage:.1f}%({point.y})</b>",
		},
		title: {
			text: "",
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: "pointer",
				size: 160,
				dataLabels: {
					enabled: false,
					format: "<b>{point.name}</b>: {point.percentage:.1f} %",
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || "black",
					},
				},
				showInLegend: true,
			},
		},
		series: [
			{
				type: "pie",
				// name: pieData.seriesName,
				data: pieData,
			},
		],
	})
}

var mapType

function getDetail() {
	var provinceName = $("#currentProName").val()
	var cityName = $("#currentCName").val()
	ajax({
		url: "/web/platformAnalyse/getDetail.json",
		type: "POST",
		dataType: "JSON",
		data: {
			provinceName: provinceName,
			cityName: cityName,
		},
		success: function (data) {
			if (data["status"] == 1) {
				data = data["data"]
				if (null != data["city"] && "" != data["city"]) {
					$("#title").html(data["city"] + "运行情况")
					if (data["city"] != "嘉定区") {
						$("#yichangTr").show()
					}
				} else if (null != data["province"] && "" != data["province"]) {
					$("#title").html(data["province"] + "运行情况")
					$("#yichangTr").show()
				} else {
					$("#title").html("全国运行情况")
					$("#yichangTr").show()
				}

				$("#NotonlineCount").html("<a href='javascript:showCompanyDetail()' style='cursor:pointer'>" + data["NotonlineCount"] + "</a>")
				$("#customer").html(data["customer"])
				$("#totalCount").html(data["totalCount"])
				$("#total").html(data["total"] + " 万千瓦")
				var dataArr = []
				var arr1 = ["异常运行", data["NotonlineCount"]]
				var arr2 = ["在线", data["onlineCount"]]
				dataArr.push(arr1)
				dataArr.push(arr2)
				pieChartBuild("container1", dataArr)
			}
		},
	})
}

function initDialog(flag) {
	var provinceName = $("#currentProName").val()
	var cityName = $("#currentCName").val()
	var districtName = $("#currentDisName").val()

	$("#content tr").remove()
	ajax({
		url: "/web/platformAnalyse/getCompanyDetail.json",
		type: "POST",
		data: {
			provinceName: provinceName,
			cityName: cityName,
			districtName: districtName,
		},
		dataType: "JSON",
		success: function (data) {
			$("#content").append(
				"<tr>" +
					'<th align="center" style="width: 28%;"><b>企业名称</b></th>' +
					'<th align="center" style="width: 10%;"><b>监测点总数</b></th>' +
					'<th align="center" style="width: 15%;"><b>当前运行异常数</b></th>' +
					'<th align="center" style="width: 17%;"><b>连续三月运行异常数</b></th>' +
					'<th align="center" style="width: 28%;"><b>服务公司名称</b></th></tr>'
			)
			if (data["status"] == 1) {
				var host = jQuery.parseJSON(AUTH.site.config).platform["01200009"] + "." + AUTH.site.domain
				host = "http://" + host
				var html
				$.each(data["data"], function (i, n) {
					var content = "<tr>"
					if (i % 2 !== 0) {
						content += "<td class='normal_left'><a href='" + host + "?auth_cid=" + n["companyId"] + "' target='_parent'>&nbsp;&nbsp;" + n["companyName"] + "</a></td>"
						content += "<td class='normal'>" + n["totalCount"] + "</td>"
						content += "<td class='normal'>" + n["notOnlineCount"] + "</td>"
						content += "<td class='normal'>" + n["threeMonthNotOnlineCount"] + "</td>"
						content += "<td class='normal_left'>&nbsp;&nbsp;" + n["serviceCompany"] + "</td>"
					} else {
						content += "<td class='other_left'><a href='" + host + "?auth_cid=" + n["companyId"] + "' target='_parent'>&nbsp;&nbsp;" + n["companyName"] + "</a></td>"
						content += "<td class='other'>" + n["totalCount"] + "</td>"
						content += "<td class='other'>" + n["notOnlineCount"] + "</td>"
						content += "<td class='other'>" + n["threeMonthNotOnlineCount"] + "</td>"
						content += "<td class='other_left'>&nbsp;&nbsp;" + n["serviceCompany"] + "</td>"
					}
					content += "</tr>"
					html += content
				})
				$("#content").append(html)
			}
		},
	})
}

function showCompanyDetail() {
	$("#win").dialog("open")
	initDialog()
}

function getCityDetail() {
	var provinceName = $("#currentProName").val()
	var cityName = $("#currentCName").val()
	var districtName = $("#currentDisName").val()

	ajax({
		url: "/web/platformAnalyse/getCityDetail.json",
		type: "POST",
		dataType: "JSON",
		data: {
			provinceName: provinceName,
			cityName: cityName,
			districtName: districtName,
		},
		success: function (data) {
			if (data["status"] == 1) {
				$("#cityContainer").css("display", "")
				if (null != districtName && "" != districtName) {
					$("#title1").html(districtName + "运行情况")
				} else if (null != cityName && "" != cityName) {
					$("#title1").html(cityName + "运行情况")
				} else if (null != provinceName && "" != provinceName) {
					$("#title1").html(provinceName + "运行情况")
				}
				data = data["data"]
				$("#NotonlineCount1").html("<a href='javascript:showCompanyDetail()' style='cursor:pointer'>" + data["NotonlineCount"] + "</a>")
				$("#customer1").html(data["customer"])
				$("#totalCount1").html(data["totalCount"])
				$("#total1").html(data["total"] + " 万千瓦")
				var dataArr = []
				var arr1 = ["异常运行", data["NotonlineCount"]]
				var arr2 = ["在线", data["onlineCount"]]
				dataArr.push(arr1)
				dataArr.push(arr2)
				pieChartBuild("container2", dataArr)
			}
		},
	})
}

function getMapMessage() {
	var provinceName = $("#currentProName").val()
	var cityName = $("#currentCName").val()

	ajax({
		url: "/web/platformAnalyse/getMapMessage.json",
		type: "POST",
		dataType: "JSON",
		data: {
			provinceName: provinceName,
			cityName: cityName,
		},
		success: function (data) {
			if (data["status"] == 1) {
				data = data["data"]
				if (null != data["city"] && "" != data["city"]) {
					loadCityMap(data["dataArr"], data["max"], data["min"], data["city"])
				} else if (null != data["province"] && "" != data["province"]) {
					loadProvinceMap(data["dataArr"], data["max"], data["min"], data["province"])
				} else {
					loadChinaMap(data["dataArr"], data["max"], data["min"])
				}
			}
		},
	})
}

function getArea() {
	ajax({
		url: "/web/platformAnalyse/getArea.json",
		type: "POST",
		dataType: "JSON",
		success: function (data) {
			if (data["status"] == 1) {
				area = data["data"]
				$("#area").combobox({
					data: data["data"],
					valueField: "value",
					textField: "text",
					width: 120,
					panelHeight: 210,
				})
				query()
			}
		},
	})
}

var myChart, ecConfig, zrEvent
var clickCount = 0
var clickTimer

//加载中国地图
function loadChinaMap(dataArr, max, min) {
	mapType = "china"
	// 路径配置
	require.config({
		paths: {
			echarts: "http://static.vbdsm.com/js/lib/echarts/build/dist",
		},
	})
	// 使用
	require(["echarts", "echarts/chart/map"], function (ec) {
		// 使用柱状图就加载bar模块，按需加载
		// 基于准备好的dom，初始化echarts图表
		myChart = ec.init(document.getElementById("main"))

		var curIndx = 0
		var mapType = []
		var mapGeoData = require("echarts/util/mapData/params")

		for (var city in cityMap) {
			mapType.push(city)
			// 自定义扩展图表类型
			mapGeoData.params[city] = {
				getGeoJson: (function (c) {
					var geoJsonName = cityMap[c]
					return function (callback) {
						$.getJSON("../js/geoJson/china-main-city/" + geoJsonName + ".jsonp", callback)
					}
				})(city),
			}
		}
		ecConfig = require("echarts/config")
		zrEvent = require("zrender/tool/event")
		myChart.on(ecConfig.EVENT.CLICK, function (param) {
			$("#currentProName").val(param.name)
			clickCount += 1
			if (null != clickTimer) {
				return
			}
			clickTimer = window.setInterval(function () {
				clearInterval(clickTimer)
				clickTimer = null
				var doClick = function () {
					getCityDetail()
				}
				var doDBClick = function () {
					$("#cityContainer").css("display", "none")
					getMapMessage()
					getDetail()
				}

				if (clickCount == 1) {
					//单击的逻辑
					doClick()
				} else if (clickCount % 2 == 0) {
					//双击的逻辑
					doDBClick()
				}
				clickCount = 0
			}, 300)
		})

		option = {
			tooltip: {
				trigger: "item",
				formatter: "{b}",
			},
			dataRange: {
				min: min,
				max: max,
				realtime: false,
				text: ["高", "低"], // 文本，默认为数值文本
				calculable: true,
				color: ["#d44f47", "#de7e39", "#e49a37", "#d9c224", "#84d653", "#47d077", "#50c38b", "#40ace4", "#3c9ef1"],
			},
			series: [
				{
					name: "china",
					type: "map",
					mapType: "china",
					selectedMode: "single",
					itemStyle: {
						normal: {
							label: {
								show: true,
							},
							areaStyle: {
								color: "#3c9ef1",
							},
						},
						emphasis: {
							label: {
								show: true,
							},
						},
					},
					data: dataArr,
				},
			],
		}

		// 为echarts对象加载数据
		myChart.setOption(option)
	})
}

//加载省地图
function loadProvinceMap(dataArr, max, min, provinceName) {
	mapType = "province"
	// 路径配置
	require.config({
		paths: {
			echarts: "http://static.vbdsm.com/js/lib/echarts/build/dist",
		},
	})
	// 使用
	require(["echarts", "echarts/chart/map"], function (ec) {
		// 使用柱状图就加载bar模块，按需加载
		// 基于准备好的dom，初始化echarts图表
		myChart = ec.init(document.getElementById("main"))
		var curIndx = 0
		var mapType = []
		var mapGeoData = require("echarts/util/mapData/params")

		for (var city in cityMap) {
			mapType.push(city)
			// 自定义扩展图表类型
			mapGeoData.params[city] = {
				getGeoJson: (function (c) {
					var geoJsonName = cityMap[c]
					return function (callback) {
						$.getJSON("../js/geoJson/china-main-city/" + geoJsonName + ".jsonp", callback)
					}
				})(city),
			}
		}
		ecConfig = require("echarts/config")
		zrEvent = require("zrender/tool/event")
		myChart.on(ecConfig.EVENT.CLICK, function (param) {
			$("#currentCName").val(param.name)
			clickCount += 1
			if (null != clickTimer) {
				return
			}
			clickTimer = window.setInterval(function () {
				clearInterval(clickTimer)
				clickTimer = null
				var doClick = function () {
					getCityDetail()
				}
				var doDBClick = function () {
					$("#cityContainer").css("display", "none")
					getMapMessage()
					getDetail()
				}

				if (clickCount == 1) {
					//单击的逻辑
					doClick()
				} else if (clickCount % 2 == 0) {
					//双击的逻辑
					doDBClick()
				}
				clickCount = 0
			}, 300)
		})

		option = {
			tooltip: {
				trigger: "item",
				formatter: "{b}",
			},
			dataRange: {
				min: min,
				max: max,
				realtime: false,
				text: ["高", "低"], // 文本，默认为数值文本
				calculable: true,
				color: ["#d44f47", "#de7e39", "#e49a37", "#d9c224", "#84d653", "#47d077", "#50c38b", "#40ace4", "#3c9ef1"],
			},
			toolbox: {
				show: true,
				feature: {
					selfButtons: {
						//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
						show: true, //是否显示
						title: "返回", //鼠标移动上去显示的文字
						icon: "http://static.vbdsm.com/js/lib/easyui/themes/icons/back.png", //图标
						option: {},
						onclick: function (option) {
							//点击事件,这里的option1是chart的option信息
							$("#currentProName").val("")
							$("#currentCName").val("")
							$("#currentDisName").val("")
							$("#cityContainer").css("display", "none")
							getMapMessage()
							getDetail()
						},
					},
				},
			},
			series: [
				{
					name: provinceName,
					type: "map",
					mapType: provinceName,
					selectedMode: "single",
					itemStyle: {
						normal: {
							label: {
								show: true,
							},
							areaStyle: {
								color: "#3c9ef1",
							},
						},
						emphasis: {
							label: {
								show: true,
							},
						},
					},
					data: dataArr,
				},
			],
		}

		// 为echarts对象加载数据
		myChart.setOption(option)
	})
}

//加载地市地图
function loadCityMap(dataArr, max, min, cityName) {
	mapType = "city"
	// 路径配置
	require.config({
		paths: {
			echarts: "http://static.vbdsm.com/js/lib/echarts/build/dist",
		},
	})
	// 使用
	require(["echarts", "echarts/chart/map"], function (ec) {
		// 使用柱状图就加载bar模块，按需加载
		// 基于准备好的dom，初始化echarts图表
		myChart = ec.init(document.getElementById("main"))

		var curIndx = 0
		var mapType = []
		var mapGeoData = require("echarts/util/mapData/params")

		for (var city in cityMap) {
			mapType.push(city)
			// 自定义扩展图表类型
			mapGeoData.params[city] = {
				getGeoJson: (function (c) {
					var geoJsonName = cityMap[c]
					return function (callback) {
						$.getJSON("../js/geoJson/china-main-city/" + geoJsonName + ".jsonp", callback)
					}
				})(city),
			}
		}
		ecConfig = require("echarts/config")
		zrEvent = require("zrender/tool/event")
		myChart.on(ecConfig.EVENT.CLICK, function (param) {
			$("#currentDisName").val(param.name)
			clickCount += 1
			if (null != clickTimer) {
				return
			}
			clickTimer = window.setInterval(function () {
				clearInterval(clickTimer)
				clickTimer = null
				var doClick = function () {
					getCityDetail()
				}
				var doDBClick = function () {
					$("#currentProName").val("")
					$("#currentCName").val("")
					$("#currentDisName").val("")
					$("#cityContainer").css("display", "none")
					getMapMessage()
					getDetail()
				}

				if (clickCount == 1) {
					//单击的逻辑
					doClick()
				} else if (clickCount % 2 == 0) {
					//双击的逻辑
					doDBClick()
				}
				clickCount = 0
			}, 300)
		})

		option = {
			tooltip: {
				trigger: "item",
				formatter: "{b}",
			},
			dataRange: {
				min: min,
				max: max,
				realtime: false,
				text: ["高", "低"], // 文本，默认为数值文本
				calculable: true,
				color: ["#d44f47", "#de7e39", "#e49a37", "#d9c224", "#84d653", "#47d077", "#50c38b", "#40ace4", "#3c9ef1"],
			},
			toolbox: {
				show: true,
				feature: {
					selfButtons: {
						//自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字
						show: true, //是否显示
						title: "返回", //鼠标移动上去显示的文字
						icon: "http://static.vbdsm.com/js/lib/easyui/themes/icons/back.png", //图标
						option: {},
						onclick: function (option) {
							//点击事件,这里的option1是chart的option信息
							$("#currentCName").val("")
							$("#currentDisName").val("")
							$("#cityContainer").css("display", "none")
							getMapMessage()
							getDetail()
						},
					},
				},
			},
			series: [
				{
					name: cityName,
					type: "map",
					mapType: cityName,
					selectedMode: "single",
					itemStyle: {
						normal: {
							label: {
								show: true,
							},
							areaStyle: {
								color: "#3c9ef1",
							},
						},
						emphasis: {
							label: {
								show: true,
							},
						},
					},
					data: dataArr,
				},
			],
		}
		// 为echarts对象加载数据
		myChart.setOption(option)
	})
}

function showDayChart(series, yAxis, title) {
	$("#chartdiv").highcharts({
		title: {
			text: title,
			x: -20,
		},
		xAxis: {
			type: "datetime",
			tickInterval: 3 * 3600 * 1000,
			gridLineWidth: 1, // 默认是0，即在图上没有纵轴间隔线
			// 自定义x刻度上显示的时间格式，根据间隔大小，以下面预设的小时/分钟/日的格式来显示
			dateTimeLabelFormats: {
				hour: "%H:%M",
				day: "00:00",
			},
		},
		yAxis: yAxis,
		tooltip: {
			crosshairs: {
				width: 1,
				color: "gray",
				// dashStyle: 'shortdot'
			},
			headerFormat: '<span style="font-size: 10px">时间：{point.key}</span><br/>',
			pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><span/><br/>',
			valueDecimals: 2, // 数据值保留小数位数
			// xDateFormat : '%Y-%m-%d %H:%M:%S'
			xDateFormat: "%H:%M",
			shared: true,
		},
		legend: {
			borderWidth: 0,
		},
		series: series,
	})
}