define('searchFieldpropPanel', ['components/common', 'scroll', 'utils', 'jquery'], function(common, Scroll, utils){
    var template = '\
    <div class="search-fieldprop-panel" id={{id}}>\
        <div class="panel-content">\
            <div class="panel-scroller">\
                <div class="commen-prop">\
                    <div class="row">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4745)/*字段类型*/+'：</span>\
                        <div class="col-m-8">\
                            <select class="form-control" name="field-type">\
                                <option value="1" labelid="4511">'+SystemEnv.getHtmlNoteName(4511)/*单行文本*/+'</option>\
                                <option value="2" labelid="4538">'+SystemEnv.getHtmlNoteName(4538)/*多行文本*/+'</option>\
                                <option value="3" labelid="4556">'+SystemEnv.getHtmlNoteName(4556)/*浏览按钮*/+'</option>\
                                <option value="4" labelid="4555">'+SystemEnv.getHtmlNoteName(4555)/*check框*/+'</option>\
                                <option value="5" labelid="4541">'+SystemEnv.getHtmlNoteName(4541)/*选择项*/+'</option>\
                                <option value="6" labelid="3776">'+SystemEnv.getHtmlNoteName(3776)/*附件*/+'</option>\
                                <option value="7" labelid="4578">'+SystemEnv.getHtmlNoteName(4578)/*拍照*/+'</option>\
                                <option value="8" labelid="4537">'+SystemEnv.getHtmlNoteName(4537)/*隐藏域*/+'</option>\
                                <option value="9" labelid="4518">'+SystemEnv.getHtmlNoteName(4518)/*日期时间*/+'</option>\
                            </select>\
                        </div>\
                    </div>\
                </div>\
                \
                <div class="field-type1-prop field-type-prop">\
                    <div class="row remind-row" style="display:none;">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4515)/*提示信息：*/+'</span>\
                        <div class="col-m-8"><input class="form-control" name="field-remind" type="text" '+MLanguage.ATTR+'/></div>\
                    </div>\
                    \
                    <div class="row">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4185)/*类型：*/+'</span>\
                        <div class="col-m-8">\
                            <select class="form-control" name="field-htmltype">\
                                <option value="1">'+SystemEnv.getHtmlNoteName(4517)/*文本*/+'</option>\
                                <option value="6">'+SystemEnv.getHtmlNoteName(4520)/*数字*/+'</option>\
                            </select>\
                        </div>\
                    </div>\
                    \
                </div>\
                \
                <div class="field-type3-prop field-type-prop">\
                    <div class="row">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4515)/*提示信息：*/+'</span>\
                        <div class="col-m-8"><input class="form-control" name="field-remind" type="text" '+MLanguage.ATTR+'/></div>\
                    </div>\
                    \
                    <div class="row">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4185)/*类型：*/+'</span>\
                        <div class="col-m-8">\
                            <select class="form-control" name="field-browsertype">\
                            </select>\
                        </div>\
                    </div>\
                    \
                    <div class="row field-browsername-container" style="display:none;">\
                        <span class="col-2 span-control"></span>\
                        <div class="col-m-8" style="position:relative;">\
                            <input type="hidden" name="field-browsername"/>\
                            <input class="form-control" name="field-browsertext" type="text" readonly="readonly"/>\
                            <span class="search-before choose-field-browsername"></span>\
                        </div>\
                    </div>\
                    \
                    <div class="row browser-field-container" style="display:none;">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(5336)/*字段展示：*/+'</span>\
                        <div class="col-m-8" style="position:relative;">\
                            <span class="click-control mg-2 active choose-browser-field">\
                                <label class="scriptTip mg-0">'+SystemEnv.getHtmlNoteName(5234)/*字段展示配置*/+'</label>\
                            </span>\
                        </div>\
                    </div>\
                </div>\
                \
                <div class="field-type5-prop field-type-prop">\
                    <div class="row">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4548)/*选择类型：*/+'</span>\
                        <div class="col-m-8">\
                            <select class="form-control" name="field-select-htmltype">\
                                <option value="1">'+SystemEnv.getHtmlNoteName(6181)/*下拉框*/+'</option>\
                                <option value="3">'+SystemEnv.getHtmlNoteName(6182)/*单选框*/+'</option>\
                                <option value="2">'+SystemEnv.getHtmlNoteName(6183)/*复选框*/+'</option>\
                            </select>\
                        </div>\
                    </div>\
                    <div class="row">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4542)/*选择来源：*/+'</span>\
                        <div class="col-m-8">\
                            <select class="form-control" name="field-select-sourcetype">\
                                <option value="1">'+SystemEnv.getHtmlNoteName(4543)/*手动添加*/+'</option>\
                                <option value="2">'+SystemEnv.getHtmlNoteName(4280)/*输入SQL*/+'</option>\
                            </select>\
                        </div>\
                    </div>\
                    <div class="field-select-sourcetype1-prop field-select-sourcetype-prop" style="display:none;">\
                        <div class="row" style="text-align: right;">\
                            <span class="add-before inline add-select-item" data-scroll="bottom">'+SystemEnv.getHtmlNoteName(3518)/*添加*/+'</span>\
                        </div>\
                        <table class="table select-items-table">\
                            <colgroup>\
                                <col width="5%"/>\
                                <col width="15%"/>\
                                <col width="35%"/>\
                                <col width="10%"/>\
                                <col width="30%"/>\
                                <col width="5%"/>\
                            </colgroup>\
                            <tbody></tbody>\
                        </table>\
                        <div class="tip-control select-items-tip-control" style="display:block;">'+SystemEnv.getHtmlNoteName(4159)/*单击右上角的添加按钮以添加内容*/+'</div>\
                    </div>\
                    <div class="field-select-sourcetype2-prop field-select-sourcetype-prop" style="display:none;">\
                        <div class="row">\
                            <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4201)/*数据源：*/+'</span>\
                            <div class="col-m-8">\
                                <select class="form-control" name="field-select-datasource">\
                                    <option value="">(local)</option>\
                                </select>\
                            </div>\
                        </div>\
                        <div class="row">\
                            <span class="col-2 span-control"></span>\
                            <div class="col-m-8">\
                                <textarea class="area-control" name="field-select-sql" placeholder="'+SystemEnv.getHtmlNoteName(4283)/*请在此处输入SQL...*/+'"></textarea>\
                                <a class="help-link select-sql-tip" href="javascript:void(0);">'+SystemEnv.getHtmlNoteName(4202)/*如何书写SQL？*/+'</a>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
                \
                <div class="field-type9-prop field-type-prop">\
                    <div class="row">\
                        <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4185)/*类型：*/+'</span>\
                        <div class="col-m-8">\
                            <select class="form-control" name="field-datetime-type">\
                                <option value="1">'+SystemEnv.getHtmlNoteName(3715)/*日期*/+'</option>\
                                <option value="2">'+SystemEnv.getHtmlNoteName(3706)/*时间*/+'</option>\
                                <option value="3">'+SystemEnv.getHtmlNoteName(4518)/*日期时间*/+'</option>\
                            </select>\
                        </div>\
                    </div>\
                    \
                    <div class="field-datetime-offset-prop">\
                        <div class="row">\
                            <span class="col-2 span-control">'+SystemEnv.getHtmlNoteName(4527)/*年份偏移：*/+'</span>\
                            <div class="col-m-8">\
                                <div class="col-6">\
                                    <input class="form-control" name="field-prev-offset" type="text" placeholder="'+SystemEnv.getHtmlNoteName(4608)/*向前偏移，100*/+'"/>\
                                </div>\
                                <div class="col text-center" style="padding:0 2px;">~</div>\
                                <div class="col-6">\
                                    <input class="form-control" name="field-next-offset" type="text" placeholder="'+SystemEnv.getHtmlNoteName(4609)/*向后偏移，1*/+'"/>\
                                </div>\
                            </div>\
                        </div>\
                        <div class="row">\
                            <span class="col-2 span-control"></span>\
                            <div class="col-m-8">\
                                <a class="help-link date-offset-tip" href="javascript:void(0);" style="margin:0;">'+SystemEnv.getHtmlNoteName(4530)/*设置说明*/+'</a>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
            </div>\
        </div>\
        <div class="panel-footer">\
            <div class="btn ok-btn">'+SystemEnv.getHtmlNoteName(3451)/*确定*/+'</div>\
            <div class="btn cancel-btn">'+SystemEnv.getHtmlNoteName(3516)/*取消*/+'</div>\
        </div>\
    </div>\
    ';
    var cssText = '\
        .search-fieldprop-panel{margin: 8px 0 0 0px;box-shadow:0 2px 5px 5px rgba(0,0,0,0.1);-webkit-background-clip: padding-box; background-clip: padding-box; background-color: #fff; border-radius: 6px; box-sizing: border-box; color: #333; line-height: 20px; position: fixed; text-align: left; top: -999px; left: -999px; white-space: normal; width: 376px; height:230px; z-index: 999; display: none; }\
        .search-fieldprop-panel.top{margin: -10px 0 0 0;}\
        .search-fieldprop-panel .panel-content{position:absolute;top:0;bottom:40px;overflow-x:hidden;overflow-y:auto;}\
        .search-fieldprop-panel .panel-content .panel-scroller{position:relative;box-sizing:border-box;padding: 10px 10px 5px;min-height:calc(100% + 1px);}\
        .search-fieldprop-panel .panel-content .field-type-prop{display:none;}\
        .search-fieldprop-panel .panel-content .field-type-prop .search-before{position:absolute;top:2px;right:2px;}\
        .search-fieldprop-panel .panel-footer{position: absolute;margin: 0;padding: 0;height: 40px;width: 100%;bottom: 0;left: 0;border-top: 1px solid #e8e8e8;box-shadow: 0 0 3px rgba(0,0,0,0.1);}\
        .search-fieldprop-panel .panel-footer .btn{position: absolute;padding:0;border:0;border-radius: 2px;box-sizing: border-box;color: #fff;cursor: pointer;display: block;font-size: 14px;height: 28px;line-height: 28px;text-align: center;width: 80px;zoom: 1;}\
        .search-fieldprop-panel .panel-footer .btn.ok-btn{background-color: #006fc1;right: 100px;bottom:6px;}\
        .search-fieldprop-panel .panel-footer .btn.cancel-btn{background-color: #999;right: 10px;bottom:6px;}\
        \
    ';
    
    common.importCssText('searchFieldpropPanel', cssText);
    
    var settings = {};
    
    var FP = function (options) {
        var t = this;

        t.id = options.id = 'fp_' + options.id;
        t.settings = $.extend({}, settings, options);
        t.el = null;
        t.target = null; // 源目标

        return t;
    };
    
    FP.pt = FP.prototype;

    FP.pt.getFieldData = function () {
        var fp = this, el = fp.el, 
            $fieldtype = el.find("select[name='field-type']"),
            fieldtype = $fieldtype.val(),
            $panel = el.find(".field-type"+fieldtype+"-prop");
        var result = {fieldtype: fieldtype, fieldlabel: $fieldtype.find("option:selected").attr("labelid")};
        switch(fieldtype){
        case "1":
            $.extend(result, {
                fieldremind: MLanguage.getValue($panel.find("input[name='field-remind']")),
                htmltype: $panel.find("select[name='field-htmltype']").val()
            });
            break;
        case "3":
            $.extend(result, {
                fieldremind: MLanguage.getValue($panel.find("input[name='field-remind']")),
                browsertype: $panel.find("select[name='field-browsertype']").val(),
                browsername: $panel.find("input[name='field-browsername']").val(),
                browsertext: $panel.find("input[name='field-browsertext']").val()
            });
            break;
        case "5":
            var items = [];
            $panel.find("table.select-items-table > tbody > tr").each(function(){
                var $tr = $(this);
                items.push({
                    selectname: MLanguage.getValue($tr.find("input[name='selectName']")),
                    selectvalue: $tr.find("input[name='selectValue']").val()
                });
            });
            $.extend(result, {
                htmltype: $panel.find("select[name='field-select-htmltype']").val(),
                sourcetype: $panel.find("select[name='field-select-sourcetype']").val(),
                items: items,
                datasource: $panel.find("select[name='field-select-datasource']").val(),
                sql: $panel.find("textarea[name='field-select-sql']").val()
            });
            break;
        case "9":
            $.extend(result, {
                htmltype: $panel.find("select[name='field-datetime-type']").val(),
                prevoffset: $panel.find("input[name='field-prev-offset']").val(),
                nextoffset: $panel.find("input[name='field-next-offset']").val()
            });
            break;
        }
        return result;
    };
    
    FP.pt.initFieldData = function () {
        var fp = this, el = fp.el, 
            $panel = el.find(".field-type"+fieldtype+"-prop"),
            fieldJson = $(fp.target).data("field");

        var promise = $.when(util.initBrowserType(fp), util.initDatasource(fp));
        var fieldtype = fieldJson.fieldtype || "1";
        el.find("select[name='field-type']").val(fieldtype);
        fp["initFieldData"+fieldtype](fieldJson, promise);
        return fp;
    };
    
    FP.pt.initFieldData1 = function(data){
        var fp = this, el = fp.el, $panel = el.find(".field-type1-prop");
        MLanguage.setValue($panel.find("input[name='field-remind']"), data.fieldremind);
        $panel.find("select[name='field-htmltype']").val(data.htmltype);
    };
    
    FP.pt.initFieldData3 = function(data, promise){
        !data.hasOwnProperty("fieldremind") && (data.fieldremind = SystemEnv.getHtmlNoteName(3418));//请选择
        var fp = this, el = fp.el, $panel = el.find(".field-type3-prop");
        MLanguage.setValue($panel.find("input[name='field-remind']"), data.fieldremind);
        promise.then(function(){
            $panel.find("select[name='field-browsertype']").val(data.browsertype).trigger("change");
            $panel.find("input[name='field-browsername']").val(data.browsername);
            $panel.find("input[name='field-browsertext']").val(data.browsertext);
            util.checkIsCubeBrowser(fp, data.browsername);
        });
    };
    
    FP.pt.initFieldData5 = function(data, promise){
        var fp = this, el = fp.el, $panel = el.find(".field-type5-prop");
        var fieldremind = data.fieldremind;
        
        $panel.find("select[name='field-select-htmltype']").val(data.htmltype || "2");
        $panel.find("select[name='field-select-sourcetype']").val(data.sourcetype);
        if(data.sourcetype == 1 && !data.items.length){
            el.find(".select-items-tip-control").show();
        }
        data.items.forEach(function(item){
            util.addSelectItemToPage(fp, item);
        });
        
        promise.then(function(){
            $panel.find("select[name='field-select-datasource']").val(data.datasource);
        });
        $panel.find("textarea[name='field-select-sql']").val(data.sql);
    };
    
    FP.pt.initFieldData9 = function(data){
        !data.hasOwnProperty("fieldremind") && (data.fieldremind = SystemEnv.getHtmlNoteName(3418));//请选择
        var fp = this, el = fp.el, $panel = el.find(".field-type9-prop");
        $panel.find("select[name='field-datetime-type']").val(data.htmltype);
        $panel.find("input[name='field-prev-offset']").val(data.prevoffset);
        $panel.find("input[name='field-next-offset']").val(data.nextoffset);
    };
    
    FP.pt.vessel = function () { // 创建容器
        var config = this.settings;
        return common.tempEngine(template, config);
    };

    FP.pt.render = function () {
        var fp = this, tmp = fp.vessel();
        fp.el = $(tmp);
        $('body').append(fp.el);
        new Scroll(fp.el.find(".panel-content"), true);
        return fp;
    };
    
    FP.pt.mounted = function(){
        var fp = this, opts = fp.settings;
        
        fp.el.find("select").niceSelect();

        opts.types && fp.el.find("select[name='field-type']>option").each(function(){
            var $opt = $(this);
            !~opts.types.indexOf(Number($opt.attr("value"))) && $opt.remove();
        });
        fp.el.MLanguage();
        return fp.initFieldData().events();
    }
    
    FP.pt.events = function () {
        var fp = this, el = fp.el;
        
        el.find("select[name='field-type']").on("change", function(){
            var type = $(this).val();
            el.find(".field-type-prop").hide();
            el.find(".field-type"+type+"-prop").show();
            util.updateScroll(fp);
        }).trigger("change");
        
        var $textFieldProp = el.find(".field-type1-prop");
        $textFieldProp.find("select[name='field-htmltype']").on("change", function(){
            var htmltype = $(this).val();
            $textFieldProp.find(".remind-row")[htmltype == 1 ? "show" : "hide"]();
        }).trigger("change");
        
        fp.el.find("select[name='field-browsertype']").on("change", function(){
            var typeid = $(this).val(), isCustomBrowser = typeid == 161 || typeid == 162 || typeid == 256 || typeid == 257;
            fp.el.find(".row.field-browsername-container")[isCustomBrowser ? "show" : "hide"]();
            util.updateScroll(fp);
        }).trigger("change");
        
        fp.el.find(".choose-field-browsername").on("click", function(){
            var browsertype = fp.el.find("select[name='field-browsertype']").val();
            utils.openRcDialog("browser", {
                title: SystemEnv.getHtmlNoteName(3418),  //请选择
                width: 700,
                height: 500,
                params:{
                    type: browsertype
                },
                btn:[SystemEnv.getHtmlNoteName(3704),SystemEnv.getHtmlNoteName(3516)]
            }, function(result) {
                fp.el.find("input[name='field-browsertext']").val(result.name);
                fp.el.find("input[name='field-browsername']").val(result.id);
                util.checkIsCubeBrowser(fp, result.id);
                util.updateScroll(fp);
            });
        });
        fp.el.find(".choose-browser-field").on("click", function(){
            var browsername = fp.el.find("input[name='field-browsername']").val();
            var url = "/mobilemode/admin/dialog/browserShowFieldConfig.jsp?appid="+appid+"&browser="+browsername;

            var dlg = top.createTopDialog();//获取Dialog对象
            dlg.Width = 550;//定义长度
            dlg.Height = 650;
            dlg.Model = true;
            dlg.normalDialog = false;
            dlg.URL = url;
            dlg.Title = SystemEnv.getHtmlNoteName(5234) +": "+ browsername;  //字段展示配置
            dlg.show();
            dlg.hookFn = function(result){};
        });
        //选择项内容来源change
        el.find("select[name='field-select-sourcetype']").on("change", function(){
            var type = $(this).val() || "1";
            el.find(".field-select-sourcetype-prop").hide();
            el.find(".field-select-sourcetype"+type+"-prop").show();
            util.updateScroll(fp);
        }).trigger("change");
        
        el.find(".add-select-item").on("click", function(){
            util.addSelectItemToPage(fp, {
                selectname: "",
                selectvalue: ""
            });
            util.scrollToBottom(fp);
        });
        
        el.find(".select-sql-tip").on("click", function(){
            var url = "/mobilemode/admin/dialog/fselectSQLHelp.jsp";
            var dlg = top.createTopDialog();//获取Dialog对象
            dlg.Model = true;
            dlg.Width = 540;//定义长度
            dlg.Height = 455;
            dlg.URL = url;
            dlg.btn = false;
            dlg.Title = SystemEnv.getHtmlNoteName(4204);  //SQL帮助
            dlg.show();
        });
        
        var $selectBody = el.find(".select-items-table > tbody");
        $selectBody.on("click", ".delete-select-item", function(){
            $(this).closest("tr").remove();
            if(!$selectBody.children().length){
                el.find(".select-items-tip-control").show();
            }
            util.updateScroll(fp);
        });
        
        el.find("select[name='field-datetime-type']").on("change", function(){
            var type = $(this).val();
            el.find(".field-datetime-offset-prop")[type == 2 ? "hide" : "show"]();
        }).trigger("change");

        el.find(".date-offset-tip").on("click", function(){
            alert(SystemEnv.getHtmlNoteName(6207));  //因为日期选择时年份是有一个区间的，默认为当前年向前偏移100年作为最小年份，向后偏移1年作为最大年份，假设当前是2016年，可选年份为1916-2017年。\n所以可以对偏移进行设置来完成对年份区间的控制，假如只想显示当前年，可以设置向前偏移为0，向后偏移为0。
        });
        
        el.find(".panel-footer .ok-btn").on("click", function(){
            var data = fp.getFieldData();
            $(fp.target).data("field", data);
            fp.settings.callback.onOK.call(null, data, fp.target);
            fp.destory();
        });
        
        el.find(".panel-footer .cancel-btn").on("click", function(){
            fp.destory();
        });
        
        el.on('mouseup', function (e) { // 阻止点击fieldpropPanel时关闭
            return false;
        });
        
        $('body').off('mouseup.fpp').on('mouseup.fpp', "#header, #app", function (e) { // 自动关闭
            fp.destory();
        });
        return this;
    };

    FP.pt.position = function () {
        var position = common.position(this.target, this.el, "right");

        this.el.toggleClass("top", !!position);

        return this.el;
    };
    
    FP.pt.destory = function () {
        this.el && this.el.remove();
        $(this.target).removeClass("sbToggle-btc-reverse");
        return this;
    }
    
    var util = {
        scrollToBottom: function(fp){
            var selector = "#" + fp.id + " .panel-content";
            new Scroll(selector, true);
            Scroll.scrollTo(selector, document.querySelector(selector).scrollHeight);
        },
        checkIsCubeBrowser: function(fp, browsername){
            var $target = fp.el.find(".row.browser-field-container");
            utils.api("designer/plugin", {
                action: "checkIsCubeBrowser",
                data: {browsername: browsername},
                notification: false
            }, function (check) {
                var isCubeBrowser = check.data;
                $target[isCubeBrowser ? "hide" : "show"]();
                util.updateScroll(fp);
            }, function() {
                $target.hide();
                util.updateScroll(fp);
            });
        },
        addSelectItemToPage: function(fp, item){
            var name = item.selectname,
                value = item.selectvalue;
            var htm = '\
            <tr>\
                <td class="bemove"></td>\
                <td style="text-align:right;">'+ SystemEnv.getHtmlNoteName(4544)/*显示：*/ + '</td>\
                <td><input class="form-control" type="text" name="selectName" '+MLanguage.ATTR+'/></td>\
                <td style="text-align:right;">'+ SystemEnv.getHtmlNoteName(4545)/*值：*/ + '</td>\
                <td><input class="form-control" type="text" name="selectValue"/></td>\
                <td style="position:relative;"><div class="del-after2 delete-select-item"></div></td>\
            </tr>\
            ';
            var $row = $(htm);
            fp.el.find("table.select-items-table > tbody").append($row);
            MLanguage.setValue($row.find("input[name='selectName']"), name);
            $row.find("input[name='selectValue']").val(value);
            $row.MLanguage();
            fp.el.find(".select-items-tip-control").hide();
            this.updateScroll(fp);
        },
        initBrowserType: function(fp, defVal){
            var deferred = $.Deferred();
            var fillBrowserType = function(){
                var data = settings.browserTypes || [];
                var optionHtml = data.reduce(function(sum, elt) {
                    return sum + '<option value="'+elt.value+'"'+(defVal == elt.value ? "selected" : "")+'>'+elt.text+'</option>'
                }, "<option></option>");
                fp.el.find("select[name='field-browsertype']").html(optionHtml);
                deferred.resolve(data);
            };
            if(settings.browserTypes){
                fillBrowserType();
            }else{
                utils.api("designer/plugin", {
                    action: "getBrowserType",
                    data: {}
                }, function (result) {
                    settings.browserTypes = result.data;
                    fillBrowserType();
                });
            }
            return deferred;
        },
        initDatasource: function(fp, defDatasource){
            var deferred = $.Deferred();
            utils.api("designer/plugin", {
                action: "getDatasource",
                notification: false,
                data: {}
            }, function (result) {
                var html = result.data.reduce(function(prev, next){
                    return prev += '<option value="'+next+'" '+(defDatasource == next ? "selected" : "")+'>'+next+'</option>';
                }, '<option value="">(local)</option>');
                fp.el.find("select[name='field-select-datasource']").html(html);
                deferred.resolve(result.data);
            });
            return deferred;
        },
        updateScroll: function(fp){
            fp.el.find(".panel-content").perfectScrollbar("update");
        }
    };
    
    var fps = {
        setFP: function (fp) {
            this[fp.id] = fp;
        },
        getFP: function (id) {
            return this['fp_' + id];
        }
    };
    
    return {
        run: function (settings) {
            var fp = new FP(settings);
            fps.setFP(fp);
        },
        show: function (el, id) {
            var fp = fps.getFP(id);
            fp.target = $(el);
            $('.search-fieldprop-panel').remove();
            return fp.render().mounted().position().show();
        },
        setField: function (el, field) {
            $(el).data('field', field);
        }
    }
});