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

MEC_NS.SearchBox = function(type, id, mecJson){
    this.type = type;
    if(!id){
        id = new UUID().toString();
    }
    this.id = id;
    if(!mecJson){
        mecJson = this.getDefaultMecJson();
    }
    
    this.dataModel.pageList.data = {};
    this.dataModel.mecList.data = {};
    this.dataModel.fieldList.data = {};
    
    this.mecJson = mecJson;
};

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

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

/*获取构建属性编辑窗体的html，添加和单击控件后会调用此方法，由此方法去构建属性编辑窗体。 必需的方法*/
MEC_NS.SearchBox.prototype.getAttrDlgHtml = function(){
    var theId = this.id, firstSqlItem = this.mecJson.sqlwhere[0], customCondition = this.mecJson.customCondition;
    
    var htm = '<div id="MAD'+theId+'" style="height: inherit;">';
        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(4867)+'</span>';  //搜索提示：
                htm += '<div class="col-m-8"><input type="text" data-autobind id="searchTips_'+theId+'" class="form-control" '+MLanguage.ATTR+'/></div>';
            htm += '</div>';
            
            htm += '<div class="row">'
                htm += '<div class="col-2 span-control">'+SystemEnv.getHtmlNoteName(6028)+'</div>'//扫码输入：
                htm += '<div class="col-m-8"><input type="checkbox" id="scanInput_'+theId+'"/></div>'
            htm += '</div>'
                
            htm += '<div class="row">'
                htm += '<div class="col-2 span-control">'+SystemEnv.getHtmlNoteName(6029)+'</div>'//历史搜索：
                htm += '<div class="col-m-8"><input type="checkbox" id="historyRecord_'+theId+'"/></div>'
            htm += '</div>'
            
        htm += '</div>';//end form-group
            
        htm += '<div class="title">'+SystemEnv.getHtmlNoteName(5247)+'</div>';//搜索设置
        htm += '<div class="form-group">';
            
            htm += '<div class="row">';
                htm += '<span class="col-2 span-control">'+ SystemEnv.getHtmlNoteName(6030) +'</span>';  //搜索动作：
                htm += '<div class="col-m-8">'
                    htm += '<select id="searchAction_' + theId + '" class="form-control search-action">';
                        htm += '<option value=""></option>';
                        htm += '<option value="1">' + SystemEnv.getHtmlNoteName(4417) + '</option>';  //刷新列表
                        htm += '<option value="2">' + SystemEnv.getHtmlNoteName(4419) + '</option>';  //刷新时间轴"
                        if(this.mecJson.searchAction == 3){//兼容历史数据
                            htm += '<option value="3">' + SystemEnv.getHtmlNoteName(6031) + '</option>';  //刷新接口列表
                        }
                        htm += '<option value="4">' + SystemEnv.getHtmlNoteName(3916) + '</option>';  //自定义
                    htm += '</select>';
                htm += '</div>';
            htm += '</div>';
            
            htm += '<div class="list-action-container" style="display:none;">';
                htm += '<div class="row">';
                    htm += '<span class="col-2 span-control">'+ SystemEnv.getHtmlNoteName(4263) +'</span>';  //选择页面：
                    htm += '<div class="col-m-8">';
                        htm += '<select class="form-control" id="choosePage_'+theId+'"></select>';
                    htm += '</div>';
                htm += '</div>';
                
                htm += '<div class="row">';
                    htm += '<span class="col-2 span-control">'+ SystemEnv.getHtmlNoteName(4420) +'</span>';  //选择列表：
                    htm += '<div class="col-m-8">';
                        htm += '<select class="form-control" id="chooseList_'+theId+'"></select>';
                    htm += '</div>';
                htm += '</div>';
                
                htm += '<div class="sqlwhere-search-condition">';
                    htm += '<div class="sql-condition-item">';
                        htm += '<div class="row">';
                            htm += '<span class="col-2 span-control">'+ SystemEnv.getHtmlNoteName(6032) +'</span>';  //条件过滤：
                            htm += '<div class="col-m-8">';
                                htm += '<div class="col-m-3">';
                                    htm += '<select class="form-control field-name"></select>';
                                htm += '</div>';
                                htm += '<div class="col-m-2" style="padding-left: 10px;">';
                                    htm += '<select class="form-control field-expr">';
                                        htm += '<option ' + (firstSqlItem.expr == '1' ? 'selected="selected" ' : '') +' value="1">LIKE</option>'; 
                                        htm += '<option ' + (firstSqlItem.expr == '2' ? 'selected="selected" ' : '') +' value="2">=</option>'; 
                                        htm += '<option ' + (firstSqlItem.expr == '3' ? 'selected="selected" ' : '') +' value="3">&lt;=</option>';
                                        htm += '<option ' + (firstSqlItem.expr == '4' ? 'selected="selected" ' : '') +' value="4">&gt;=</option>';
                                    htm += '</select>';
                                htm += '</div>';
                                htm += '<div class="col-m-3" style="padding-left: 10px;">';
                                    htm += '<input type="text" class="field-value form-control" value="'+firstSqlItem.value+'"/>';
                                htm += '</div>';
                            htm += '</div>';
                        htm += '</div>';
                    htm += '</div>';
                    htm += '<div class="row add-sql-condition-container">';
                        htm += '<span class="col-2 span-control"></span>';
                        htm += '<div class="col-m-8">';
                            htm += '<button class="add-sql-condition-btn form-control" value="add" >'+SystemEnv.getHtmlNoteName(3518)+'</button>';//添加
                        htm += '</div>';
                    htm += '</div>';
                htm += '</div>';//end list-search-condition
                
                htm += '<div class="custom-search-condition">';
                    htm += '<div class="row">';
                        htm += '<span class="col-2 span-control">'+ SystemEnv.getHtmlNoteName(6032) +'</span>';  //条件过滤：
                        htm += '<div class="col-m-8">';
                            htm += '<div class="col-m-3">';
                            htm += '<input type="text" class="field-name form-control" value="'+customCondition.key+'"/>';
                            htm += '</div>';
                            htm += '<div class="col-m-2" style="padding-left: 10px;text-align:center;">=</div>';
                            htm += '<div class="col-m-3" style="padding-left: 10px;">';
                                htm += '<input type="text" class="field-value form-control" value="'+customCondition.value+'"/>';
                            htm += '</div>';
                        htm += '</div>';
                    htm += '</div>';
                htm += '</div>';//end custom-search-condition
            htm += '</div>';//end list-search-action
            
            htm += '<div class="script-action-container" style="display:none;">';
                htm += '<div class="row">';
                    htm += '<span class="col-2 span-control">'+ SystemEnv.getHtmlNoteName(6033) +'</span>';  //执行脚本：
                    //htm += '<div class="col-m-8">';
                    htm += '<span class="click-control mg-2 inline">';
                        htm += '<input id="actionScript_'+theId+'" type="hidden" value=""/>';
                        htm += '<label class="mg-0 scriptTip" id="scriptTip_'+theId+'">'+ SystemEnv.getHtmlNoteName(6034) +'</label>';  //点击输入执行脚本
                    htm += '</span>';
                    //htm += '</div>';
                htm += '</div>';
            htm += '</div>';//end 
            
        htm += '</div>';//end form-group
        
        htm += '<div class="title">';
            htm += SystemEnv.getHtmlNoteName(4158);  //自定义按钮
            htm += '<div data-autobind class="add-before add-searchbox-btn">'+SystemEnv.getHtmlNoteName(3518)+'</div>';  //添加
        htm += '</div>';
        htm += '<div class="form-group">';
            htm += '<div class="btn-container">';
                htm += '<div class="tip-control btn-tip-control">'+SystemEnv.getHtmlNoteName(4159)+'</div>';  //单击右上角的添加按钮以添加内容
                htm += '<ul class="normal-list"></ul>';
            htm += '</div>';
        htm += '</div>';
    
    htm += '</div>';//end MADSearchBox
    
    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.SearchBox.prototype.afterAttrDlgBuild = function(){
    var that = this,
        theId = this.id,
        $attrContainer = this.$attrContainer = $("#MAD_"+theId),
        $btnContainer = this.$btnContainer = $(".btn-container", $attrContainer);
    this.bindAttrDlgHtmlEvent();
    
    MLanguage.setValue($("#searchTips_"+theId), this.mecJson["searchTips"]);
    
    var scanInput = this.mecJson["scanInput"];
    if(scanInput == "1"){
        $("#scanInput_"+theId).attr("checked","checked");
    }
    
    var historyRecord = this.mecJson["historyRecord"];
    if(historyRecord == "1"){
        $("#historyRecord_"+theId).attr("checked","checked");
    }
    
    var sqlwhere = this.mecJson["sqlwhere"];
    for(var i = 1; sqlwhere && i < sqlwhere.length; i++){
        this.addSqlwhereItemToPage(sqlwhere[i]);
    }
    
    var searchAction = this.mecJson["searchAction"];
    var choosePage = this.mecJson["choosePage"];
    var chooseList = this.mecJson["chooseList"];
    $("#searchAction_"+theId).val(searchAction);
    this.searchActionChange(searchAction, choosePage, chooseList);
    
    $("#actionScript_"+theId)[0].value = this.mecJson["actionScript"];
    
    var btns = this.mecJson["btns"];
    if(btns.length == 0){
        $(".btn-tip-control", $btnContainer).show();
    }else{
        for(var i = 0; btns && i < btns.length; i++){
            this.addBtnToPage(btns[i]);
        }
    }
    
    $("#MAD_"+theId).checkbox({
        onClick: function () {
            that.autoUpdate();
        }
    });
    
    $(".btn-container ul.normal-list", $attrContainer).sortable({
        revert: false,
        axis: "y",
        items: "li",
        handle: ".bemove",
        update: function(){
            that.autoUpdate();
        }
    });
};

/*获取JSON*/
MEC_NS.SearchBox.prototype.getMecJson = function(){
    var theId = this.id;
    
    this.mecJson["id"] = theId;
    this.mecJson["mectype"] = this.type;
    
    var $attrContainer = $("#MAD"+theId);
    if($attrContainer.length > 0){
        this.mecJson["searchTips"] = MLanguage.getValue($("#searchTips_"+theId));   // 搜索提示文字
        
        this.mecJson["scanInput"] = $("#scanInput_"+theId).is(':checked') ? "1" : "0";
        
        this.mecJson["historyRecord"] = $("#historyRecord_"+theId).is(':checked') ? "1" : "0";
        
        this.mecJson["searchAction"] = $("#searchAction_"+theId).val()||'';
        
        this.mecJson["choosePage"] = $("#choosePage_"+theId).val()||'';
        
        var $chooseList = $("#chooseList_"+theId),
            chooseList = $chooseList.val(),
            $option = $chooseList.find("option[value='"+chooseList+"']");
        var listMecType = $option.data("mectype"), listSourceType = $option.data("sourcetype");
        this.mecJson["chooseList"] = chooseList;
        this.mecJson["chooseListMecType"] = listMecType;
        this.mecJson["chooseListDataourceType"] = listSourceType;
        
        this.mecJson["actionScript"] = $("#actionScript_"+theId).val();   //执行脚本
        
        var sqlwhere = [];
        $(".sqlwhere-search-condition .sql-condition-item", $attrContainer).each(function(){
            var $that = $(this);
            sqlwhere.push({
                fieldname: $(".field-name", $that).val() || "",
                expr: $(".field-expr", $that).val() || "",
                join: $(".field-join", $that).val() || "",
                value: $(".field-value", $that).val() || ""
            })
        });
        this.mecJson["sqlwhere"] = sqlwhere;
        
        var $customSearchCondition = $(".custom-search-condition", $attrContainer);
        this.mecJson["customCondition"] = {
            key: $(".field-name", $customSearchCondition).val(),
            value: $(".field-value", $customSearchCondition).val()
        }
        
        var btns = [];
        $(".btn-container > ul > li", $attrContainer).each(function(){
            var $that = $(this), btnId = $that.attr("id").substring("li_".length);
            btns.push({
                id: btnId,
                btnType: $("select[name='btnType']", $that).val(),
                btnText: MLanguage.getValue($("input[name='btnText']", $that)),
                btnScript: $("input[name='btnScript']", $that).val(),
                picType: $("#picType_" + btnId, $that).val(),
                picPath: $("#picPath_" + btnId, $that).val(),
                btnAlign: $("select[name='btnAlign']", $that).val()
            });
        });
        this.mecJson["btns"] = btns;
    }
    return this.mecJson;
};

MEC_NS.SearchBox.prototype.getDefaultMecJson = function(){
    return {
        searchTips: '',
        scanInput: "1",
        historyRecord: "1",
        searchAction: "1",
        actionScript: "",
        btns: [],
        sqlwhere: [{
            fieldname: '',
            expr: '1',
            join: 'AND',
            value: '$KEY$'
        }],
        customCondition: {
            key: 'search_key',
            value: '$KEY$'
        }
    };
};

MEC_NS.SearchBox.prototype.getCopyMecJson = function(mecJson) {
	var mec = require("mec");

	mec.changeMecJsonUUid(mecJson.btns)
}

$.extend(MEC_NS.SearchBox.prototype, {
    autoUpdate: function(){
        var mecHandler = MECHandlerPool.getHandler(this.id);
        //避免导入插件到低版本时报错
        mecHandler && mecHandler.autobind && mecHandler.autobind.update();
    },
    bindAttrDlgHtmlEvent: function(){
        var that = this, theId = this.id, 
        $attrContainer = this.$attrContainer,
        $btnContainer = this.$btnContainer;
        
        //刷新动作change
        $("#searchAction_"+theId).on("change", function(){
            that.searchActionChange($(this).val());
            that.autoUpdate();
        });
        
        //选择页面change
        $("#choosePage_"+theId).on("change", function(){
            var searchAction = $("#searchAction_"+theId).val();
            that.getMecOptionHtml(searchAction, $(this).val())
        });
        
        //选择列表change
        $("#chooseList_"+theId).on("change", function(){
            var $this = $(this), chooseList = $this.val(), $option = $("option[value='"+chooseList+"']", $this);
            var searchid = $option.data("searchid"), sourceid = $option.data("sourceid"), sourceType = $option.data("sourcetype");
            that.chooseListChange(searchid, sourceid, sourceType);
        });
        
        var clickScriptTip = "";
        if(_userLanguage=="8"){
            clickScriptTip = "/*\n\tThe value of the search box can be obtained directly by the parameter name searchKey, such as:" +
                    "\n\tMobile_NS.msg(searchKey);\n*/\n";
        }else if(_userLanguage=="9"){
            clickScriptTip = "/*\n\t可直接通過參數名searchKey獲取蒐索框的值，如：" +
                    "\n\tMobile_NS.msg(searchKey);\n*/\n" ;
        }else{
            clickScriptTip = "/*\n\t可直接通过参数名searchKey获取搜索框的值，如：" +
                    "\n\tMobile_NS.msg(searchKey);\n*/\n";
        }
        
        //执行脚本绑定事件
        var $clickControl = $(".script-action-container .click-control", $attrContainer);
        $clickControl.click(function(){
            var $this = $(this);
            var $btnScript = $("#actionScript_" + theId);
            var fieldV = $.trim($btnScript.val());
            if(fieldV == ""){
                fieldV = clickScriptTip;
                $btnScript.val(fieldV);
            }
            SL_AddScriptToField($btnScript);
        });
        SL_ChangeStyle($clickControl, this.mecJson.actionScript);
        
        $(".add-sql-condition-btn", $attrContainer).on("click", function(){
            var $chooseList = $("#chooseList_" + theId), 
                chooseMec = $chooseList.val(), 
                $option = $("option[value='"+chooseMec+"']", $chooseList),
                searchid = $option.data("searchid"),
                sourceid = $option.data("sourceid");
            
            that.dataModel.fieldList.get(searchid, sourceid).then(function(data){
                that.addSqlwhereItemToPage({
                    fieldname: '',
                    expr: '1',
                    join: 'AND',
                    value: '$KEY$'
                }, data);
            });
        });
        
        $(".sqlwhere-search-condition", $attrContainer).on("click", ".delFlag", function(){
            $(this).closest(".sql-condition-item").remove();
        });
        
        //自定义按钮添加事件绑定
        $(".add-searchbox-btn", $attrContainer).click(function(){
            that.addBtnToPage({
                id: new UUID().toString(),
                btnType: "1",
                btnText: "",
                btnScript: "",
                btnAlign: "1",
                picType: "0",
                picPath: ""
            });
        });
        
        //自定义按钮删除事件绑定
        $(".normal-list", $btnContainer).on("click", ".delFlag", function(e){
            var liId = $(this).closest("li").attr("id");
            
            $("#" + liId).remove();
            
            if($btnContainer.find("ul.normal-list>li").length == 0){
                $(".tip-control", $btnContainer).show();
            }
            that.autoUpdate();
        });
        
        //自定义按钮类型change
        $btnContainer.on("change", "select[name='btnType']", function(){
            that.btnTypeChange($(this).closest("li").attr("id").replace("li_", ""));
            that.autoUpdate();
        });
        
        //自定义按钮设置图片
        $btnContainer.on("click", ".img-td>div", function(e){
            var itemId = $(this).closest("li").attr("id").replace("li_", "");
            
            var pic_typeV = $("#picType_"+itemId).val() || "0";
            var pic_pathV = $("#picPath_"+itemId).val();
            var params = "pic_type=" + pic_typeV + "&pic_path=" + encodeURIComponent(pic_pathV);
            
            showPicsetModal(params, function(result){
                var picType = result["pic_type"];
                var picPath = result["pic_path"];
                $("#picType_"+itemId).val(picType);
                $("#picPath_"+itemId).val(picPath);
                
                that.setBtnPicPath(itemId, picPath);
                that.autoUpdate();
            });
            e.stopPropagation();
        });
    },
    dataModel: {
        pageList: {
            data: {},
            get: function(actionType){
                var that = this;
                if(that.data[actionType]) return $.Deferred().resolve(that.data[actionType]);
                return require("utils").api("designer/component/searchbox", {
                    action: "getAppPageList",
                    data: {
                        appid: appid,
                        action: actionType
                    }
                }).then(function (result) {
                    var data = result.data;
                    that.data[actionType] = data;
                    return data;
                });
            }
        },
        mecList: {
            data: {},
            get: function(pageid, actionType){
                var that = this;
                if(!that.data[actionType]) that.data[actionType] = {};
                if(that.data[actionType][pageid]) return $.Deferred().resolve(that.data[actionType][pageid]);
                return require("utils").api("designer/component/searchbox", {
                    action: "getPageMECList",
                    data: {
                        pageid: pageid,
                        action: actionType
                    }
                }).then(function (result) {
                    var data = result.data;
                    that.data[actionType][pageid] = data;
                    return data;
                });
            }
        },
        fieldList: {
            data : {},
            get: function(searchid, sourceid){
                var deferred = $.Deferred();
                if(!searchid && !sourceid){
                    deferred.resolve([]);
                }
                var that = this, dkey = searchid ? "search_" + searchid : "source_" + sourceid;
                if(that.data[dkey]) return $.Deferred().resolve(that.data[dkey]);
                if(searchid){
                    require("utils").api("designer/plugin", {
                        action: "getSourceFields",
                        notification: false,
                        type: 'POST',
                        data: {
                            source: 1,
                            searchid: searchid
                        }
                    }, function (result) {
                        var data = result.data;
                        that.data[dkey] = data;
                        deferred.resolve(data);
                    });
                }
                if(sourceid){
                    require("utils").api({
                        notification: false,
                        url: jionActionUrl("com.weaver.formmodel.mobile.ui.servlet.MobileAppUIAction", "action=getUIField&id=" + sourceid)
                    }).then(function (data) {
                        that.data[dkey] = data;
                        deferred.resolve(data);
                    });
                }
                return deferred;
            }
        }
    },
    searchActionChange: function(action, defPageId, defMecId){
        var $scriptActionContainer = $(".script-action-container", this.$attrContainer),
            $listActionContainer = $(".list-action-container", this.$attrContainer);
        if(action == "4"){
            $scriptActionContainer.show();
            $listActionContainer.hide();
        }else if(action == "1" || action == "2" || action == "3"){
            $scriptActionContainer.hide();
            $listActionContainer.show();
            this.getPageOptionHtml(action, defPageId, defMecId);
        }
    },
    getPageOptionHtml: function(actionType, defPageId, defMecId){
        var that = this, theId = this.id;
        that.dataModel.pageList.get(actionType).then(function(data){
            var optionHtml = "";
            var idIsInData = false;
            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\" ";
                    idIsInData = true;
                }
                optionHtml+= ">"+name+"</option>";
            }
            $("#choosePage_"+theId).html(optionHtml);

            if(data.length && !idIsInData){
                defPageId = data[0].id;
            }
            that.getMecOptionHtml(actionType, defPageId, defMecId);
        });
    },
    getMecOptionHtml: function(actionType, defPageId, defMecId){
        var that = this, theId = this.id;
        that.dataModel.mecList.get(defPageId, actionType).then(function(data){
            var optionHtml = "",
                defSearchid = "",
                defSourceid = "",
                defSourceType = 1;
            
            if(data && data.length){
                var defData = data[0];
                defSearchid = defData.searchid;
                defSourceid = defData.sourceid;
                defSourceType = defData.sourceType;
                
                for(var i = 0; i < data.length; i++){
                    var dataItem = data[i],
                        id = dataItem.mecid,
                        name = dataItem.mecName ? dataItem.mecName : id,
                        sourceType = dataItem.sourceType,
                        searchid = dataItem.searchid
                        sourceid = dataItem.sourceid;
                    
                    optionHtml+= "<option data-mectype=\""+dataItem.mecType+"\" data-sourcetype=\""+sourceType+"\" data-sourceid=\""+sourceid+"\" data-searchid=\""+searchid+"\" value=\""+id+"\"";
                    if(defMecId && id == defMecId){
                        optionHtml+= " selected = \"selected\" ";
                        defSourceid = sourceid;
                        defSearchid = searchid;
                        defSourceType = sourceType;
                    }
                    optionHtml+= ">"+name+"</option>";
                }
            }
            $("#chooseList_"+theId).html(optionHtml);
            that.chooseListChange(defSearchid, defSourceid, defSourceType);
        });
    },
    chooseListUIChange: function(sqlCondition){
        var $listActionContainer = $(".list-action-container", this.$attrContainer),
            $sqlwhereConditionContainer = $(".sqlwhere-search-condition", $listActionContainer),
            $customConditionContainer = $(".custom-search-condition", $listActionContainer);
        
        if(sqlCondition){
            $sqlwhereConditionContainer.show();
            $customConditionContainer.hide();
        }else{
            $sqlwhereConditionContainer.hide();
            $customConditionContainer.show();
        }
    },
    chooseListChange: function(defSearchid, defSourceid, sourceType){//sourceType 1建模查询 2模拟数据 3sql 4url 5api
        var that = this;
        that.chooseListUIChange(sourceType == 1 || defSourceid);
        that.dataModel.fieldList.get(defSearchid, defSourceid).then(function(data){
            $(".sqlwhere-search-condition .sql-condition-item", that.$attrContainer).each(function(index){
                var $this = $(this), configItem = that.mecJson.sqlwhere[index];
                if(configItem) defField = configItem.fieldname;
                that.initFieldHtml($this.find(".field-name"), data, defField);
            });
        });
    },
    addSqlwhereItemToPage: function(config, fieldList){
        var $conditionHtml = $('<div class="sql-condition-item"></div>'), htm = '';
        htm += '<div class="row">';
            htm += '<span class="col-2 span-control"></span>';
            htm += '<div class="col-m-8">';
                htm += '<div class="col-m-3" style="width:115px;">';
                    htm += '<select class="form-control field-join">';
                        htm += '<option ' + (config.join == 'AND' ? 'selected="selected" ' : '') +' value="AND">AND</option>'; 
                        htm += '<option ' + (config.join == 'OR' ? 'selected="selected" ' : '') +' value="OR">OR</option>';
                    htm +='</select>';
                htm += '</div>';
            htm += '</div>';
        htm += '</div>';
        htm += '<div class="row">';
            htm += '<span class="col-2 span-control"></span>';
            htm += '<div class="col-m-8">';
                htm += '<div class="col-m-3">';
                    htm += '<select class="form-control field-name"></select>';
                htm += '</div>';
                htm += '<div class="col-m-2" style="padding-left: 10px;">';
                    htm += '<select class="form-control field-expr">';
                        htm += '<option ' + (config.expr == '1' ? 'selected="selected" ' : '') +' value="1">LIKE</option>'; 
                        htm += '<option ' + (config.expr == '2' ? 'selected="selected" ' : '') +' value="2">=</option>';
                        htm += '<option ' + (config.expr == '3' ? 'selected="selected" ' : '') +' value="3">&lt;=</option>';
                        htm += '<option ' + (config.expr == '4' ? 'selected="selected" ' : '') +' value="4">&gt;=</option>';
                    htm += '</select>';
                htm += '</div>';
                htm += '<div class="col-m-3" style="padding-left: 10px;">';
                    htm += '<input type="text" class="field-value form-control" value="'+config.value+'"/>';
                htm += '</div>';
            htm += '</div>';
        htm += '</div>';
        htm += '<div class="del-after delFlag"></div>';
        $conditionHtml.html(htm);
        
        this.initFieldHtml($conditionHtml.find(".field-name"), fieldList, config.fieldname);
        $conditionHtml.find('select').niceSelect();
        $(".add-sql-condition-container", this.$attrContainer).before($conditionHtml);
    },
    initFieldHtml: function($fieldObj, fieldList, defField){
        var fieldOptionHtml = '';
        if(fieldList && fieldList.length){
            for(var i = 0; i < fieldList.length; i++){
                var fieldObj = fieldList[i], fieldValue = (fieldObj.detailtable ? "d1." : "t1.")+fieldObj.fieldName, htmlType = fieldObj.htmlType, type = fieldObj.fieldtype;
                if(htmlType == 1 || htmlType == 2 || (htmlType == 3 && (type == 2 || type == 19 || type == 290))){
                    fieldOptionHtml += "<option value=\""+fieldValue+"\"";
                    if(defField && defField.toLowerCase() == fieldValue.toLowerCase()){
                        fieldOptionHtml+= " selected=\"selected\" ";
                    }
                    if(fieldObj.encrypted){
                        fieldOptionHtml+= " disabled";
                    }
                    fieldOptionHtml += ">" + fieldObj.fieldDesc +(fieldObj.detailtable ? "-"+SystemEnv.getHtmlNoteName(4865) : "") + (fieldObj.encrypted ? "(" + SystemEnv.getHtmlNoteName(6233) + ")" : "") + "</option>";//4865-明细字段 6233-不能选择加密字段
                }
            }
        }
        $fieldObj.html(fieldOptionHtml);
    },
    addBtnToPage: function(result){
        var resultId = result["id"];
        var $ul = $("ul.normal-list", this.$btnContainer);
        var $li = $("<li id=\"li_"+resultId+"\"></li>");
        var htm = "<table>";
            htm += "<tbody>";
                htm += "<tr>";
                    htm += "<td class=\"bemove\" width=\"20px\"></td>";
                    htm += "<td width=\"65px\">";
                        htm += "<select name=\"btnType\" style=\"padding-left: 10px;\">";
                            htm += "<option value=\"1\">"+SystemEnv.getHtmlNoteName(4373)+"</option>";  //文字
                            htm += "<option value=\"2\">"+SystemEnv.getHtmlNoteName(4167)+"</option>";  //图片
                            htm += "<option value=\"3\">"+SystemEnv.getHtmlNoteName(6035)+"</option>";  //图文
                        htm += "</select>";
                    htm += "</td>";
                    
                    htm += "<td width=\"*\" class=\"img-td\" id=\"imgTD_"+resultId+"\" style=\"display: none;\">";
                        htm += "<div style=\"width:25px;\"><img class=\"icon\" id=\"pic_img_"+resultId+"\" src=\"/mobilemode/images/mec/add-img-btn_wev8.png\"></div>";
                        htm += "<input type=\"hidden\" id=\"picType_"+resultId+"\"/>";
                        htm += "<input type=\"hidden\" id=\"picPath_"+resultId+"\" iconwidth=\"\" iconheight=\"\"/>";
                    htm += "</td>";
                    
                    htm += "<td width=\"*\" valign=\"middle\" id=\"textTD_"+resultId+"\">";
                        htm += "<input name=\"btnText\" data-autobind type=\"text\" class=\"form-control\" placeholder=\""+SystemEnv.getHtmlNoteName(4177)+"\" "+MLanguage.ATTR+"/>";  //按钮名称
                    htm += "</td>";
                    
                    htm += "<td width=\"60px\">";
                        htm += "<select name=\"btnAlign\" data-autobind style=\"padding-left: 10px;\">";
                            htm += "<option value=\"1\">"+SystemEnv.getHtmlNoteName(4489)+"</option>";  //右
                            htm += "<option value=\"2\">"+SystemEnv.getHtmlNoteName(4488)+"</option>";  //左
                        htm += "</select>";
                    htm += "</td>";
                    
                    htm += "<td width=\"70px\">";
                        htm += "<div class=\"click-control\">";
                            htm += "<input name=\"btnScript\" type=\"hidden\"/>";
                            htm += SystemEnv.getHtmlNoteName(4178);  //单击事件
                        htm += "</div>";
                    htm += "</td>";
                    
                    htm += "<td width=\"24px\">";
                        htm += "<span class=\"del-after2 delFlag\"></span>";
                    htm += "</td>";
                    
                htm += "</tr>";
            htm += "</tbody>";
        htm += "</table>";
        $li.html(htm);
        $ul.append($li);

        MLanguage.setValue($("input[name='btnText']", $li), result["btnText"]);
        
        $("select[name='btnType']", $li).val(result["btnType"] || "1");
        $("#picType_" + resultId).val(result["picType"]);
        $("#picPath_" + resultId).val(result["picPath"]);
        $("select[name='btnAlign']", $li).val(result["btnAlign"] || "1");
        this.btnTypeChange(resultId);
        this.setBtnPicPath(resultId, result['picPath']);
        
        var btnScript = result["btnScript"];
        $("input[name='btnScript']", $li)[0].value = btnScript;
        var $clickControl = $(".click-control", $li);

        var clickScriptTip = "";
        if(_userLanguage=="8"){
            clickScriptTip = "/*\n\tThe search box instance can be obtained directly by the parameter name that." +
                "\n\tSuch as calling the instance's onSearch method to perform the search action:\n"+
                "\n\tthat.onSearch('xxx');\n*/\n";
        }else if(_userLanguage=="9"){
            clickScriptTip = "/*\n\t可直接通過參數名 that 獲取搜索框實例，如調用實例的onSearch方法執行搜索動作：" +
                "\n\tthat.onSearch('xxx');\n*/\n" ;
        }else{
            clickScriptTip = "/*\n\t可直接通过参数名 that 获取搜索框实例，如调用实例的onSearch方法执行搜索动作：" +
                "\n\tthat.onSearch('xxx');\n*/\n";
        }
        
        $clickControl.click(function(){
            var $this = $(this);
            var $btnScript = $("input[name='btnScript']", $this);
            var fieldV = $.trim($btnScript.val());
            if(fieldV == ""){
                fieldV = clickScriptTip;
                $btnScript.val(fieldV);
            }
            SL_AddScriptToField($btnScript);
        });
        
        SL_ChangeStyle($clickControl, btnScript);
        
        $li.find('select').niceSelect();
        $li.MLanguage();
        
        $(".btn-tip-control", this.$btnContainer).hide();
    },
    btnTypeChange: function(itemId){
        var $li = $("#li_" + itemId);
        var btnType = $("select[name='btnType']", $li).val();
        if(btnType == "1"){
            $("#textTD_"+itemId, $li).show();
            $("#imgTD_"+itemId, $li).hide();
        }else if(btnType == "2"){
            $("#textTD_"+itemId, $li).hide();
            $("#imgTD_"+itemId, $li).show();
        }else if(btnType == "3"){
            $("#textTD_"+itemId, $li).show();
            $("#imgTD_"+itemId, $li).show();
        }
    },
    setBtnPicPath: function(itemId, picPath){
        var $picImg = $("#pic_img_"+itemId);
        if(picPath && picPath != ""){
            if(picPath.indexOf("/mobilemode/piclibrary/qn_ffffff") === 0){
                $picImg.css({"background-color":"#eee", "border-radius":"3px"});
            }
            $picImg[0].src = picPath;
        }else{
            $picImg[0].src = "/mobilemode/images/mec/add-img-btn_wev8.png";
        }
    }
});