Countdown_wev8.js 7.94 KB
if(typeof(MEC_NS) == 'undefined'){
	MEC_NS = {};
}

MEC_NS.Countdown = function(type, id, mecJson){
	this.type = type;
	if(!id){
		id = new UUID().toString();
	}
	this.id = id;
	if(!mecJson){
		mecJson = this.getDefaultMecJson();
	}
	this.mecJson = mecJson;
};

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

MEC_NS.Countdown.prototype.runWhenPageOnLoad = function(){
	var theId = this.id;
	$("#timeContainer_"+theId).children().remove();
	this.afterDesignHtmlBuild();
};

/*获取设计的html, 页面上怎么显示控件完全依赖于此方法。 必需的方法*/
MEC_NS.Countdown.prototype.getDesignHtml = function(){
	this.afterDesignHtmlBuild();
	var mecJson = this.mecJson;
	var type = mecJson.rightActionType;
	var parameter = mecJson.parameter;

	mecJson.timer = "";
	mecJson.date = "";

	if (type == 1) {
		mecJson.date = mecJson.countdowndate1 || "";
	} else if (type == 3) {
		mecJson.timer = "0";
	}

	return getDesignHtml(this);
};

/*获取构建属性编辑窗体的html,添加和单击控件后会调用此方法,由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.Countdown.prototype.getAttrDlgHtml = function(){
	var theId = this.id;
	
	var htm = "<div id=\"MADCD_"+theId+"\">"
				+ "<div class=\"title\">"+SystemEnv.getHtmlNoteName(4650)+"</div>"  
				+ "<div class=\"form-group\">"
				
						+ "<div class=\"row\">"
							+ "<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4278)+"</span>"  //执行操作:
							+ "<span class=\"col-m-8 multi-checkbox\">"
								+ "<span>"
									+ "<input type=\"checkbox\" name=\"rightActionType_"+theId+"\" value=\"1\" onclick=\"MADCD_ChangeRAT(this, '"+theId+"');\"/><span class=\"cbboxLabel\">"+SystemEnv.getHtmlNoteName(4279)+"</span>"  //选择时间
								+ "</span>"
								+ "<span>"
									+ "<input type=\"checkbox\" name=\"rightActionType_"+theId+"\" value=\"3\" onclick=\"MADCD_ChangeRAT(this, '"+theId+"');\"/><span class=\"cbboxLabel\">"+SystemEnv.getHtmlNoteName(4281)+"</span>"  //获取参数
								+ "</span>"
							+ "</span>"
						+ "</div>"
						
						+ "<div class=\"rightActionContent actionContent\" id=\"rightActionContent_"+theId+"_1\" style=\"display: none;\">"
						
							+"<div class=\"row\">"
								+"<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(4282)+"</span>"   //截止日期:
								+"<div class=\"col-m-8\"><input type=\"text\" id=\"countdowndate_"+theId+"\" class=\"form-control\" readonly=\"readonly\"/></div>"
							+"</div>"
						
						+ "</div>"
						
						+ "<div class=\"rightActionContent actionContent\" id=\"rightActionContent_"+theId+"_2\" style=\"display: none;\">"
						+ "</div>"
						
						+ "<div class=\"rightActionContent actionContent\" id=\"rightActionContent_"+theId+"_3\" style=\"display: none;\">"
						
							+"<div class=\"row\">"
								+"<span class=\"col-2 span-control\" >"+SystemEnv.getHtmlNoteName(4285)+"</span>"  //获取参数:  
								+ "<div class=\"col-m-8\"><input type=\"text\" data-autobind='parameter' id=\"parameter_"+theId+"\" class=\"form-control\" /></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.Countdown.prototype.afterDesignHtmlBuild = function(){
	var $time = $("#timeContainer_" + this.id);
	var mecJson = this.mecJson;
	var date = mecJson.date,
		timer = mecJson.timer,
		type = mecJson.rightActionType,
		pastZero = !(type == 3);
	
	if (!date && !timer) return;

	if(timer) {
		$time.removeAttr("data-date").attr("data-timer", timer)
	}

	/*$htm[0].value = this.getHtm();*/
	/*此处拿时间差距*/

	var oriDate = (type == 1) ? new Date($time.data("date")) : new Date();
		$time.TimeCircles({
		time: {
			Days: {
				show: false,
				text: SystemEnv.getHtmlNoteName(5368),//天
				color: "#FC6"
			},
			Hours: {
				show: false,
				text: SystemEnv.getHtmlNoteName(4823),//时
				color: "#9CF"
			},
			Minutes: {
				show: false,
				text: SystemEnv.getHtmlNoteName(4820),//分
				color: "#BFB"
			},
			Seconds: {
				show: false,
				text: SystemEnv.getHtmlNoteName(4135),//秒
				color: "#F99"
			}
		},
		refresh_interval: 0.1,
		count_past_zero: ((new Date()).getTime() - oriDate.getTime())/1000 >= 0 ? false : pastZero,
		circle_bg_color: "#ddd",
		fg_width: 0.03,
		bg_width: 0.2
	}).addListener(function (unit, value, total) {
		var diff = ((new Date()).getTime() - oriDate.getTime())/1000;
		if ((total <= 1 && Math.abs(diff) <= 1) || diff > 1) {
			if (diff <= 1) {
				setTimeout(function () {
					$time.TimeCircles().stop();
				}, 1000);
			}
		}
	});
};

/*构建属性编辑窗体完成后调用此方法,主要用于一些必须要使用js对页面进行后置操作时,无需要此方法可至空。 不必需的方法,有此方法系统自动调用*/
MEC_NS.Countdown.prototype.afterAttrDlgBuild = function(){
	var theId = this.id;
	var rightActionTypeV = this.mecJson["rightActionType"];
	var $rightActionType = $("input[type='checkbox'][name='rightActionType_"+theId+"'][value='"+rightActionTypeV+"']");
	var mecHandler = MECHandlerPool.getHandler(theId);

	if($rightActionType.length > 0){
		$rightActionType.checked();
	}
	
	var countdowndate = this.mecJson["countdowndate1"];	//截止日期
	var countdown = $("#countdowndate_"+theId);

	countdown.datePicker({
		minDate: new Date(),
		toggleSelected : false,
		startDate: countdowndate && new Date(countdowndate),
		onSelect: function (formattedDate, date, inst){
			var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			var time = formattedDate.split(" ")[0] + " " + hours + ":" + minutes + ":" + "00";
			$("#countdowndate_" + theId).val(time);

			setTimeout(function(){
				mecHandler.autobind && mecHandler.autobind.update();
			},100);
		},
		onHide : function(){
			var time = new Date($("#countdowndate_" + theId).val());
			$("input[name='hours']").val( time.getHours() );
			$("input[name='minutes']").val( time.getMinutes() );
		}
	});
	
	$("#parameter_" + theId).val(this.mecJson["parameter"]);
	
	$("#MADCD_"+theId).checkbox({
		onClick: function () { 
			mecHandler.autobind && mecHandler.autobind.update();
		}
	});
};

/*获取JSON*/
MEC_NS.Countdown.prototype.getMecJson = function(){
	var theId = this.id;
	
	this.mecJson["id"] = theId;
	this.mecJson["mectype"] = this.type;
	
	var $attrContainer = $("#MADCD_"+theId);
	if($attrContainer.length > 0){
		
		var rightActionType = $("input[type='checkbox'][name='rightActionType_"+theId+"']:checked").val();
		this.mecJson["rightActionType"] = rightActionType;
		
		var countdowndate;
		var parameter;
		
		if(rightActionType==1) {
			countdowndate = $("#countdowndate_"+theId).val();	//截止日期
			this.mecJson["countdowndate1"] = countdowndate;
		}else if(rightActionType==3) {
			parameter = $("#parameter_"+theId).val();
			this.mecJson["parameter"] = parameter;
		}
		
		
	}
	return this.mecJson;
};

MEC_NS.Countdown.prototype.getDefaultMecJson = function(){
	var now = new Date();

	now.setDate(now.getDate() + 1);
	now.setHours(now.getHours() - now.getTimezoneOffset() / 60);
	
	return {
		id: this.id,
		mectype: this.type,
		rightActionType: 1,
		countdowndate1: now.toJSON().replace("T", " ").replace(/\..*/, ""),
		parameter: ""
	};
};

function MADCD_ChangeRAT(cbObj, mec_id){
	setTimeout(function(){	//checkbox用了插件,不延时checkbox的checked状态获取不准确
		var objV = cbObj.value;
		
		$("#MADCD_"+mec_id+" .rightActionContent").hide();
		$("#rightActionContent_" + mec_id + "_" + objV).show();
	},100);
}