/**
* 绘制关键项图表
*/



/*var keyBoxTemplate = Handlebars.compile('../widget/keyBox.handlebars');*/

function _plotKeyBox(eid, data) {
	var source   = $("#box").html();
	var keyBoxTemplate = Handlebars.compile(source);
	var today = data.chartData[data.chartData.length - 1][1];
	var yesterday = data.chartData[data.chartData.length - 2][1];

	var chain = yesterday != 0 ? Math.floor(((today - yesterday) / yesterday) * 1000) / 10 : 0;
	var isChainUp = chain > 0;
	var id = '_kbox_' + eid;
	var content = keyBoxTemplate({
		panelColor: isChainUp ? 'panel-red' : 'panel-green',
		id: id,
		title: data.title,
		today: today,
		chain: chain + '%',
		chainArrow: isChainUp ? 'fa-arrow-up' : 'fa-arrow-down'
	});
	$('#' + eid).html(content);

	//$.plot($('#' + id), [{
	$.plot($('#' + eid), [{
		data: data.chartData
	}], {
		xaxes: [{
			mode: 'time',
			show: false
		}],
		yaxes: [{
			show: false
		}],
		shadowSize: 0,
		grid: {
			borderWidth: 0
		},
		colors: [ isChainUp ? "#d9534f" : "#5cb85c"]
	});
}

function setupKeyBox(pid, url, args) {
	// 构造eid，创建div
	var uris = url.split("/");
	var eid = 'id_' + uris[uris.length - 1];  // 取url最后的一段
	//$('#' + pid).append('<div class="row" id="'+eid+'"></div>');

	$.getJSON(url, args, function(data){
		if (data.ret != 0) {
			console.log("ajax " + url + " fail: " + data.ret + ", " + data.msg);
			return;
		}

		console.log(data)
		for (var i = 1; i < data.columns.length; ++i) {
		  var chartData = [];
		  for (var j = 0; j < data.data.length; ++j) {
			chartData.push([(new moment(data.data[j][0], "YYYY-MM-DD")).valueOf(), data.data[j][i]]);
		  }
		  var subid = eid + "_" + i;
		  $('#' + eid).append('<div class="col-lg-3 col-md-4" id="' + subid + '"></div>');
		  _plotKeyBox(subid, { title: data.columns[i], chartData: chartData });
		}
   });
}

function setupKeyBoxDefault(url, args) {
	setupKeyBox('page-wrapper', url, args);
}