define(['mUtil', "Component", "wev-loading","chartHelper"], function (mUtil, Component, WevLoading,chartHelper) {
	var GaugeChart = function (options) {
		var _chart = {}, $errorTip, $chartContainer;

		Component.super(this, options);

		this.type = "GaugeChart";
		this.tpl = this.type + "_html";
		this.css = "chart_css";
		
		this.components = {
			loading: new WevLoading({
				delay: 300,
				animation: 1
			})
		};

		var vm = this.viewModel = {
			data: [],
			title : {
				show : false,
				x : "center",
				y : 0,
				text : "",//标题
				subtext: ""//副标题
			},
			height: 250,//图表高度
			series: {
				axisLine: {            // 坐标轴线
	                lineStyle: {       // 属性lineStyle控制线条样式
	                    width: 6
	                }
	            },
	            axisTick: {            // 坐标轴小标记
	                length: 12,        // 属性length控制线长
	                lineStyle: {       // 属性lineStyle控制线条样式
	                    color: 'auto'
	                }
	            },
	            splitLine: {           // 分隔线
	                length: 20,         // 属性length控制线长
	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
	                    color: 'auto'
	                }
	            },
	            axisLabel: {			//仪表盘标签数字
	                fontSize: 14
	            },
	            pointer: {
	                width: 4
	            },
	            title: {
	                offsetCenter: [0, '-30%'],       // x, y，单位px
	            },
	            radius: "85%",
	            detail: {
	            	formatter:'{value}',
	            	fontSize: 24
	            }
			},
			labelFormat:"",
			advancedSearch: {},
			standalone: true
		};
		
		this.beforeMount = function () {
			var style = mUtil.toPixel(vm.height || 250, "height");;

			if (vm.width) {
				style += mUtil.toPixel(vm.width, "width");;
			}
			vm.style = style;
			
			if(mUtil.isString(vm.click) && vm.click != ""){
				var dataurl = vm.click;
				vm.click = function(params){
					var url = dataurl.replace(/\{_chart_name}/g, params.name).replace(/\{_chart_seriesName}/g, params.seriesName).replace(/\{_chart_value}/g, params.value);
					$u(url);
				};
			}

			vm.title = vm.title.text || '';
		};

		this.mounted = function () {
			$errorTip = this.$el.find(".wev-error");
			$chartContainer = this.$el.find(".wev-chart");
			
			this.refresh();
		};

		this.refresh = function () {
			var loading = this.components.loading;

			loading.setRefs(this.$comp, "wev-refreshing");
			loading.show();

			var _hideLoading = loading.hide.bind(loading);

			if (vm.standalone && mUtil.isArray(vm.data)) {
				_chart.buildChart(vm.data, _hideLoading);
			} else {
				_chart.loadData(_hideLoading);
			}
		};

		this.cacheSearchLast = function(searchLast){//上一次查询参数map
			vm.searchLast = searchLast;
		};

		_chart.loadData = function (callback) {
			var timestamp = new Date().valueOf();    //时间戳
			var that = this,
				actionUrl = vm.data;

			that.timestamp = timestamp;

			if (!vm.standalone) {
				actionUrl = mUtil.getActionUrl(that.type, { action: "getDatas", "mec_id": vm.id }, that.pageid);
			}

			if (!actionUrl) return;

			mUtil.getJSON(actionUrl, {}, function (result) {
				if (timestamp != that.timestamp) {
					return;
				}
				var datas = result.data;

				_chart.buildChart(datas, callback);
				$errorTip.html("").hide();

				if (!vm.advancedSearch.enable) return;
				vm.toolbox = {
					showTitle: false,
					itemSize: 28,
					right: 20,
					top: 20,
					feature: {
						myTool: {
							show: true,
							icon: 'image:///mobilemode/mobile/images/plugin/filter.png',
							onclick: function () {
								require(["mService"], function (mService) {
									mService.show("customsearch", {
										id: that.id,
										pageid: that.pageid,
										searchLast: vm.searchLast || {},
										conditions: vm.advancedSearch.asFields,
										title: vm.title || ""
									});
								});
							}
						}
					}
				};
			}, function(res){
				that.$el.find(".wev-chart-title").removeClass("wev-chart-title-mb");
				$errorTip.html(res).show();
				$chartContainer.hide();
				mUtil.isFunction(callback) && callback.call(this);
			});
		};

		_chart.buildChart = function (datas, callback) {
			var $chart = $(".wev-chart", this.$el);

			require(["echarts"], function (echarts) {
				// 基于准备好的dom，初始化echarts实例
				var theChart = echarts.init($chart[0]);
				var dataObj = mUtil.isArray(datas) ? datas[0]||{}:datas;
				var seriesName = dataObj.name || "--",
					dataValue = parseFloat(dataObj.value) || 0,
					dataLabel = dataObj.label || "--";

				var series = vm.series || {};

				series.type = "gauge";
				series.name = seriesName;
				series.detail.formatter = function(data){
					return chartHelper.formatNumber(data, vm.labelFormat);
				};

				series.data = [{value: dataValue, name: dataLabel}];
				series.min = parseFloat(dataObj.min) || 0;
				series.max = parseFloat(dataObj.max) || 100;

				var option = {
					tooltip: {
						confine: true,
						formatter:function(data){
							return data.name + "<br/>" + data['seriesName']+ " : "+ chartHelper.formatNumber(data['value'],vm.labelFormat);
						}
					},
					series: series,
    			    toolbox : vm.toolbox
				};
				
				// 使用刚指定的配置项和数据显示图表。
				theChart.setOption(option);

				if (mUtil.isFunction(vm.click)) {
					theChart.on('click', function (params) {
						vm.click.call(this, params);
					});
				}

				if (mUtil.isFunction(callback)) {
					callback.call(this);
				}
			});
		};

		_chart.loadData = _chart.loadData.bind(this);
		_chart.buildChart = _chart.buildChart.bind(this);
	};

	return Component.init(GaugeChart);
});