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

		var vm = this.viewModel = {
			/*
			Column2D 2D柱状图, Column3D 3D柱状图, Pie2D 2D饼状图
			Pie3D 3D饼状图, Donut2D 2D环形图, Line2D 2D折线图, Area2D 2D面积图
			*/
			data : [],
			chartType : "Column2D",
			height : 300,
			linecolor : "blue",
			title : {
				name : "",
				color : "black",
				font : "Verdana",
				fontsize : 14,
				fontweight : "normal"
			},
			labelFormat : "",
			advancedSearch: {},
			option : {},
			standalone : true
		};
		
		this.beforeMount = function(){
			var height = vm.height || 300, style;

			style = mUtil.toPixel(height, "height");

			if(vm.width){
				style += mUtil.toPixel(vm.width, "width");
			}

			vm.title.text = vm.title.name;
			vm.style = style;
			vm.height = height;
			vm.linecolor = vm.linecolor || 'blue';
			vm.width = vm.width || $(document).width();
			vm.pageid = this.pageid || "";
			
			delete vm.title.name;
		};
		
		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.preBuildChart(vm.chartType, vm.data, _hideLoading);
			} else {
				_chart.loadData(_hideLoading);
			}
		};

		this.cacheSearchLast = function(searchLast){//上一次查询参数map
			vm.searchLast = searchLast;
		};
		
		_chart.loadData = function(callback){
			var that = this,
				$chart = $(".wev-chart", this.$el),
				$chartSerach = $(".wev-chart-container>a", this.$el),
				actionUrl = vm.data;
			var timestamp = new Date().valueOf();    //时间戳
			
            that.timestamp = timestamp;
            
            if(!vm.standalone){
            	actionUrl = mUtil.getActionUrl(that.type, {action:"getDatas", "mec_id":that.id}, that.pageid);
            }

			if(!actionUrl) return;

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

				$chart.show().html("");
				_chart.preBuildChart(vm.chartType, result.data, callback);
				$errorTip.html("").hide();
				
				if (!vm.advancedSearch.enable) return;
				$chartSerach.css("left", vm.width*0.1 + "px");
				$chartSerach.show();

				$chartSerach.on("click", function () {
					require(["mService"], function (mService) {
						mService.show("customsearch", {
							id: that.id,
							pageid: that.pageid,
							searchLast: vm.searchLast || {},
							conditions: vm.advancedSearch.asFields,
							title: vm.title.text || ""
						});
					});
				});
			}, function(res){
				$errorTip.html(res).show();
				$chartContainer.hide();
				mUtil.isFunction(callback) && callback.call(this);
			});
		};
		
		_chart.preBuildChart = function(type, datas, callback){
			require(["ichart"], function(){
				try{
            		_chart.buildChart[type](datas);
            	}catch(e){
            		console.error(e.message);
            	}
            	if(typeof(callback) == "function"){
                	callback.call(this);
                }
			});
		};
		
		var _getCfg = function (datas, cfg, isradius) {
			var o = $.extend(true, {}, {
				render: "wev-chart_" + vm.id + "_" + vm.pageid,
				data: datas,
				title: vm.title,
				animation: true,
				animation_duration: 800,
				height: vm.height,
				width: vm.width,
				align: 'center',
				border: false,
				background_color: null,
				turn_off_touchmove: true,
			}, cfg);

			if(isradius !== false) {
				o.radius = "90%";
			}

			return o;
		};

		_chart.buildChart = {
			Column2D : function(datas){
				new iChart.Column2D(_getCfg(datas, {
					sub_option: {
						label: {
							color: '#111111'
						},
						listeners: {
							parseText: function (_r, t) {
								return chartHelper.formatNumber(t, vm.labelFormat);
							}
						}
					},
					coordinate: {
						background_color: '#fefefe',
						scale: [{
							position: 'left'
						}]
					}
				}, false)).draw();
			},
			Column3D : function(datas){
				new iChart.Column3D(_getCfg(datas, {
					sub_option:{
						label:{
							color:'#111111'
						},
						listeners : {
							parseText : function(_r, t) {
								return chartHelper.formatNumber(t, vm.labelFormat);
							}
						}
					},
					coordinate:{
						scale:[{
							 position:'left'
						}]
					}
				}, false)).draw();
			},
			Pie2D : function(datas){
				new iChart.Pie2D(_getCfg(datas, {
					sub_option: {
						listeners: {
							parseText: function (_r, t) {
								return chartHelper.formatNumber(t, vm.labelFormat);
							}
						},
						label: {
							background_color: null,
							sign: false,//设置禁用label的小图标
							padding: '0 4',
							border: {
								enable: false,
								color: '#666666'
							},
							fontsize: 11,
							fontweight: 600,
							color: '#4572a7'
						}
					}
				})).draw();
			},
			Pie3D : function(datas){
				new iChart.Pie3D(_getCfg(datas, {
					sub_option: {
						listeners: {
							parseText: function (_r, t) {
								return chartHelper.formatNumber(t, vm.labelFormat);
							}
						},
						label: {
							background_color: null,
							sign: false,//设置禁用label的小图标
							padding: '0 4',
							border: {
								enable: false,
								color: '#666666'
							},
							fontsize: 11,
							fontweight: 600,
							color: '#4572a7'
						}
					}
				})).draw();
			},
			Donut2D : function(datas){
				new iChart.Donut2D(_getCfg(datas, {
					sub_option : {
						listeners : {
							parseText : function(_r, t) {
								return chartHelper.formatNumber(t, vm.labelFormat);
							}
						},
						label : {
							background_color:null,
							sign:false,//设置禁用label的小图标
							padding:'0 4',
							border:{
								enable:false,
								color:'#666666'
							},
							fontsize:11,
							fontweight:600,
							color : '#4572a7'
						}
					},
				})).draw();
			},
			Line2D : function(datas){
				var flow = [];
				var labels = [];

				datas.forEach(function(d) {
					labels.push(d.name);
					flow.push(d.value);
				});
				
				var data = [{
					name: "line",
					value: flow,
					color: vm.linecolor,
					line_width: 2
				}];
				
				new iChart.LineBasic2D(_getCfg(data, {
					labels: labels,
					sub_option: {
						hollow_inside: false,
						point_size: 10,
						listeners: {
							parseText: function (_r, t) {
								return chartHelper.formatNumber(t, vm.labelFormat);
							}
						},
						label: {
							background_color: null,
							sign: false,//设置禁用label的小图标
							padding: '0 4',
							border: {
								enable: false,
								color: '#666666'
							},
							fontsize: 11,
							fontweight: 600,
							color: '#4572a7'
						}
					}
				})).draw();
			},
			Area2D : function(datas){
				var flow = [];
				var labels = [];

				datas.forEach(function (d) {
					labels.push(d.name);
					flow.push(d.value);
				});
				
				var data = [{
					name : "line",
					value : flow,
					color:vm.linecolor,
				    line_width:2
				}];
				
				new iChart.Area2D(_getCfg(data, {
					labels:labels,
					sub_option : {
						hollow_inside:false,
						point_size:10,
						listeners : {
							parseText : function(_r, t) {
								return chartHelper.formatNumber(t, vm.labelFormat);
							}
						},
						label : {
							background_color:null,
							sign:false,//设置禁用label的小图标
							padding:'0 4',
							border:{
								enable:false,
								color:'#666666'
							},
							fontsize:11,
							fontweight:600,
							color : '#4572a7'
						}
					},
				})).draw();
			}
		};

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

    return Component.init(Chart);
});