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

MEC_NS.ProgressBar = function(typeTmp, idTmp, mecJsonTmp){
	this.type = typeTmp;
	if(!idTmp){
		idTmp = new UUID().toString();
	}
	this.id = idTmp;
	if(!mecJsonTmp){
		mecJsonTmp = this.getDefaultMecJson();
	}
	this.mecJson = mecJsonTmp;
    var that = this;
    require(['mec'], function(mec){
        that.remark = function(){
            return mec.remark(that.mecJson.numParamer.toString());
        };
    });
};

/*获取id。 必需的方法*/
MEC_NS.ProgressBar.prototype.getID = function(){
	return this.id;
};

MEC_NS.ProgressBar.prototype.runWhenPageOnLoad = function(){
	this.afterDesignHtmlBuild();
};

/*获取设计的html， 页面上怎么显示控件完全依赖于此方法。 必需的方法*/
MEC_NS.ProgressBar.prototype.getDesignHtml = function(){
	var numParamer = $.trim(this.mecJson.numParamer);
	var mecJson = this.mecJson;

	mecJson.percent = numParamer || 0;
	
	return getDesignHtml(this);
};

/*页面上显示控件完成后调用此方法，主要用于一些必须要使用js对页面进行后置操作时，无需要此方法可至空。 不必需的方法，有此方法系统自动调用*/
MEC_NS.ProgressBar.prototype.afterDesignHtmlBuild = function(){
	var $bar = $("#NMEC_" + this.id).find(".wev-progress-bar");
	var mecJson = this.mecJson;
	var percent = parseFloat(mecJson.percent);
	var $progress = $bar.find("div");

	//四舍五入保留小数
	function toRound(value, num){
		var n = Number(num);
		if(isNaN(n)){
			n = 2;
		}
		value = Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
		return value.toFixed(n);
	}
	
	if(isNaN(percent)){
		$progress.css({width:'100%'}).text(mecJson.percent);
		return ;
	}

	var colors = mecJson.percentAreaColor;
	var len = colors.length, width;

	width = toRound((percent > 100 ? 100 : percent), 2) + "%";

	$progress.width(width);
	
	if (percent === 0) return;

    if (mecJson.showNum == "1") {
        var text = ~mecJson.percent.toString().indexOf('.') ? toRound(percent, 2) : percent;
		$progress.text(text + '%');
    }

	colors.every(function (color) {
		var isOutOfRange = percent > parseFloat(color.endPercent)||percent < parseFloat(color.startPercent);

        if(isOutOfRange) return isOutOfRange;
        $progress.css({
            backgroundColor: color.areaColor
        });
	});
};

/*获取构建属性编辑窗体的html，添加和单击控件后会调用此方法，由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.ProgressBar.prototype.getAttrDlgHtml = function(){
	var tip = "";
	if(_userLanguage=="8"){
		tip = "Please enter here a fixed value or page jump pass over the parameters, namely, the parameters for the {name}. Dataset also support, such as: {data.name}";
	}else if(_userLanguage=="9"){
		tip = "請在此處輸入一個固定數值或頁面跳轉時傳遞過來的參數，即：{參數名稱}，也可以輸入數据集引用，如：{data.name}";
	}else{
		tip = "请在此处输入一个固定数值或页面跳转时传递过来的参数，即：{参数名称}，也可以输入数据集引用， 如：{data.name}";
	}

	var theId = this.id;
	
	var htm = "<div id=\"MADPB_"+theId+"\">"
				+ "<div class=\"title\">"+SystemEnv.getHtmlNoteName(4453)+"</div>"  //进度条数值
				+ "<div class=\"form-group\">"
					+ "<div class=\"row\">"
						+ "<textarea id=\"NumParamer_"+theId+"\" data-autobind='numParamer' class=\"area-control\" placeholder=\""+tip+"\"></textarea>"  // 请在此处输入一个固定数值或页面跳转时传递过来的参数，即：{参数名称}，也可以输入数据集引用， 如：{data.name}
					+ "</div>"
					
					+"<div class=\"row\">"
						+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(5092)+"</span>"  //显示数值：
						+ "<div class=\"col-m-8\"><input type=\"checkbox\" data-autobind='showNum' class='form-control' id=\"showNum_"+theId+"\" onclick=\"MADPB_ChangeRAT(this, '"+theId+"');\"/></div>"
					+"</div>"
					
					+"<div class=\"row\" id=\"MADPB_FontColorContent_"+theId+"\">"
						+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(5093)+"</span>"  //数值颜色：
						+ "<div class=\"col-m-8\" style=\"position: relative;\"><input class=\"form-control\" data-autobind='fontColor' id=\"font_color_"+theId+"\" type=\"text\"/><button name=\"FontColorpick\" class=\"colorBox inside FontColorBox\" type=\"button\" title=\""+SystemEnv.getHtmlNoteName(4236)+"\"/></div>"
					+"</div>"
						
					+"<div class=\"row\" id=\"MADPB_FontSizeContent_"+theId+"\">"
						+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4469)+"</span>"  //字体大小：
						+ "<div class=\"col-m-8\"><input class=\"form-control\" data-autobind='fontSize' id=\"font_Size_"+theId+"\" type=\"text\"/></div>"
					+"</div>"
				+ "</div>"
				
				+ "<div class=\"title\">"
					+ SystemEnv.getHtmlNoteName(4650)  //进度条基本信息
				+ "</div>"
				+ "<div class=\"form-group\">"	
					+"<div class=\"row\">"
						+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4128)+"</span>"  //高度：
						+ "<div class=\"col-m-8\"><input class=\"form-control\" data-autobind='lineHeight' id=\"line_Height_"+theId+"\" type=\"text\"/></div>"
					+"</div>"
					
					+"<div class=\"row\">"
						+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(5094)+"</span>"  //背景色：
						+ "<div class=\"col-m-8\" style=\"position: relative;\"><input class=\"form-control\" data-autobind='bgcolor' id=\"BG_color_"+theId+"\" type=\"text\"/><button name=\"BGColorpick\" class=\"colorBox inside BGColorBox\" type=\"button\" title=\""+SystemEnv.getHtmlNoteName(4236)+"\"/></div>"
					+"</div>"
						
				+ "</div>"
				
				+ "<div class=\"title\">"
					+ SystemEnv.getHtmlNoteName(4462)  //进度条颜色
					+ "<div class=\"add-before\" data-autobind onclick=\"MADPB_AddColorItem('"+theId+"');\">"+SystemEnv.getHtmlNoteName(3518)+"</div>"  //添加
				+ "</div>"
				+ "<div class=\"form-group\">"
					+ "<div class=\"progressbar_btn_content\">"
						+ "<div class=\"tip-control progressbar_btn_empty_tip\">"+SystemEnv.getHtmlNoteName(4463)+"</div>"  //单击右上角的添加按钮以添加百分比区域颜色
						+ "<ul class=\"content-up\"></ul>"
					+ "</div>"
				+ "</div>"
						
				
				+ "<div class=\"bottom\"><div class=\"save-btn\" onclick=\"refreshMecDesign('"+theId+"');\">"+SystemEnv.getHtmlNoteName(3451)+"</div></div>"  //确定
			+ "</div>";
	htm += "<div class=\"MAD_Alert\">"+SystemEnv.getHtmlNoteName(4115)+"</div>";  //已生成到布局
	return htm;
};

/*构建属性编辑窗体完成后调用此方法，主要用于一些必须要使用js对页面进行后置操作时，无需要此方法可至空。 不必需的方法，有此方法系统自动调用*/
MEC_NS.ProgressBar.prototype.afterAttrDlgBuild = function(){
	var theId = this.id;
	var mecHandler = MECHandlerPool.getHandler(theId);
	
	var $attrContainer = $("#MADPB_" + theId);
	
	$("#NumParamer_" + theId).val(this.mecJson["numParamer"]);
	
	$("#line_Height_" + theId).val(this.mecJson["lineHeight"]);
	
	var showNum = Mec_FiexdUndefinedVal(this.mecJson["showNum"]);
	if(showNum == "1"){
		$("#showNum_"+theId).checked();
		$("#MADPB_FontColorContent_" + theId).show();
		$("#MADPB_FontSizeContent_" + theId).show();
	}else{
		$("#MADPB_FontColorContent_" + theId).hide();
		$("#MADPB_FontSizeContent_" + theId).hide();
	}
	
	$("#font_color_" + theId).val(this.mecJson["fontColor"]);
	$(".FontColorBox", $attrContainer).css('background-color', this.mecJson["fontColor"]);
	$("#font_color_" + theId).keyup(function(){
		$(".FontColorBox", $attrContainer).css('background-color', $(this).val().trim());
	});
	$(".FontColorBox", $attrContainer).colpick({
		colorScheme:'dark',
		layout:'rgbhex',
		color:'007aff',
		onSubmit:function(hsb,hex,rgb,el) {
			var colorValue = "#" + hex;
			$("#font_color_"+theId).val(colorValue);
			$(el).css('background-color', colorValue);
			$(el).colpickHide();
			mecHandler.autobind && mecHandler.autobind.update();
		}
	});
	
	$("#font_Size_" + theId).val(this.mecJson["fontSize"]);
	
	$("#BG_color_" + theId).val(this.mecJson["bgcolor"]);
	$(".BGColorBox", $attrContainer).css('background-color', this.mecJson["bgcolor"]);
	$("#BG_color_" + theId).keyup(function(){
		$(".BGColorBox", $attrContainer).css('background-color', $(this).val().trim());
	});
	$(".BGColorBox", $attrContainer).colpick({
		colorScheme:'dark',
		layout:'rgbhex',
		color:'007aff',
		onSubmit:function(hsb,hex,rgb,el) {
			var colorValue = "#" + hex;
			$("#BG_color_"+theId).val(colorValue);
			$(el).css('background-color', colorValue);
			$(el).colpickHide();
			mecHandler.autobind && mecHandler.autobind.update();
		}
	});
	
	var percentAreaColor = this.mecJson["percentAreaColor"];
	if(!percentAreaColor){
		percentAreaColor = [];
	}
	if(percentAreaColor.length == 0){
		$(".progressbar_btn_empty_tip", $attrContainer).show();
	}
	for(var i = 0; i < percentAreaColor.length; i++){
		MADPB_AddColorItem(theId, percentAreaColor[i]);
	}
	
	$("#MADPB_"+theId).checkbox({
		onClick: function () { 
			mecHandler.autobind && mecHandler.autobind.update();
		}
	});
	$("#MADPB_"+theId + " .progressbar_btn_content > ul").sortable({
		revert: false,
		axis: "y",
		items: "li",
		handle: ".bemove",
		update: function(){
			mecHandler.autobind.update();
		}
	});
};

/*获取JSON*/
MEC_NS.ProgressBar.prototype.getMecJson = function(){
	var theId = this.id;
	
	this.mecJson["id"] = theId;
	this.mecJson["mectype"] = this.type;
	
	var $attrContainer = $("#MADPB_"+theId);
	if($attrContainer.length > 0){
		this.mecJson["numParamer"] = $("#NumParamer_" + theId).val();
		this.mecJson["bgcolor"] = $("#BG_color_" + theId).val();
		this.mecJson["lineHeight"] = $("#line_Height_" + theId).val();
		this.mecJson["showNum"] = $("#showNum_"+theId).is(':checked') ? "1" : "0";
		this.mecJson["fontColor"] = $("#font_color_" + theId).val();
		this.mecJson["fontSize"] = $("#font_Size_" + theId).val();
		
		var percentAreaColor = [];
		var $line_li = $(".progressbar_btn_content > ul > li", $attrContainer);
		$line_li.each(function(){
			var startPercent = $("input[name=startPercent]", $(this)).val().trim();
			var endPercent = $("input[name=endPercent]", $(this)).val().trim();
			var areaColor = $("input[name=areaColor]", $(this)).val().trim();
			percentAreaColor.push({
				"startPercent"     : startPercent, 
				"endPercent" : endPercent,
				"areaColor" : areaColor
			});
		});
		this.mecJson["percentAreaColor"] = percentAreaColor;
	}
	return this.mecJson;
};

MEC_NS.ProgressBar.prototype.getDefaultMecJson = function(){
	return {
		id: this.id,
		mectype: this.type,
		numParamer: 80,
		lineHeight: "22px",
		showNum: "1",
		fontColor: "#FFFFFF",
		fontSize: "12px",
		bgcolor: "#DDD",
		percentAreaColor: [
			{ "startPercent": 0, "endPercent": 50, "areaColor": "#F85333" },
			{ "startPercent": 50, "endPercent": 60, "areaColor": "#4ED8F2" },
			{ "startPercent": 60, "endPercent": 100, "areaColor": "#01D48F" }
		]
	};
};

function MADPB_AddColorItem(mec_id, data){
	var $attrContainer = $("#MADPB_" + mec_id);
	$(".progressbar_btn_empty_tip", $attrContainer).hide();
	
	var startPercent = "";
	var endPercent = "";
	var areaColor = "";
	if(data){
		startPercent = Mec_FiexdUndefinedVal(data["startPercent"]);
		endPercent = Mec_FiexdUndefinedVal(data["endPercent"]);
		areaColor = Mec_FiexdUndefinedVal(data["areaColor"]);
	}
	
	var $ul = $(".progressbar_btn_content > ul", $attrContainer);
	var $li = $("<li class=\"c_li\"></li>");
	var htm = "<table class=\"table\" style=\"margin:0px;\">";
	htm += "<tbody>";
	htm += "<tr>";
		htm += "<td class=\"bemove\" width=\"20px\"></td>";
	    htm += "<td width=\"45px\" valign=\"middle\">";
	    	htm += "<input name=\"startPercent\" data-autobind type=\"text\" title=\"\" class='form-control' value=\"" + startPercent + "\" placeholder=\"\"/>";
	    htm += "</td>";
	    
	    htm += "<td width='10px' valign=\"middle\">-</td>";
	    
	    htm += "<td width=\"45px\" valign=\"middle\">";
	    	htm += "<input name=\"endPercent\" data-autobind type=\"text\" title=\"\" class='form-control' value=\"" + endPercent + "\" placeholder=\"\"/>";
	    htm += "</td>";
	    
	    htm += "<td>%</td>";
		
		htm += "<td width=\"*\">";
			htm += "<input name=\"areaColor\" data-autobind type=\"text\" title=\"\" class='form-control'  value=\"" + areaColor + "\" placeholder=\""+SystemEnv.getHtmlNoteName(4464)+"\"/>";  //颜色
		htm += "</td>";
		
		htm += "<td width=\"30px\">";
			htm += "<button name=\"colorpick\" class=\"colorBox\" type=\"button\" title=\""+SystemEnv.getHtmlNoteName(4236)+"\" style=\"background-color:" + areaColor + ";\"/>";  //取色器
		htm += "</td>";
		
		htm += "<td align=\"right\">";
			htm += "<span class=\"del-after2\" title=\""+SystemEnv.getHtmlNoteName(3519)+"\" onclick=\"MADPB_deleteOneItemOnPage('" + mec_id + "',this)\"></span>";  //删除
		htm += "</td>";
		
	htm += "</tr>";
	htm += "</tbody>";
	htm += "</table>";
	$($li.html(htm));
	$ul.append($li);
	MADPB_bindEventOnCLi($li,mec_id);
}

function MADPB_bindEventOnCLi(obj,mec_id){
	var $li = $(obj);
	var mecHandler = MECHandlerPool.getHandler(mec_id);
	
	$(".colorBox", $li).colpick({
		colorScheme:'dark',
		layout:'rgbhex',
		color:'007aff',
		onSubmit:function(hsb,hex,rgb,el) {
			var eleId = $(el).attr("id");
			var colorValue = "#" + hex;
			$("input[name=areaColor]", $li).val(colorValue);
			$(el).css('background-color', colorValue);
			$(el).colpickHide();
			mecHandler.autobind.update();
		}
	});
	
	var $areaColor = $("input[name=areaColor]", $li);
	$areaColor.on("keyup", function(){
		var areaColor = $("input[name=areaColor]", $li).val().trim();
		$("button[name=colorpick]", $li).css("background-color", areaColor);
	});
}

function MADPB_deleteOneItemOnPage(mec_id, obj){
	var mecHandler = MECHandlerPool.getHandler(mec_id);

	$(obj).closest(".c_li").remove();
	var $attrContainer = $("#MADPB_" + mec_id);
	if($(".progressbar_btn_content > ul > li", $attrContainer).length == 0){
		$(".progressbar_btn_empty_tip").show();
	}
	mecHandler.autobind.update();
}

function MADPB_ChangeRAT(cbObj, mec_id){
	var mecHandler = MECHandlerPool.getHandler(mec_id);

	setTimeout(function(){	//checkbox用了插件，不延时checkbox的checked状态获取不准确
		if(!cbObj.checked){
			$("#MADPB_FontColorContent_" + mec_id).hide();
			$("#MADPB_FontSizeContent_" + mec_id).hide();
		}else{
			$("#MADPB_FontColorContent_" + mec_id).show();
			$("#MADPB_FontSizeContent_" + mec_id).show();
		}
	},100);
	mecHandler.autobind && mecHandler.autobind.update();
}