define(['mUtil', "Component", "wev-loading", "chartHelper"],function(mUtil, Component, WevLoading,chartHelper) {
	var FunnelChart = function(options) {
		var _funnelChart = {}, $errorTip, $chartContainer;
		
		Component.super(this, options);
		
		this.type = "FunnelChart";
		this.tpl = this.type + "_html";
		this.css = "chart_css";
		
		this.components = {
			loading: new WevLoading({
				delay: 300,
				animation: 1
			})
		};

		var vm = this.viewModel = {
			data : [],//图表数据来源
			height : 300,//图表高度
			title : {
				show : false,
				text : "",//标题
				subtext: "",//副标题
				x: 'center',
	        	y: 0
			},
			series : {
				top : "middle",
				left : "center",
				height : "95%",
				width : "60%",
				sort : "descending" //descending 降序  ascending 升序  none按数据排序
			},
			label : {
				fontSize : 12
			},
			labelFormat:"",
			advancedSearch: {},
			color:"#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色，默认
			standalone : true
		};
		
		this.beforeMount = function(){
			var style = mUtil.toPixel(vm.height || 300, "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)) {
				_funnelChart.buildChart(vm.data, _hideLoading);
			} else {
				_funnelChart.loadData(_hideLoading);
			}
		};
		
		this.cacheSearchLast = function(searchLast){//上一次查询参数map
			vm.searchLast = searchLast;
		};

		_funnelChart.loadData = function(callback){
			var that = this,
				actionUrl = vm.data;
			var timestamp = (new Date()).valueOf();    //时间戳
			
			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;

				_funnelChart.buildChart(result.data, callback);
				$errorTip.html("").hide();
				
				if (!vm.advancedSearch.enable) return;
				vm.toolbox = {
					showTitle: false,
					itemSize: 28,
					right: 20,
					top: 0,
					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){
				$errorTip.html(res).show();
				$chartContainer.hide();
				mUtil.isFunction(callback) && callback.call(this);
			});
		};
		
		_funnelChart.buildChart = function(datas, callback){
			var $chart = $(".wev-chart", this.$el);
			
			require(["echarts"], function(echarts){
				// 基于准备好的dom，初始化echarts实例
				var theChart = echarts.init($chart[0]);
				var op_series_date = datas.map(function(data) {
					var arr = Object.keys(data);

					return {
						name: data[arr[0]],
						value: data[arr[1]]
					};
				});
				var option = {
					legend: {
						show: false
					},
					calculable: true,
					series: [{
						name: '',
						type: 'funnel',
						width: vm.series.width || '60%',
						height: vm.series.height || '95%',
						left: vm.series.left || 'center',
						top: vm.series.top || 'middle',
						label: {
							normal: {
								position: "outside",
								formatter: '{b}'
							}
						},
						data: op_series_date,
						sort: vm.series.sort
					}, {
						name: '',
						type: 'funnel',
						width: vm.series.width || '60%',
						height: vm.series.height || '95%',
						left: vm.series.left || 'center',
						top: vm.series.top || 'middle',
						label: {
							normal: {
								position: 'inside',
								formatter:function(obj){
			                    	return chartHelper.formatNumber(obj.value, vm.labelFormat);
					            },
								textStyle: {
									fontSize: vm.label.fontSize
								}
							}
						},
						data: op_series_date,
						sort: vm.series.sort
					}],
    			    toolbox : vm.toolbox
				};
				
				if(vm.color) {
					option.color = vm.color.split(",");
				}
				
				// 使用刚指定的配置项和数据显示图表。
				theChart.setOption(option);
				
				if(vm.click && mUtil.isFunction(vm.click)){
					theChart.on('click', function (params) {
						vm.click.call(this, params);
					});
				}
				
				if(mUtil.isFunction(callback)){
	            	callback.call(this);
	            }
			});
		};

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

    return Component.init(FunnelChart);
});