if(typeof(Mobile_NS) == 'undefined'){
	Mobile_NS = {};
}

Mobile_NS.FunnelChart = {};

Mobile_NS.FunnelChart.onload = function(p){
	this.build(p);
};

Mobile_NS.FunnelChart.build = function(p){
	var sql = p.sql;
	var $chartContainer = $("#NMEC_" + p.id).find(".wev-chart").height(p.height || 300);
	if(p.width){
		$chartContainer.width(p.width);
	}
    var _build = function (datas) {
		// 基于准备好的dom，初始化echarts实例
		var theChart = echarts.init($chartContainer[0]);

		var labelFontSize = (p["labelFontSize"] == "" || isNaN(p["labelFontSize"])) ? 12 : Number(p["labelFontSize"]);

		var op_series_date = [];

		for (var i = 0; i < datas.length; i++) {
			var da = datas[i];
			var d = {};

			var j = 0;
			for (var key in da) {
				var value = da[key];
				if (j == 0) {
					d["name"] = value;
				}
				if (j == 1) {
					d["value"] = value;
				}
				j++;
			}

			op_series_date.push(d);
		}

		var option = {
			legend: {
				show: false
			},
			calculable: true,
			series: [
				{
					name: '',
					type: 'funnel',
					width: p["seriesWidth"] || '60%',
					height: p["seriesHeight"] || '95%',
					left: p["left"] || 'center',
					top: p["top"] || 'middle',
					label: {
						normal: {
							position: "outside",
							formatter: '{b}'
						}

					},
					data: op_series_date,
					sort: p["sort"]
				},
				{
					name: '',
					type: 'funnel',
					width: p["seriesWidth"] || '60%',
					height: p["seriesHeight"] || '95%',
					left: p["left"] || 'center',
					top: p["top"] || 'middle',
					label: {
						normal: {
							position: 'inside',
							formatter:function(obj){
		                    	return require("mec").formatNumber(obj.value, p.labelFormat);
				            },
							textStyle: {
								fontSize: labelFontSize
							}
						}
					},
					data: op_series_date,
					sort: p["sort"]
				}
			],
			toolbox: {
				showTitle: false,
				itemSize: 28,
				right: 20,
				top: 0,
				feature: {
					myTool: {
						show: p["advancedSearch"] == '1',
						icon: 'image:///mobilemode/mobile/images/plugin/filter.png',
					}
				}
			}
		};

		var color = p["color"];
		if (color) {
			option.color = color.split(",");
		}

		// 使用刚指定的配置项和数据显示图表。
		theChart.setOption(option);

		var clickUrl = p["clickUrl"];
		if (clickUrl && p["_mode"] == "1") {
			theChart.on('click', function (params) {
				var ckUrl = clickUrl.replace(/\{_chart_name}/g, params.name).replace(/\{_chart_value}/g, params.value);
				$u(ckUrl);
			});
		}
	};

	if (p.isdefault) {
		var datas = [
			{ name: "北京", value: "16800" },
			{ name: "上海", value: "5800" },
			{ name: "广州", value: "7263" }
		];

		return _build(datas);
	}

	var msgStyle = "color: #bbb;font-size: 14px;padding: 9px 5px 9px 22px;";
	var msg = "", multiLJson = p['multiLJson'] || {};
	if(!$.trim(sql)){
		msg = multiLJson['4205'];//图表信息设置不完整，未配置数据来源SQL
	}else if (/\{(.*?)\}/.test(sql)) {
		msg = multiLJson['4206'];//SQL中可能包含待解析的参数变量，需运行时显示
	}
	if(msg){
		return $chartContainer.html("<div style=\""+msgStyle+"\">"+msg+"</div>");
	}

	var _u = require("utils");

	_u.api("designer/plugin", {
		action: "getDataBySQLWithEChart",
		notification: false,
		data: {
			datasource: p.datasource,
			sql: compressByLZ(sql)
		}
	}, function (res) {
		_build(res.data);
	}, function () {
		$chartContainer.html("<div style=\""+msgStyle+"\">"+multiLJson['4208']+"</div>");//查询数据来源SQL时出现错误，请检查SQL是否拼写正确
	});
};