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

MEC_NS.ColumnBreak = 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.content);
        };
    });
};

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

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

/*获取设计的html， 页面上怎么显示控件完全依赖于此方法。 必需的方法*/
MEC_NS.ColumnBreak.prototype.getDesignHtml = function(){
	var mecJson = this.mecJson;
	var content = $.trim(this.mecJson.content);
	
	mecJson.title = content || SystemEnv.getHtmlNoteName(4465);  //标题文字";

	return getDesignHtml(this);
};

/*页面上显示控件完成后调用此方法，主要用于一些必须要使用js对页面进行后置操作时，无需要此方法可至空。 不必需的方法，有此方法系统自动调用*/
MEC_NS.ColumnBreak.prototype.afterDesignHtmlBuild = function(){
};

/*获取构建属性编辑窗体的html，添加和单击控件后会调用此方法，由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.ColumnBreak.prototype.getAttrDlgHtml = function(){
	
	var styleL = "_style" + _userLanguage;

	var theId = this.id;
	
	var htm = "<div id=\"MADCB_"+theId+"\">"
				
				+ "<div class=\"title\">"+SystemEnv.getHtmlNoteName(4650)+"</div>"  //分栏信息
				
				+ "<div class=\"form-group\">"
					+ "<div class=\"row\">"
						+ "<textarea id=\"Content_"+theId+"\" data-autobind='content' class=\"area-control\" placeholder=\""+SystemEnv.getHtmlNoteName(5095)+"\" "+MLanguage.ATTR+"></textarea>"  //请在此处输入 标题文字 或页面跳转时传递过来的参数，即：{参数名称}
					+ "</div>"
					+"<div class=\"row\">"
						+ "<span class=\"col-2 span-control MADCB_BaseInfo_Label"+styleL+"\">"+SystemEnv.getHtmlNoteName(4468)+"</span>"  //字体颜色：
						+ "<div class=\"col-m-8\" style=\"position: relative;\"><input class=\"form-control\" data-autobind='fontColor' id=\"FontColor_"+theId+"\" type=\"text\"/><button class=\"colorBox inside FontColorBox\" type=\"button\" title=\""+SystemEnv.getHtmlNoteName(4236)+"\"/></div>"
						//+ "<div class=\"col pd-4 \"></div>"  //取色器
					+"</div>"
					+"<div class=\"row\">"
						+ "<span class=\"col-2 span-control MADCB_BaseInfo_Label"+styleL+"\">"+SystemEnv.getHtmlNoteName(4469)+"</span>"  //字体大小：
						+ "<div class=\"col-m-8\"><input class=\"form-control\" data-autobind='fontSize' id=\"FontSize_"+theId+"\" type=\"text\"/></div>"
						//+ "<span class=\"col tip-text\">"+SystemEnv.getHtmlNoteName(4470)+"</span>"  //提示：字体大小默认为14px
					+"</div>"
					+"<div class=\"row\">"
						+ "<span class=\"col-2 span-control MADCB_BaseInfo_Label"+styleL+"\">"+SystemEnv.getHtmlNoteName(4637)+"</span>"  //是否加粗：
						+ "<div class=\"col pd-4\"><input type=\"checkbox\" id=\"inBold_"+theId+"\"/></div>"
					+"</div>"
					+"<div class=\"row\" >"
						+ "<span class=\"col-2 span-control MADCB_BaseInfo_Label"+styleL+"\">"+SystemEnv.getHtmlNoteName(4472)+"</span>"  //选择样式：
						+ "<span class=\"col-m-8 pd-7\">"
							+ "<div class=\"multi-switch\">"
								+ "<span>"
									+ "<input type=\"checkbox\" data-checkbox='false' name=\"displayStyle_"+theId+"\" value=\"1\" /><span>"+SystemEnv.getHtmlNoteName(5096)+"</span>"  //文字居左
								+ "</span>"
								+ "<span>"
									+ "<input type=\"checkbox\" data-checkbox='false' name=\"displayStyle_"+theId+"\" value=\"2\" /><span>"+SystemEnv.getHtmlNoteName(5097)+"</span>"  //文字居中
								+ "</span>"
							+ "</div>"
							//+ "<img height=\"24\" class=\"col-12 border\" id=\"leftStyle_"+theId+"\" value=\"1\" onclick=\"MADCB_ChangeStyle('1', '"+theId+"');\" src=\"/mobilemode/images/columnbreak_leftstyle_wev8.png\">"
							//+ "<img height=\"24\" class=\"col-12 border\" id=\"midStyle_"+theId+"\" value=\"2\" onclick=\"MADCB_ChangeStyle('2', '"+theId+"');\" src=\"/mobilemode/images/columnbreak_midstyle_wev8.png\" style=\"margin-top:5px;\">"
						+ "</span>"
					+"</div>"
						
				+ "</div>"
				
				+ "<div class=\"title\">"+SystemEnv.getHtmlNoteName(4339)+"</div>"  //右侧按钮
				+ "<div class=\"form-group\">"
				
					+ "<div class=\"row\">"
						+"<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(5098)+"</span>"   //是否显示：
						+"<div class=\"col-m-8\"><input type=\"checkbox\" id=\"btnEnabled_"+theId+"\" onclick=\"MADCB_BtnEnabledChange('"+theId+"');\"/></div>"
					+ "</div>"
					
					+ "<div id=\"btnInfo_"+theId+"\" style=\"display:none;\">"
						+ "<div class=\"row\">"
							+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4318)+"</span>"  //按钮名称：
							+ "<div class=\"col-m-8\"><input class=\"form-control\" data-autobind='btnText' id=\"btnText_"+theId+"\" type=\"text\" "+MLanguage.ATTR+"/></div>"
						+ "</div>"
						
						+ "<div class=\"row\">"
							+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4349)+"</span>"  //单击事件：
							+ "<div class=\"col-m-8\">"
								+ "<table><tr><td>"
								+ "<div class=\"click-control\">"  
								+ "<input id=\"btnScript_"+theId+"\" type=\"hidden\" value=\"\"/>"
								+ SystemEnv.getHtmlNoteName(4634) //脚本
								+ "</div>" 
								+ "</td></tr></table>"
							+ "</div>"
						+ "</div>"
					+ "</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.ColumnBreak.prototype.afterAttrDlgBuild = function(){
	var theId = this.id;
	var mecHandler = MECHandlerPool.getHandler(theId);
	
	var $attrContainer = $("#MADCB_" + theId);
	
	$("#FontColor_" + theId).val(this.mecJson["fontColor"]);
	$(".FontColorBox", $attrContainer).css('background-color', this.mecJson["fontColor"]);
	$("#FontColor_" + 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;
			$("#FontColor_"+theId).val(colorValue);
			$(el).css('background-color', colorValue);
			$(el).colpickHide();
			mecHandler.autobind && mecHandler.autobind.update();
		}
	});
	
	$("#FontSize_" + theId).val(this.mecJson["fontSize"]);
	
	var inBold = Mec_FiexdUndefinedVal(this.mecJson["inBold"]);
	if(inBold == "1"){
		$("#inBold_"+theId).checked();
	}
	
	MLanguage.setValue($("#Content_" + theId), this.mecJson["content"]);
	
	//MADCB_ChangeStyle(this.mecJson["displayStyle"], theId);
	
	var displayStyle = this.mecJson["displayStyle"];
	var $displayStyle = $("input[type='checkbox'][name='displayStyle_"+theId+"'][value='"+displayStyle+"']");
	if($displayStyle.length > 0){
		$displayStyle.switched();
	}
	
	var btnEnabled = Mec_FiexdUndefinedVal(this.mecJson["btnEnabled"]);
	if(btnEnabled == "1"){
		$("#btnEnabled_"+theId).checked();
	}
	MADCB_BtnEnabledChange(theId);
	
	MLanguage.setValue($("#btnText_" + theId), this.mecJson["btnText"]);
	
	var script = Mec_FiexdUndefinedVal(this.mecJson["btnScript"]);
	$("#btnScript_" + theId).val(script);
	var $clickControl = $(".click-control", $attrContainer);
	$clickControl.click(function(){
		var $this = $(this);
		var $clickScript = $("input", $this);
		SL_AddScriptToField($clickScript);
	});
	SL_ChangeStyle($clickControl, script);
	
	$("#MADCB_"+theId).checkbox({
		onClick: function () { 
			mecHandler.autobind && mecHandler.autobind.update();
		}
	});
	$("#MADCB_"+theId).switcher({
		onClick: function () { 
			mecHandler.autobind && mecHandler.autobind.update();
		}
	});
};

/*获取JSON*/
MEC_NS.ColumnBreak.prototype.getMecJson = function(){
	var theId = this.id;
	
	this.mecJson["id"] = theId;
	this.mecJson["mectype"] = this.type;
	
	var $attrContainer = $("#MADCB_"+theId);
	if($attrContainer.length > 0){
		this.mecJson["fontColor"] = $("#FontColor_" + theId).val();
		this.mecJson["fontSize"] = $("#FontSize_" + theId).val();
		this.mecJson["inBold"] = $("#inBold_"+theId).is(':checked') ? "1" : "0";
		this.mecJson["content"] = MLanguage.getValue($("#Content_" + theId));
		this.mecJson["displayStyle"] = $("input[type='checkbox'][name='displayStyle_"+theId+"']:checked").val();
		
		this.mecJson["btnEnabled"] = $("#btnEnabled_"+theId).is(':checked') ? "1" : "0";
		this.mecJson["btnText"] = MLanguage.getValue($("#btnText_" + theId));
		this.mecJson["btnScript"] = $("#btnScript_" + theId).val();
	}
	return this.mecJson;
};

MEC_NS.ColumnBreak.prototype.getDefaultMecJson = function(){
	return {
		id: this.id,
		mectype: this.type,
		content: SystemEnv.getHtmlNoteName(3534), // 标题
		fontColor: "#333",
		fontSize: "14px",
		inBold: "0",
		displayStyle: "1",
		btnEnabled: "0",
		btnText: SystemEnv.getHtmlNoteName(3888), // 更多
	};
};

function MADCB_BtnEnabledChange(mec_id){
	setTimeout(function(){	//checkbox用了插件，不延时checkbox的checked状态获取不准确
		var cbObj = $("#btnEnabled_" + mec_id)[0];
		var $btnInfo = $("#btnInfo_" + mec_id);
		if(cbObj.checked){
			$btnInfo.show();
		}else{
			$btnInfo.hide();
		}
	},100);
}