define(['mUtil', "Component", "wev-loading","chartHelper"], function (mUtil, Component, WevLoading,chartHelper) {
	var LineChart = function(options) {
		var _lineChart = {}, $errorTip, $chartContainer;
		
		Component.super(this, options);
		
		this.type = "LineChart";
		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
			},
			grid : {},
			legend : {
				show : true,//是否显示图例
				bottom : 0,//图例底部边距
				textStyle : {
					color : "#333"//字体颜色
				}
			},
			axisLabel : {
				interval : 'auto',//坐标标签间隔，0表示显示所有坐标
				rotate : 0,//坐标标签旋转角度
				fontSize : 12//坐标标签字体大小

			},
			isShowMarkLine : false,//在图表上显示一根平均值的标线
			isShowLabel : false,//在折线点上显示具体的数值
			isShowArea : false,//显示每条折线的阴影面积
			color:"#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色，默认
			labelFormat:"",
			advancedSearch: {},
			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 || '';
			var grid = vm.grid;
			grid.right = grid.right || (vm.isShowMarkLine ? 30 : 20);
			grid.top = vm.isShowLabel ? 30 : 15;
			grid.left = grid.left || 10;
			grid.bottom = vm.legend.show ? 35 : 10;
			grid.containLabel = true;

			vm.grid = grid;
		};
		
		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)) {
				_lineChart.buildChart(vm.data, _hideLoading);
			} else {
				_lineChart.loadData(_hideLoading);
			}
		};
		
		this.cacheSearchLast = function(searchLast){//上一次查询参数map
			vm.searchLast = searchLast;
		};

		_lineChart.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;

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

						if(!j) return op_category_data.push(val);

						var op_series_one = op_series_meta[j - 1] || {};
						var op_series_one_data = op_series_one.data || [];

						op_series_one.data = op_series_one_data;
						op_series_meta[j - 1] = op_series_one;
						
						if(i === 0) {
							op_series_one.name = k;
							op_legend_data.push(k);
						}
						op_series_one_data.push(val);
					});
				});
    			
				var op_series = op_series_meta.map(function(smeta) {
					var op_series_one = {
						type: "line",
						name: smeta.name,
						data: smeta.data
					};
					
					if(vm.isShowMarkLine) {
						op_series_one.markLine = {
							data: [{ type: 'average', name: '平均值' }],
							itemStyle: {
						           normal: {
						               label: {
						                      show: true,
						                      formatter:function(obj){
						                    	  return chartHelper.formatNumber(obj.value, vm.labelFormat);
								              }
						                }
						           }
			                }
						};
					}

					if (vm.isShowLabel) {
						op_series_one.label = {
							normal: { 
								show: true,
								position: 'top',
				                formatter:function(obj){
				                	 return chartHelper.formatNumber(obj.value, vm.labelFormat);
					            }
							}
						};
					}

					if (vm.isShowArea) {
						op_series_one.areaStyle = { normal: {} };
					}
					return op_series_one;
				});

    			//图例
    			var legend = vm.legend;
    			
    			//图例数据
					legend.data = op_legend_data; //['蒸发量','降水量'],
					legend.bottom = 5;
    			
    			var option = {
    			    tooltip : {
									trigger: 'axis',
									confine: true,
						position: function(point,params,dom,rect,size){
							dom.style.transform="translateZ(0)";
						}
    			    },
    			    grid : vm.grid,
    			    legend: legend,
    			    calculable : true,
    			    xAxis : {
    		            type : 'category',
    		            boundaryGap: false,
    		            data : op_category_data,
    		            axisLabel : vm.axisLabel
    		       },
    			    yAxis : {
    			        type: 'value'
    			    },
    			    series : op_series,
    			    toolbox : vm.toolbox
    			};
    			
    			if(vm.color){
    				option.color = vm.color.split(",");
    			}
    			
    			// 使用刚指定的配置项和数据显示图表。
    			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);
                }
            });
		};

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

    return Component.init(LineChart);
});