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

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

	if(typeof fieldPicker == 'undefined') {
		fieldPicker = require('utils').use('fieldPicker');
	}
}

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

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

/*获取构建属性编辑窗体的html，添加和单击控件后会调用此方法，由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.FAPIBrowser.prototype.getAttrDlgHtml = function(){
	var theId = this.id;
	
	var htm = '<div id="MADFAPIBro_'+theId+'" style="padding-bottom: 10px;">';
	htm+='<div class="title">'+SystemEnv.getHtmlNoteName(4650)+'</div>';
    
	htm+='<div class="form-group">';
	    htm+='<div class="row">';
		    htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4607)+'</span>';  //所属表单：
		    htm+='<div class="col-m-8"><select class="form-control" data-autobind id="formid_'+theId+'">'+Mec_GetFormOptionHtml()+'</select></div>';
	    htm+='</div>';
	    
	    htm+='<div class="row">';
		    htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4513)+'</span>';  //对应字段：
		    htm+='<div class="col-m-8 required"><select class="form-control requireded" data-autobind onchange="Mec_SetFieldDefaultLabelName(\''+theId+'\')" id="fieldname_'+theId+'"></select></div>';
	    htm+='</div>';
	    
	    htm+='<div class="row">';
		    htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4514)+'</span>';  //显示名称：
		    htm+='<div class="col-m-8"><input class="form-control" onchange="$(this).attr(\'user-entered\',true);" data-autobind="fieldlabel" id="fieldlabel_'+theId+'" type="text" '+MLanguage.ATTR+'/></div>';
	    htm+='</div>';
	    
	    htm+='<div class="row">'
			htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4515)+'</span>'  //提示信息：
			htm+='<div class="col-m-8"><input class="form-control" data-autobind=\'fieldremind\' id="fieldremind_'+theId+'" type="text" '+MLanguage.ATTR+'/></div>'
		htm+='</div>'
	    
	    htm+='<div class="row">';
			htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4531)+'</span>';  //显示类型：
			htm+='<div class="col-m-8"><select class="form-control" data-autobind id="showType_'+theId+'">';
				htm+='<option value="1">'+SystemEnv.getHtmlNoteName(4532)+'</option>';  //可编辑
				htm+='<option value="2">'+SystemEnv.getHtmlNoteName(4533)+'</option>';  //只读
				htm+='<option value="3">'+SystemEnv.getHtmlNoteName(4534)+'</option>';  //必填
			htm+='</select></div>';
		htm+='</div>';
		
	    htm+='<div class="row">';
		    htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4535)+'</span>';  //默认值：
		    htm+='<div class="col-8 pd-7"><span class="edit-before" id="editBtn_'+theId+'"></span>';
		    htm+='<span id="paramValue_'+theId+'"></span></div>';
		    htm+'</div>';
	    htm+='</div>';
	    
		htm+="<div class=\"row\">";
		htm+="<span class=\"col-2 span-control\">"+SystemEnv.getHtmlNoteName(5476)+"</span>";  //内容换行：
		htm+="<div class=\"col-2 pd-4\"><input type=\"checkbox\" id=\"needWrap_"+theId+"\"/></div>";
		htm+="</div>";
    htm+='</div>';
    
    htm+= '<div class="title">';
        htm+= SystemEnv.getHtmlNoteName(5314);  //接口相关设置
    htm+= '</div>';
    
    htm+='<div class="form-group">';
        htm+='<div class="row">';
            htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5315)+'</span>';  //接口页面：
            htm+='<div class="col-m-8"><select notBeauty="true" class="form-control" id="listPage_'+theId+'">';
            htm+='</select></div>';
        htm+='</div>';
        
        htm+='<div class="row">';
            htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5316)+'</span>';  //对应插件：
            htm+='<div class="col-m-8"><select class="form-control" id="sourceMEC_'+theId+'"></select></div>';
        htm+='</div>';
        
        htm+='<div class="row">';
            htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5317)+'</span>';  //主键字段：
            htm+='<div class="col-m-8"><select class="form-control" id="sourceMainKey_'+theId+'"></select></div>';
        htm+='</div>';
        
        htm+='<div class="row">';
            htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5318)+'</span>';  //名称字段：
            htm+='<div class="col-m-8"><select class="form-control" id="sourceShowKey_'+theId+'"></select></div>';
        htm+='</div>';
    htm+= '</div>';
    
    htm+= '<div class="title">';
		htm+= SystemEnv.getHtmlNoteName(5319);  //显示数据存取
	htm+= '</div>';
	
	htm+='<div class="form-group">';
		htm+='<div class="row" style="display:none;">';
		    htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5320)+'</span>';  //存取方式：
		    htm+='<div class="col-m-8"><select class="form-control" id="showFieldType_'+theId+'">';
			    htm+='<option value="1">'+SystemEnv.getHtmlNoteName(5321)+'</option>';  //从数据库字段存取
				htm+='<option value="2">'+SystemEnv.getHtmlNoteName(5322)+'</option>';  //从接口获取
		    htm+='</select></div>';
	    htm+='</div>';
		
		htm+='<div class="showFieldContent" id="showFieldContent_'+theId+'_1" style="display:none;">';
			htm+='<div class="row">';
			    htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5323)+'</span>';  //选择字段：
			    htm+='<div class="col-m-8"><select class="form-control" id="dbShowFieldName_'+theId+'"></select></div>';
		    htm+='</div>';
		htm+='</div>';
		
		htm+='<div class="showFieldContent" id="showFieldContent_'+theId+'_2" style="display:none;">';
			htm+= '<div class="row" style="position: relative;">';
				htm+= '<span class="col-2 span-control">'+ SystemEnv.getHtmlNoteName(5239) + '</span>';  //接口配置：
				htm+= '<div class="api-browser col edit-before pd-72" style="width: 20px;text-align:left;"></div>';
				htm+= '<div class="col ml-5 pd-7 link" id="apiName_'+theId+'"></div>';
			htm+= '</div>';
			
			htm+='<div class="row">';
			    htm+='<span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5323)+'</span>';  //选择字段：
			    htm+='<div class="col-m-8"><select class="form-control" id="apiShowFieldName_'+theId+'"></select></div>';
		    htm+='</div>';
		htm+='</div>';
	htm+='</div>';
	
	htm+='<div class="bottom">';
		htm+='<div class="save-btn">'+SystemEnv.getHtmlNoteName(3451)+'</div>';  //确定
	htm+='</div>';
	htm += '<div class="MAD_Alert">'+SystemEnv.getHtmlNoteName(4115)+'</div>';  //已生成到布局
	return htm;
};

/*构建属性编辑窗体完成后调用此方法，主要用于一些必须要使用js对页面进行后置操作时，无需要此方法可至空。 不必需的方法，有此方法系统自动调用*/
MEC_NS.FAPIBrowser.prototype.afterAttrDlgBuild = function(){
	var theId = this.id;
	var formid = this.mecJson["formid"];
	var fieldname = this.mecJson["fieldname"];
	var fieldlabel = this.mecJson["fieldlabel"];
	var fieldremind = this.mecJson["fieldremind"];// 提示信息
	var required = this.mecJson["required"];// 是否必填
	var defaultvalue = this.mecJson["defaultvalue"];
	
	$("#formid_"+theId).val(formid);
	
	MLanguage.setValue($("#fieldlabel_"+theId), fieldlabel);
	MLanguage.setValue($("#fieldremind_"+theId), fieldremind);
	
	$("#defaultvalue_"+theId).val(defaultvalue);
	var readonly = this.mecJson["readonly"];
	
	var showFieldTypeV = this.mecJson["showFieldType"];
	$("#showFieldType_"+theId).val(showFieldTypeV);
	//this.onShowFieldTypeChange(showFieldTypeV);
	this.onShowFieldTypeChange(2);
	
	var apiConfig = this.mecJson.apiConfig;
	var apiId = apiConfig.api.id || "";
	var apiName = apiConfig.api.name || "";
	$("#apiName_"+theId).data("last", apiId).text(apiName);
	
	var dbShowFieldName = this.mecJson["dbShowFieldName"];
	this.onFormChange(fieldname, dbShowFieldName);
	
	var apiShowFieldName = this.mecJson["apiShowFieldName"];
	this.getFieldOptionHtmlWithApi(apiId, apiShowFieldName, true, "", "apiShowFieldName_"+theId);
	
	var sourcePageId = this.mecJson["sourcePageId"];
	var sourceMecId = this.mecJson["sourceMecId"];
	var sourceMainKey = this.mecJson["sourceMainKey"];
	var sourceShowKey = this.mecJson["sourceShowKey"];
	
	this.getListPageOptionHtml(sourcePageId, sourceMecId, sourceMainKey, sourceShowKey);
	
	if(required == "1"){
		$("#showType_"+theId).val("3");
	}else if(readonly == "1"){
		$("#showType_"+theId).val("2");
	}else{
		$("#showType_"+theId).val("1");
	}
	
	var needWrap = Mec_FiexdUndefinedVal(this.mecJson["needWrap"], 0);
	if(needWrap == "1"){
		$("#needWrap_"+theId).checked();
	}
	
	var inParams = this.mecJson["inParams"];
	var $container = $("#MADFAPIBro_" + theId);
	for(var i = 0; inParams && i < inParams.length; i++){
		$("#paramValue_"+theId).text(inParams[i]["paramValue"]);
		break;
	}

	var mecHandler = MECHandlerPool.getHandler(theId);
	$("#MADFAPIBro_"+theId).checkbox({
		onClick: function () {
			mecHandler.autobind.update();
		}
	});
	$('#formid_' + theId, $container).on("select2:opening.formbefore", function () {
		var $this = $(this);
		var value = $this.val();
		$(this).html(Mec_GetFormOptionHtml()).val(value);
	});
	//dom事件绑定
	this.bindAttrDlgHtmlEvent();
};

//表单类控件更新所属表单相关信息的函数，当表单delete或change时触发
MEC_NS.FAPIBrowser.prototype.updateFormWithInfo = function (eventType) {
	var theId = this.id;

	if (eventType === 'delete') {
		$('#formid_' + theId).empty();
		$('#fieldname_' + theId).empty();
	} else {
		this.onFormChange();
	}
}

MEC_NS.FAPIBrowser.prototype.updateMecJsonByForm = function () {
	this.mecJson['fieldname'] = '';
}

/*获取JSON*/
MEC_NS.FAPIBrowser.prototype.getMecJson = function(){
	var theId = this.id;
	
	this.mecJson["id"] = theId;
	this.mecJson["mectype"] = this.type;
	
	var $attrContainer = $("#MADFAPIBro_"+theId);
	if($attrContainer.length>0){
		var formid = $("#formid_"+theId).val()||'';
		var fieldname = $("#fieldname_"+theId).val()||'';
		var fieldlabel = MLanguage.getValue($("#fieldlabel_"+theId));
		var fieldremind = MLanguage.getValue($("#fieldremind_"+theId));
		var defaultvalue= $("#defaultvalue_"+theId).val();
		this.mecJson["formid"] = formid;
		this.mecJson["fieldname"] = fieldname;
		this.mecJson["fieldlabel"] = fieldlabel;
		this.mecJson["fieldremind"] = fieldremind;
		this.mecJson["defaultvalue"] = defaultvalue;
		
		var showType = $("#showType_"+theId).val();
		if(showType == "1"){
			this.mecJson["required"] = "0";
			this.mecJson["readonly"] = "0";
		}else if(showType == "2"){
			this.mecJson["required"] = "0";
			this.mecJson["readonly"] = "1";
		}else{
			this.mecJson["required"] = "1";
			this.mecJson["readonly"] = "0";
		}

		this.mecJson["needWrap"] = $("#needWrap_"+theId).is(':checked') ? "1" : "0";

        var inParams = this.mecJson["inParams"];
        var paramValue = $("#paramValue_" + theId).text();
        for(var i = 0; i < inParams.length; i++){
            inParams[i]["paramValue"] = paramValue;
            break;
        }
		
		//接口相关设置
		var sourcePageId = $("#listPage_"+theId).val()||'';
		this.mecJson["sourcePageId"] = sourcePageId;
		
		var sourceMecId = $("#sourceMEC_"+theId).val()||'';
        this.mecJson["sourceMecId"] = sourceMecId;
        
        var sourceMainKey = $("#sourceMainKey_"+theId).val()||'';
        this.mecJson["sourceMainKey"] = sourceMainKey;
        
        var sourceShowKey = $("#sourceShowKey_"+theId).val()||'';
        this.mecJson["sourceShowKey"] = sourceShowKey;
        
        //显示名称处理
        var showFieldType = $("#showFieldType_"+theId).val()||'';
        this.mecJson["showFieldType"] = showFieldType;
        
        var dbShowFieldName = $("#dbShowFieldName_"+theId).val()||'';
        this.mecJson["dbShowFieldName"] = dbShowFieldName;
        
        var apiShowFieldName = $("#apiShowFieldName_"+theId).val()||'';
        this.mecJson["apiShowFieldName"] = apiShowFieldName;
	}
	
	return this.mecJson;
};

MEC_NS.FAPIBrowser.prototype.getDefaultMecJson = function(){
	return {
		id: this.id,
		mectype: this.type,
		inParams: [{ paramValue: "" }],
		fieldlabel: SystemEnv.getHtmlNoteName(4141), // 名称,
		fieldremind: SystemEnv.getHtmlNoteName(3418), // 请选择
		showFieldType: "1",
		apiConfig: {
			api: {},
			params: {
				query: [],
				body: {}
			}
		}
	};
};

MEC_NS.FAPIBrowser.prototype.validate = function () {
	var fieldname = this.mecJson.fieldname;
	var isValid = !!fieldname;

	if (!isValid) {
		var mec_id = this.id;
		var $pluginAttr = $('#MAD_' + mec_id);

		$pluginAttr.find('#fieldname_' + mec_id).parents('.col-m-8').validate({
			value: fieldname,
			rules: [{
				msg: '"' + SystemEnv.getHtmlNoteName(4513).replace(/[\:\：]/g, '') + '" ' + SystemEnv.getHtmlNoteName(6041) //对应字段
			}],
		});
	}
	return isValid;
};

$.extend(MEC_NS.FAPIBrowser.prototype, {
	bindAttrDlgHtmlEvent: function(){
		var that = this, theId = this.id, 
		$attrContainer = $("#MADFAPIBro_"+theId),
		_u = require("utils");
		
		//表单切换
		$("#formid_"+theId).on("change", function(){
			that.onFormChange();
		});
		
		//切换页面
		$("#listPage_"+theId).on("change", function(){
		    var selectPageId = $(this).val();
		    that.getAPIMECListOptionHtml(selectPageId);
		});
		
		//切换插件
		$("#sourceMEC_"+theId).on("change", function(){
		    var $this = $(this), selectMecId = $this.val(), $selectOption = $("option[value='"+selectMecId+"']", $this);
            var selectedApiVal = $selectOption.data("api"), selectedDatasKey = $selectOption.data("key");
            
            that.getFieldOptionHtmlWithApi(selectedApiVal, "", false, selectedDatasKey, "sourceMainKey_"+theId);
            that.getFieldOptionHtmlWithApi(selectedApiVal, "", false, selectedDatasKey, "sourceShowKey_"+theId);
		});
		
		//显示字段类型切换
		$("#showFieldType_"+theId).on("change", function(){
			that.onShowFieldTypeChange($(this).val());
		});
		
		//选择接口事件绑定
		$(".api-browser, #apiName_" + theId, $attrContainer).click(function(){
			var apiConfig = that.mecJson.apiConfig;
			_u.openRcDialog("api-config", {
				title: SystemEnv.getHtmlNoteName(5239).replace(/[:：]/g, ""),//接口配置
				params: {
					id: apiConfig.api.id || "",
					config: apiConfig,
					height: 506
				}
			}, function(result) {
				that.mecJson.apiConfig = result;
				var selectApi = result.api || {};
				var selectApiId = selectApi.id,
					selectApiName = selectApi.name;
	        	var lastSourceValue = $("#apiName_" + theId).data("last");
	        	if(!selectApiId || selectApiId === lastSourceValue) return;
	        	$("#apiName_" + theId).data("last", selectApiId).text(selectApiName);
	        	that.getFieldOptionHtmlWithApi(selectApiId, "", true, "", "apiShowFieldName_"+theId);
	        });
		});
		
		//默认值编辑
		$("#editBtn_"+theId).on("click", function(){
			that.editOneInParamOnPage();
		});
		
		$(".save-btn", $attrContainer).click(function(){
			refreshMecDesign(theId);
		});
	},
	onFormChange: function(selectedField, selectedShowField){
		var theId = this.id, formid = $("#formid_" + theId).val();
		Mec_GetFieldOptionHtml(formid, "fieldname_" + theId, selectedField);
		Mec_GetFieldOptionHtml(formid, "dbShowFieldName_" + theId, selectedShowField);
	},
	onShowFieldTypeChange: function(showfieldType){
		var theId = this.id, $attrContainer = $("#MADFAPIBro_"+theId);
		$(".showFieldContent", $attrContainer).hide();
		$("#showFieldContent_"+theId+"_" + showfieldType).show();
	},
	editOneInParamOnPage: function(){
		var theId = this.id,
			inParams = this.mecJson.inParams;
		var paramValue = inParams[0].paramValue;
		require("utils").openRcDialog("param-edit", {
			title: SystemEnv.getHtmlNoteName(5325),//编辑参数
			width: 680,
			height: 340,
			params:{
				value: encodeURIComponent(paramValue)
			}
		}, function(result) {
			inParams[0].paramValue = result;
			$("#paramValue_"+theId).text(result);
		});
	},
	getListPageOptionHtml: function(defPageId, defMecId, defMainKey, defShowKey){
		var that = this, theId = this.id;
		require("utils").api("designer/component/fapibrowser", {
			action: "getAppPageListByMecType",
			data: {
				appid: appid,
				mectype: "APIList,NList"
			}
		}, function (result) {
			var data = result.data || [];
	    	var optionHtml = "";
	    	
			for(var i = 0; i < data.length; i++){
				var id = data[i]["id"];
				var name = data[i]["name"];
				optionHtml+= "<option value=\""+id+"\"";
				if(defPageId && id==defPageId){
					optionHtml+= " selected = \"selected\" ";
				}
				optionHtml+= ">"+name+"</option>";
			}
			$("#listPage_"+theId).html(optionHtml);
			if(data.length && !defPageId){
			    defPageId = data[0].id;
			} 
			that.getAPIMECListOptionHtml(defPageId, defMecId, defMainKey, defShowKey);
		});
	},
	getAPIMECListOptionHtml: function(pageid, defMecId, defMainKey, defShowKey){
	    var that = this, theId = this.id;
	    if(!pageid) return;
        require("utils").api("designer/component/fapibrowser", {
            action: "getPageAPIMECList",
            data: {
                pageid: pageid,
            },
        }, function (result) {
            var data = result.data || [];
            var optionHtml = "", selectedDatasKey = "", selectedApiVal;
            if(data.length){
                selectedDatasKey = data[0]["datasKey"];
                selectedApiVal = data[0]["apiId"];
            }
            for(var i = 0; i < data.length; i++){
                var id = data[i]["mecid"];
                var apiId = data[i]["apiId"];
                var key = data[i]["datasKey"];
                var name = data[i]["mecName"];
                optionHtml+= "<option data-api=\""+apiId+"\" data-key=\""+key+"\" value=\""+id+"\"";
                if(defMecId && id==defMecId){
                    selectedDatasKey = key;
                    selectedApiVal = apiId;
                    optionHtml+= " selected = \"selected\" ";
                }
                optionHtml+= ">"+name+"</option>";
            }
            var $sourceMec = $("#sourceMEC_"+theId);
            $sourceMec.html(optionHtml);
            that.getFieldOptionHtmlWithApi(selectedApiVal, defMainKey, false, selectedDatasKey, "sourceMainKey_"+theId);
            that.getFieldOptionHtmlWithApi(selectedApiVal, defShowKey, false, selectedDatasKey, "sourceShowKey_"+theId);
        });
	},
	getFieldOptionHtmlWithApi: function(apiId, defval, allowEmpty, filterKey, domid){
	    var that = this, theId = that.id;
		if(!apiId) return;
		require("utils").api("api", {
			action: "info",
			data: {
				id: apiId
			}
		}, function (result) {
			apiResult = result.data;
	    	var resultDefine = apiResult.resultDefine || [], data = [];
	    	if(filterKey){
	    	    resultDefine.forEach(function(ele) {
	                var pname = ele.name;
	                if(pname !== filterKey && pname.substring(filterKey.length).indexOf(".") === 0){
	                    data.push({
	                        name: pname.substring(filterKey.length+1),
	                        remark: ele.remark
	                    });
	                }
	            });
	    	}else{
	    	    data = resultDefine;
	    	}
	    	var optionHtml = "";
	    	allowEmpty && (optionHtml += "<option value=\"\">"+SystemEnv.getHtmlNoteName(5324)+"</option>");//无(完整显示接口返回内容)
	    	var lang = require('i18n/lang');
	    	for(var i = 0; i < data.length; i++){
				var field_name = data[i]["name"];
				var label_name = lang.parse(data[i]["remark"]);
				optionHtml+= "<option value=\""+field_name+"\"";
				if(defval && field_name.toLowerCase()==defval.toLowerCase()){
					optionHtml+= " selected = \"selected\" ";
				}
				optionHtml+= ">"+label_name+"</option>";
			}
			$("#"+domid).html(optionHtml);
		});
	}
});