baoshi-was/resources/js/queryForm/queryForm.js

const query = function getQueryForm(data) {
    {
        this.el = data.el || '#form_div';
        this.form = data.form;
        this.method = data.method || 'get';
        this.url = data.url || getPathname();
        this.condition = data.condition;
        this.paginations = data.paginations ? data.paginations : [50, 100, 200, 500, 1000];
        this.isPaginations = data.isPaginations !== false;
        this.keydownfun = data.keydownfun || undefined;
        this.selectChange = data.selectChange || undefined;
        this.searchClick = data.searchClick || undefined;
        this.selectfun = data.selectfun || undefined;
        this._onsubmit = data._onsubmit || undefined;
        this.keydownSearch = data.keydownSearch || true;
        this.selectChangeSearch = data.selectChangeSearch || true;
        this.tip = data.tip || '';
        this.nextPage = nextPage;
        this.pervPage = pervPage;
        this.goPage = goPage;
        this.getSearchData = getSearchData;
        this.autoSubmit = (data.autoSubmit !== false);
        this.param = data.param || [];
        this.appendDom = data.appendDom || undefined;

        // 提交表单
        this.onsubmit = function () {
            if (!this.autoSubmit) {
                return;
            }
            saveSearchOnCookie();
            let form = $("<form method='" + _this.method + "'></form>");
            for (const key in _data) {
                let map = _data[key];
                if (map['required'] == true && (map.value === '' || map.value === null || map.value === undefined)) return;
                if (["string", "number"].includes(fetchJsType(map.value)) && map.value !== '') {
                    // if(map.value){
                    //     let string = new String(map.value);
                    //     if(string.length > 1 ){
                    //         string = string.replace(/\+/g,',');
                    //         map.value = string
                    //     }
                    // }
                    //form.append("<input name='" + key + "' value='" + map.value.replace(" ","%20") + "'>");
                    form.append("<input name='" + key + "' value='" + encodeURIComponent(map.value) + "'>")
                } else if ('array' === fetchJsType(map.value)) {
                    let string = map.value.join(',');
                    //form.append("<input  name='" + key + "' value='" + string.replace(" ","%20") + "'>");
                    form.append("<input  name='" + key + "' value='" + encodeURIComponent(string) + "'>")
                }
            }
            for (let key in this.param) {
                form.append("<input type='text' name='" + key + "' value='" + this.param[key] + "'>");
            }
            if (_this.method !== 'get') {
                form.append("<input type='hidden' name='_token' value='" + $('meta[name="csrf-token"]').attr('content') + "'>");
                form.append("<input type='hidden' name='_method' value='" + _this.method + "'>");
                form.attr('action', _this.url);
            }
            _hidden_div.html('');
            _hidden_div.append(form);
            form.submit();
        }

    }
    let _this = this;
    let _parentNode = null;
    let _data = {};
    let _form = [];
    let _table = null;
    let _clearTr = null;
    let _pagination = null;
    let _baseData = data;
    let _searchBtn = null;
    let _hidden_div = null;
    let _parentNode_top = null;
    let _page = '';
    let _toggle_btn = null;
    this.init = function () {
        _parentNode = $(_this.el);
        _form = $("<div ></div>");
        _table = $("<table class='table table-sm table-bordered m-0 position-static' style='background: rgb(255, 255, 255);'></table>");
        fillTable();
        switchData();
        addHiedDiv();
        rendererSearchForm();
        visibleClearBtn();
        parentNodeFloat();
        inputKeyDown();
        selectChange();
        createTip();
        $('[data-toggle="tooltip"]').tooltip({'trigger': 'hover'})
    }

    function isSmallScreen() {
        return $(window).width() <= 640;
    }

    function getToggleBtn(){
        _toggle_btn = $("<button  type='button' class='btn btn-sm btn-success position-fixed' style='left:-5px;top:290px;z-index:10;width: 28px;'>展开筛选</button>")
        _toggle_btn.click(function(){
            if(_toggle_btn.text() === "展开筛选"){
                _toggle_btn.text("收缩");
                _table.removeClass("d-none")
                _table.css("z-index",9);
            }else if(_toggle_btn.text() === "收缩"){
                _toggle_btn.text("展开筛选");
                _table.addClass("d-none")
            }
        });
        return _toggle_btn;
     }

    // form fixed
    function parentNodeFloat() {
        _parentNode_top = _parentNode.offset().top;
        let height = _parentNode.height();
        let dom = _this.appendDom ? $("#" + _this.appendDom + "") : null;
        $(window).scroll(function () {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(isSmallScreen()){
                return;
            }
            if (scrollTop > _parentNode_top) {
                _form.addClass('fixed-top');
                if (dom) {
                    dom.css('position', 'fixed');
                    dom.css('background', 'rgb(255, 255, 255)');
                    dom.css('top', height);
                    dom.css('z-index', 1000);
                }
            } else {
                _form.removeClass('fixed-top');
                if (dom) {
                    dom.attr('style', '');
                }
            }
        });
    }

    // add  hide div (on submit form )
    function addHiedDiv() {
        _parentNode.append(_form.append(_table));
        _hidden_div = $('<div></div>');
        _hidden_div.hide();
        $("body").append(_hidden_div);
    }

    // fill table
    function fillTable() {
        _table.html('');
        _table.append(crateClearBtn());
        _table.append(createPagination());
        let isSmall = isSmallScreen();
        _baseData.condition.forEach(function (conditions, index, arrays) {
            let tr = $("<tr></tr>");
            conditions.forEach(function (condition, index, array) {
                if (isSmall) tr = $("<tr></tr>");
                let td = $("<td style='width: 260px'></td>");
                if ([null, '', undefined].includes(condition.type) && ![null, undefined].includes(condition.name)) {
                    condition.type = 'input';
                }
                if (['dateTime_dateTime', 'dateTimeLocal', 'input_input'].includes(condition.type)) {
                    td = $("<td  style='width: 330px'</td>")
                } else if (['select_multiple_select', 'time', 'dateTime_select'].includes(condition.type)) {
                    td = $("<td  style='width: 280px'</td>");
                } else if (['time', 'dateTime_select'].includes(condition.type)) {
                    td = $("<td  style='width: 320px'</td>");
                }
                td.append(createModule(condition));
                tr.append(td);
                if (isSmall) {
                    _table.append(tr);
                }
            })
            if (!isSmall) {
                _table.append(tr);
                if (arrays.length === index + 1) {
                    let td = $("<td ></td>");
                    tr.append(td.append(createSearchBt()));
                }
            }
        })
        if (isSmall) {
            let tr = $("<tr></tr>");
            let td = $("<td style='width: 260px'></td>");
            _table.append(tr.append(td.append(createSearchBt())));
            _table.addClass("d-none").addClass("position-fixed").css({"z-index":"9","top":0});
            _form.append(getToggleBtn());
        }
        $.cookie.raw = true;
        $.cookie.json = true;
        setTableWidth();
    }

    function setTableWidth() {
        let max_width = 0;
        _baseData.condition.forEach(function (conditions, xindex, xarrays) {
            let _width = 0;
            conditions.forEach(function (condition, index, array) {
                if (['input', 'dateMonth', 'select', 'dateTime', 'input_select'].includes(condition.type)) {
                    _width += 260;
                } else if (['dateTime_dateTime', 'dateTimeLocal', 'input_input'].includes(condition.type)) {
                    _width += 330;
                } else if (['select_multiple_select', 'search_select'].includes(condition.type)) {
                    _width += 280;
                } else if (['checkbox'].includes(condition.type)) {
                    _width += 260;
                } else if (['time', 'dateTime_select'].includes(condition.type)) {
                    _width += 320;
                } else if ([undefined, null, ''].includes(condition)) {
                    _width += 260;
                }

                if (index === array.length - 1 && xindex === xarrays.length - 1) {
                    _width += 260;
                }
                if (max_width < _width) {
                    max_width = _width;
                }
            })
        })
        if (isSmallScreen()) {
            _parentNode.css("width", 340 + "px");
            _table.css("width", 340 + "px").addClass("m-0");
        } else {
            _parentNode.css('min-width', 1920 - 30)
            _parentNode.css('max-width', (max_width || window.screen.availWidth) - 30);
            _table.css('width', max_width + 'px');
        }
    }

    // 清空筛选按钮
    function crateClearBtn() {
        let clearbtn = $("<button type='button' class='btn btn-warning text-dark '>清除筛选</button>");
        clearbtn.click(function () {
            clearData();
            visibleClearBtn();
        })
        let tr = $("<tr ><td colspan='10'></td></tr>");
        tr.find('td').append(clearbtn);
        _clearTr = tr;
        return tr;
    }

    // create SearchBtn
    function createSearchBt() {
        _searchBtn = $("<span class='btn btn-sm btn-outline-dark ml-1' >按条件搜索</span>");
        let div = $("<div class='form-inline'></div>");
        div.append(_searchBtn);
        _searchBtn.click(function () {
            if (controlJsType(_this.searchClick, 'fun')) {
                _this.searchClick();
            }
            if (controlJsType(_this._onsubmit, 'fun')) {
                _this._onsubmit();
            } else {
                _this.onsubmit();
            }
        })
        return div;
    }

    // create _pagination
    function createPagination() {
        let isPaginations = _this.isPaginations ? '' : 'hidden';
        _pagination = $("<select id='paginate' " + isPaginations + " name='paginate' class='form-control form-control-sm' style='vertical-align: middle; max-width: 150px;'></select>");
        let tr = $("<tr ><td colspan='10'><div class='col p-0' style='height: 100%'></div></td></tr>");
        tr.find('div').append(_pagination);
        _this.paginations.forEach(function (map) {
            let option = $("<option value='" + map + "'>每页显示" + map + "</option>");
            _pagination.append(option);
        })
        _pagination.change(function () {
            let dom = {name: 'paginate', type: 'select', value: _pagination.val(), mold: 'select'};
            _data['paginate'] = dom;
            modifyData(dom);
            _data['paginate'] = dom;
            _this.onsubmit();
        })
        return tr;
    }

    // create Tip
    function createTip() {
        let data = fetchCookie();
        let search = window.location.search;
        if (!data || !search) {
            return;
        }
        let cookies = JSON.parse(data);
        if (!cookies['success_tip']) {
            return;
        }
        if (!cookies['success_tip'] && !!_this.tip) {
            cookies['success_tip'].value = _this.tip;
            cookies['success_tip'].count = 1;
            _data['page'].value = _page;
            saveCookie(cookies);
            set_dataOnCookie();
            _this.onsubmit();
            // 重定向
        } else if (!cookies['success_tip'] && cookies['success_tip'].count === 1) {
            let tip = $("<div class='alert alert-success h1'></div>")
            let tipdiv = $("<div style='max-width: " + window.screen.availWidth + "px'>" + cookies['success_tip'].value + "</div>").append(tip);
            _form.append(tipdiv);
            cookies['success_tip'] = '';
            saveCookie(cookies);
        }
    }

    // 数据清空
    function clearData() {
        saveCookie({});
        let url = _this.url;
        if (_this.param !== []) {
            url += "?";
            let i = 0;
            for (let key in _this.param) {
                if (i !== 0) url += "&";
                url += key + "=" + _this.param[key];
                i++;
            }
        }
        window.location.href = url;
    }

    // 存cookie
    function saveCookie(data) {
        $.cookie(getPathname(), data, {expires: 1});
    }

    // 取cookie
    function fetchCookie() {
        return $.cookie(getPathname());
    }

    // 获取路径
    function getPathname() {
        return window.location.pathname;
    }

    // 获取js对象类型types.call
    function fetchJsType(JsObj) {
        let types = Object.prototype.toString;
        let obj = types.call(JsObj);
        return (obj === "[object Number]" && 'number')
            || (obj === "[object Boolean]" && 'boolean')
            || (obj === "[object String]" && 'string')
            || (obj === "[object Array]" && 'array')
            || (obj === "[object Function]" && 'fun')
            || (obj === "[object Object]" && 'object')
            || (obj === "[object Null]" && 'null')
            || (obj === "[object Undefined]" && 'undefined');
    }

    // 判断js类型
    function controlJsType(JsObj, type) {
        if (fetchJsType(type) === 'array') {
            return type.includes(fetchJsType(JsObj));
        } else if (fetchJsType(type) === 'string') {
            return fetchJsType(JsObj) === type;
        } else {
            return JsObj === type;
        }
    }

    // create Module
    function createModule(condition) {
        let type = condition.type;
        return (['input', '', null].includes(type) && getInput(condition))
            || (type === "select" && getSelect(condition))
            || (type === "search_select" && getSearchSelect(condition))
            || (type === "input_select" && getInputSelect(condition))
            || (type === "dateTime" && getdateTime(condition))
            || (type === "dateTimeLocal" && getDateTimeLocal(condition))
            || (type === "dateMonth" && getDateMonth(condition))
            || (type === "time" && getTime(condition))
            || (type === "input_input" && getInputInput(condition))
            || (type === "dateTime_dateTime" && getdateTimedateTime(condition))
            || (type === "dateTime_select" && getdateTimeSelect(condition))
            || (type === "select_multiple_select" && getSelectMultipleSelect(condition))
            || (type === "checkbox" && getCheckBox(condition));
    }

    // dateMonth
    function getDateMonth(condition) {
        let dateMonth = $("<input name = '" + condition.name + "' type='month' class='form-control form-control-sm' style='vertical-align: middle; max-width: 200px;' placeholder='" + condition.placeholder + "' autocomplete='off' data-toggle='tooltip' >");
        dateMonth.attr('title', condition.tip === undefined ? '' : condition.tip);
        dateMonth.blur(function () {
            modifyData({name: condition.name, type: 'dateMonth', value: this.value, mold: 'dateMonth'});
        });
        dateMonth.keypress(function (event) {
            if (event.which === 13) {
                modifyData({name: condition.name, type: 'input', value: this.value, mold: 'input'});
            }
        });
        return dateMonth;
    }

    // input
    function getInput(condition) {
        let input = $("<input name='" + condition.name + "' class='form-control form-control-sm' style='vertical-align: middle; max-width: 200px;' placeholder='" + condition.placeholder + "' autocomplete='off' data-toggle='tooltip' data-placement='top' >");
        input.attr('title', condition.tip === undefined ? '' : condition.tip);
        input.blur(function () {
            modifyData({name: condition.name, type: 'input', value: this.value, mold: 'input'});
        });
        input.keypress(function (event) {
            if (event.which === 13) modifyData({name: condition.name, type: 'input', value: this.value, mold: 'input'});
        });
        return input;
    }

    // select
    function getSelect(condition) {
        let select = $("<select name='" + condition.name + "' class='form-control form-control-sm' style='max-width: 200px;' data-toggle='tooltip' data-placement='top'></select>")
        select.attr('title', condition.tip === undefined ? '' : condition.tip);
        let tip = $("<option value class='text-secondary'>" + condition.placeholder + "</option>")
        select.append(tip);
        condition.data.forEach(function (map) {
            let option = $("<option value='" + map.name + "' class='text-secondary'>" + map.value + "</option>")
            select.append(option);
        })
        select.on('change', function () {
            let dom = {name: condition.name, type: 'select', value: this.value, mold: 'select'}
            modifyData(dom)
        })
        return select;
    }

    // search_select
    function getSearchSelect(condition) {
        let div = $("<div class='form-inline'></div>");
        let input = $("<input class='form-control form-control-sm'  placeholder='" + condition.placeholder[0] + "'  style='width: 70px;' autocomplete='off' data-toggle='tooltip' data-placement='top'>");
        input.attr('title', controlJsType(condition.tip[0], 'undefined') ? '输入关键词快速定位下拉列表，回车确定' : condition.tip[0]);

        let select = $("<select class='form-control form-control-sm ml-2' name='" + condition.name + "' style='min-width: 120px;max-width: 150px;' data-toggle='tooltip' data-placement='top' data-toggle='tooltip' data-placement='top'></select>");
        select.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        let placeholder = '';
        if (controlJsType(condition.placeholder, 'array') && !['', undefined, null].includes(condition.placeholder[1])) {
            placeholder = condition.placeholder[1];
        }
        fillSelectOption(select, condition.data, placeholder);
        input.blur(function () {
            let value = this.value;
            let data = condition.data.filter(function (map) {
                return map.value.includes(value);
            });
            fillSelectOption(select, data || condition.data);
            select.val(_data[condition.name].select);
        });
        input.keypress(function (event) {
            if (event.which === 13) {
                let value = this.value;
                let data = condition.data.filter(function (map) {
                    return map.value.includes(value);
                })
                fillSelectOption(select, data || condition.data);
                select.val(_data[condition.name].select);
            }
        });
        select.change(function () {
            modifyData({name: condition.name, type: 'input_select', value: this.value, mold: 'select'});
        })
        return div.append(input).append(select);
    }

    // input_select
    function getInputSelect(condition) {
        let div = $("<div class='form-inline'></div>");
        let input = $("<input class='form-control form-control-sm' name='" + condition.name[0] + "' placeholder='" + condition.placeholder[0] + "' autocomplete='off' style='max-width: 120px;' data-toggle='tooltip' data-placement='top' >");
        input.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let select = $("<select class='form-control form-control-sm ml-2' name='" + condition.name[1] + "'  style='max-width: 200px;' title='" + condition.tip[1] + "''>");
        fillSelectOption(select, condition.data);
        input.blur(function () {
            modifyData({name: this.name, type: 'input_select_longtext', value: this.value, mold: 'input'});
        });
        input.keypress(function (event) {
            if (event.which === 13) modifyData({
                name: this.name,
                type: 'input_select_longtext',
                value: this.value,
                mold: 'input'
            });
        });
        select.change(function () {
            modifyData({name: this.name, type: 'input_select_longtext', value: this.value, mold: 'select'});
        })
        return div.append(input).append(select);
    }

    // dataTime
    function getdateTime(condition) {
        let dateTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name + "'  style='max-width: 150px' data-toggle='tooltip' data-placement='top' title='" + condition.tip + "' style='width: 200px'>");
        dateTime.attr('title', controlJsType(condition.tip, 'undefined') ? '' : condition.tip);
        dateTime.bind('input propertychange', function () {
            modifyData({name: condition.name, type: 'dateTime', value: this.value, mold: 'dateTime'});
        });
        return dateTime;
    }

    //dateTimeLocal
    function getDateTimeLocal(condition) {
        let dateTimeLocal = $("<input name = '" + condition.name + "' type='datetime-local' step='01' class='form-control form-control-sm' style='vertical-align: middle; max-width: 280px;' placeholder='" + condition.placeholder + "' autocomplete='off' data-toggle='tooltip' data-placement='top' >");
        dateTimeLocal.attr('title', condition.tip === undefined ? '' : condition.tip);
        dateTimeLocal.bind('input propertychange', function () {
            modifyData({name: condition.name, type: 'dateTimeLocal', value: this.value, mold: 'dateTimeLocal'});
        });
        return dateTimeLocal;
    }

    // time
    function getTime(condition) {
        let div = $("<div class='form-inline'></div>");
        let dateTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name + "'  style='width:150px' data-toggle='tooltip' data-placement='top' >");
        dateTime.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let min = $("<input id='" + condition.name + "_min' class='form-control form-control-sm ml-2' style='max-width: 100px;' placeholder='00:00' data-toggle='tooltip' data-placement='top' >");
        min.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);
        dateTime.bind('input propertychange', function () {
            let hm = '00:00';
            if(!condition.name.includes('start'))hm = '23:59';
            let value = this.value !== '' ? this.value + ' ' + (!!min.val() ? min.val() : hm) : '';
            modifyData({name: condition.name, type: 'time', value: value, mold: 'time'});
            // modifyData({name: condition.name, type: 'dateTime', value: this.value, mold: 'dateTime'});
        });
        min.bind('input propertychange', function () {
            if (['null', 'undefined', ''].includes(dateTime.val())) return;
            let value = ['null', 'undefined', ''].includes(dateTime.val()) ? '' : dateTime.val() + ' ' + min.val();
            modifyData({name: condition.name, type: 'time', value: value, mold: 'time'});
        })
        return div.append(dateTime).append(min);
    }

    // input_input
    function getInputInput(condition) {
        let div = $("<div class='form-inline'></div>");
        let input1 = $("<input name='" + condition.name[0] + "' class='form-control form-control-sm' style='vertical-align: middle; max-width: 150px;' placeholder='" + condition.placeholder[0] + "' data-toggle='tooltip' data-placement='top' title='" + condition.tip[0] + "'>");
        input1.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let input2 = $("<input name='" + condition.name[1] + "' class='form-control form-control-sm ml-2' style='vertical-align: middle; max-width: 150px;' placeholder='" + condition.placeholder[1] + "' data-toggle='tooltip' data-placement='top' title='" + condition.tip[1] + "'>");
        input2.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        input1.blur(function () {
            modifyData({name: this.name, type: 'input_input', value: this.value, mold: 'input'});
        });
        input1.keypress(function (event) {
            if (event.which === 13) modifyData({
                name: this.name,
                type: 'input_input',
                value: this.value,
                mold: 'input'
            });
        });
        input2.blur(function () {
            modifyData({name: this.name, type: 'input_input', value: this.value, mold: 'input'});
        });
        input2.keypress(function (event) {
            if (event.which === 13) modifyData({
                name: this.name,
                type: 'input_input',
                value: this.value,
                mold: 'input'
            });
        });
        return div.append(input1).append(input2);
    }

    // dateTime_dateTime
    function getdateTimedateTime(condition) {
        let div = $("<div class='form-inline'></div>");
        let dateTime1 = $("<input type='date' class='form-control form-control-sm' name='" + condition.name[0] + "'  style='width: 150px' data-toggle='tooltip' data-placement='top' >");
        dateTime1.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);

        let dateTime2 = $("<input type='date' class='form-control form-control-sm ml-2' name='" + condition.name[1] + "'  style='width: 150px;' data-toggle='tooltip' data-placement='top' >");
        dateTime2.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        dateTime1.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'dateTime_dateTime', value: this.value, mold: 'dateTime'};
            modifyData(dom);
        })
        dateTime2.bind('input propertychange', function () {
            let dom = {name: this.name, type: 'dateTime_dateTime', value: this.value, mold: 'dateTime'};
            modifyData(dom);
        })
        return div.append(dateTime1).append(dateTime2);
    }

    // dateTime_select
    function getdateTimeSelect(condition) {
        let div = $("<div class='form-inline'></div>");
        let dateTime = $("<input type='date' class='form-control form-control-sm' name='" + condition.name[0] + "'  style='max-width: 150px;' data-toggle='tooltip' data-placement='top' >");
        dateTime.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);

        let select = $("<select name='" + condition.name[1] + "' class='form-control form-control-sm ml-2' data-toggle='tooltip' data-placement='top' style='max-width: 100px'></select>");
        select.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);

        fillSelectOption(select, condition.data)
        dateTime.bind('input propertychange', function () {
            modifyData({name: this.name, type: 'dateTime_select', value: this.value, mold: 'dateTime'});
        })
        select.change(function () {
            modifyData({name: this.name, type: 'dateTime_select', value: this.value, mold: 'select'});
        })
        return div.append(dateTime).append(select);
    }

    // select_multiple_select
    function getSelectMultipleSelect(condition) {
        let div = $("<div class='form-inline' style='position: relative'></div>");
        let select = $("<select class='form-control form-control-sm' name='" + condition.name + "_sel'  id='" + condition.name + "_sel' style='vertical-align: middle; width: 100px;' data-toggle='tooltip' data-placement='top'  ></select>");
        let label = $("<label id='" + condition.name + "_lab' style='vertical-align: middle; width: 100px'  >(多选)</label>").hide();
        let select_div = $("<div ></div>");
        select.attr('title', controlJsType(condition.tip[0], 'undefined') ? '' : condition.tip[0]);
        let placeholder = controlJsType(condition.placeholder[0], 'undefined') ? '' : condition.placeholder[0];

        fillSelectOption(select, condition.data, placeholder);
        let input = $("<input name='" + condition.name + "_tip' class='form-control form-control-sm ml-2' style='max-width: 150px' data-toggle='tooltip' data-placement='top' autocomplete='off'>");

        input.attr('title', controlJsType(condition.tip[1], 'undefined') ? '' : condition.tip[1]);
        input.attr('placeholder', controlJsType(condition.placeholder[1], 'undefined') ? '' : condition.placeholder[1])

        let ul_div = $("<div class='pl-0 tooltipTarget' style='position: absolute;left: 100px;top:25px; max-height: 150px; overflow-y: scroll; border: 1px solid rgb(221, 221, 221); border-radius: 5px; text-align: center; transform: scale(0.9);z-index:95' tabindex='1'></div>");
        let ul = $("<ul name='" + condition.name + "' class='list-group pl-0 m-0 p-0 bg-white' style='list-style-type: none;width: 150px;top:35px; z-index: 95' ></ul>");
        let check = $("<input id='multipleCheckBox' type = 'checkbox' style='z-index:101;position:fixed;top:0;right: 0;border:1px green' >");
        let isMouseenterCheckBox = false;

        select_div.append(input).append(ul_div.append(ul).append(check));
        div.append(select).append(label).append(select_div);

        fillMultipleSelectOption(ul, condition.data, condition.name);

        check.click(function () {
            _data[condition.name].value = [];
            _data[condition.name].select = [];
            if (check[0].checked === true) {
                condition.data.forEach(function (data) {
                    if (data.value.indexOf(input.val())!==-1){
                        _data[condition.name].value.push(data.name);
                        if (_data[condition.name].select) _data[condition.name].select.push(data.name);
                        else _data[condition.name].select = [data.name];
                    }
                });
            } else {
                let dom = {
                    name: condition.name,
                    mold: 'select_multiple_select',
                    value: [],
                    select: [],
                };
                modifyData(dom);
            }
            redenerUl(ul);
        });
        check.mouseleave(() => {
            isMouseenterCheckBox = false;
        });
        check.mouseenter(() => {
            isMouseenterCheckBox = true;
        });

        input.bind('input propertychange', function () {
            let value = this.value;
            if (value === '') {
                fillMultipleSelectOption(ul, _data[condition.name].data, condition.name);
                redenerUl(ul);
                return;
            }
            let select = _data[condition.name].select;
            if ([undefined, null, ''].includes(select)) {
                select = [];
            }
            let select_data = condition.data.filter(function (map) {
                return map.value.includes(value) || select.includes(map.name);
            })

            fillMultipleSelectOption(ul, select_data, condition.name);
            redenerUl(ul);
        });

        select.change(function () {
            let dom = {
                name: condition.name,
                mold: 'select_multiple_select',
                value: [this.value]
            }
            modifyData(dom);
            redenerUl(ul);
        })
        input.focus(function () {
            ul_div.show();
        })
        input.blur(function () {
            setTimeout(function () {
                if (!ul_div.is(':focus') && !check.is(':focus')) {
                    ul_div.hide();
                }
            }, 100);
        })
        select_div.focus(function () {
            ul_div.show();
        })
        select_div.blur(function () {
            ul_div.hide();
        })
        /*ul_div.blur(function () {
            if (!isMouseenterCheckBox){
                ul_div.hide();
            }
        })*/
        ul_div.hide();
        ul_div.mouseleave(function () {
            if (_data[condition.name].value.length > 0) {
                // _this.onsubmit();
                ul_div.hide();
                return;
            }
            if (!isMouseenterCheckBox) {
                ul_div.hide();
            }
        });
        // ul_div.mouseenter(function () {
        //     if(_data[condition.name].value.length>0){
        //         setTimeout(()=> {
        //             if (ul_div.is(':visible')){
        //                 ul_div.attr("title","移出多选区域即可自动提交");
        //                 ul_div.tooltip('show');
        //             }
        //         },1000);
        //     }
        // });
        return div;
    }

    // checkbox
    function getCheckBox(condition) {
        let div1 = $("<div class='form-inline'></div>")
        condition.data.forEach(function (map, index) {
            let div = $('<div class="custom-control custom-control-inline custom-checkbox"></div>');
            let checkbox = $("<input type='checkbox' name='" + condition.name + "' class='custom-control-input' id='" + condition.name + index + "' value='" + map.name + "' >");
            let label = $("<label class='custom-control-label text-left font-weight-norma' for='" + condition.name + index + "'>" + map.value + "</label>")
            div1.append(div.append(checkbox).append(label));
            checkbox.click(function () {
                let value = [];
                $.each($("input:checkbox[name='" + condition.name + "']:checked"), function () {
                    value.push($(this).val());
                })
                let dom = {name: condition.name, type: 'checkbox', value: value, mold: 'check'};
                modifyData(dom);
                _this.onsubmit();
            });
        })
        return div1;
    }

    // fill select
    function fillSelectOption(select, data, placeholder = '') {
        select.html('');
        if (![undefined, null].includes(placeholder)) {
            let option = $("<option value></option>");
            if ('' === placeholder) {
                option = $("<option value>" + '全部' + placeholder + "</option>");
            } else {
                option = $("<option value>" + placeholder + "</option>");
            }
            select.append(option);
        }
        data.forEach(function (map) {
            let option = $("<option value='" + map.name + "'>" + map.value + "</optio>");
            select.append(option);
        })
        if (data !== undefined) {
        }
    }

    // fill multiple select ul
    function fillMultipleSelectOption(ul, data, name) {
        ul.html('');
        data.forEach(function (map) {
            let span = $("<span  style='cursor:default'>" + map.value + "</span>");
            let li = $("<li class='list-group-item pt-0 pb-0' value='" + map.name + "'></li>");
            li.append(span);
            ul.append(li);
            li.click(function () {
                let value = li.attr('value');
                let dom_data = _data[name].value;
                if (!dom_data) {
                    dom_data = [];
                }
                if (controlJsType(dom_data, 'string')) {
                    dom_data = [dom_data];
                }
                if (dom_data.includes(value)) {
                    dom_data.splice(dom_data.indexOf(value), 1);
                } else {
                    dom_data.push(value);
                }
                dom_data = arrDuplicate(dom_data);
                let dom = {
                    name: ul.attr('name'),
                    type: 'select_multiple_select',
                    value: dom_data,
                    select: dom_data,
                    mold: 'select_multiple_select'
                };
                modifyData(dom);
                redenerUl(ul);
                isMultiple(ul.attr('name'));
            })
        })
    }

    function isMultiple(name) {
        let label = $('#' + name + '_lab');
        let select = $('#' + name + '_sel');
        let dom_data = _data[name].value;
        if (dom_data && dom_data.length === 1) {
            select.show();
            select.val(dom_data[0]);
            label.hide();
        } else if (controlJsType(dom_data, 'string')) {
            select.show();
            select.val(dom_data);
            label.hide();
        } else if (dom_data.length >= 2) {
            select.hide();
            label.show();
        }
    }

    // modify _data
    function modifyData(dom) {
        _data[dom.name].mold = dom.mold;
        _data[dom.name].value = dom.value;
        _data[dom.name].select = dom.value;
        redenerSearchFormOnData(dom.name, dom.value, dom.mold);
        let killings = _data[dom.name].killings;
        if (killings) {
            killings.forEach(function (targetName) {
                _data[targetName].value = '';
                redenerSearchFormOnData(_data[targetName].name, '', _data[targetName].mold);
            })
        }

        /* rules 规则
        *  son 子级元素 对象形式多传递 子级元素不存在时且 required_without_all_if 忽略列表内元素皆无值时使子级元素设置默认值
        *       {son:{key:{required_without_all_if:[],default:''}}}
        * date_relevance 时间关联 对象形式传递 date为起终时间 relevance为关联元素name
        *   killing为标记干掉哪种类型元素(enum('date','relevance')) default为relevance列表值，时间差存在于该值中才会去选中
        *   {date_relevance:{date:['',''],relevance:'',killing:'',default:[]}}
        * */
        let rules = _data[dom.name].rules;
        if (rules && JSON.stringify(rules) !== '{}') {
            if (rules['son']) {
                for (let key in rules['son']) {
                    if (!dom.value) {
                        redenerSearchFormOnData(_data[key].name, '', _data[key].mold);
                        continue;
                    }
                    if (!_data[key].value) {
                        if (rules['son'][key].required_without_all_if && Array.isArray(rules['son'][key].required_without_all_if)) {
                            let sign = true;
                            rules['son'][key].required_without_all_if.some(function (name) {
                                if (_data[name].value) {
                                    sign = false;
                                    return true;
                                }
                            });
                            if (sign) {
                                _data[_data[key].name].mold = _data[key].mold;
                                _data[_data[key].name].value = rules['son'][key].default;
                                _data[_data[key].name].select = rules['son'][key].default;
                                redenerSearchFormOnData(_data[key].name, rules['son'][key].default, _data[key].mold);
                            }
                        }
                    }
                }
            }
            if (rules['date_relevance']) {
                if (!rules['date_relevance']['date']
                    || !Array.isArray(rules['date_relevance']['date'])
                    || rules['date_relevance']['date'].length !== 2
                    || !rules['date_relevance']['relevance']) return;
                let start = _data[rules['date_relevance']['date'][0]];
                let end = _data[rules['date_relevance']['date'][1]];
                let relevance = _data[rules['date_relevance']['relevance']];
                if (dom.name === rules['date_relevance']['relevance']) {
                    if (relevance.value) {
                        let today = getToday();
                        let tarDate = getSubDate(getToday(), relevance.value);
                        _data[end.name].value = today + " 23:59";
                        _data[start.name].value = tarDate + " 00:00";
                        /*redenerSearchFormOnData(end.name, tarDate+" 23:59", end.mold);
                        redenerSearchFormOnData(start.name, tarDate+" 00:00", start.mold);*/
                    }
                    return;
                }
                if (!start.value || !end.value) {
                    if (rules['date_relevance']['killing'] === 'date') {
                        _data[start.name].value = '';
                        redenerSearchFormOnData(start.name, '', start.mold);
                        _data[start.name].value = '';
                        redenerSearchFormOnData(end.name, '', end.mold);
                    } else {
                        _data[relevance.name].value = '';
                        redenerSearchFormOnData(relevance.name, '', relevance.mold);
                    }
                }
                if (start.value && end.value) {
                    start.value = start.value.replace('+', ' ');
                    end.value = end.value.replace('+', ' ');
                    let diff = getDiffDay(start.value, end.value);
                    if (rules['date_relevance']['default'] && rules['date_relevance']['default'].includes(diff)) {
                        _data[relevance.name].value = diff;
                        redenerSearchFormOnData(relevance.name, diff, relevance.mold);
                    } else {
                        _data[relevance.name].value = '';
                        redenerSearchFormOnData(relevance.name, '', relevance.mold);
                    }
                }
            }
        }
    }

    function getDiffDay(startDate, endDate) {
        startDate = new Date(startDate);
        endDate = new Date(endDate);
        return Math.floor((endDate.getTime() - startDate.getTime()) / (24 * 3600 * 1000));
    }

    function getSubDate(date, value) {
        date = new Date(date);
        date.setDate(date.getDate() - value);
        return dateFormat(date);
    }

    function getToday() {
        let myDate = new Date();
        return dateFormat(myDate);
    }

    function dateFormat(date) {
        let year = date.getFullYear();
        let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return year + "-" + month + "-" + day;
    }

    // save search on cookie
    function saveSearchOnCookie() {
        let saveData = {};
        for (const key in _data) {
            if (!['', null, undefined].includes(_data[key].value)) {
                if (controlJsType(_data[key].value, 'array') && _data[key].value.length === 0) {
                    continue;
                }
                saveData[key] = {
                    value: _data[key].value,
                    mold: _data[key].mold,
                }
            }
        }
        if (!_this.page) {
            saveData['page'] = _this.page;
        }
        saveCookie(saveData);
    }

    // hour_minute
    function verifyTime(time) {
        setTimeout(function () {
            time.value = time.value.replace('：', ':');
            time.value = time.value.replace(/[a-zA-Z]/, '');
            time.value = time.value.replace(/[^\d^\:]/, '');
            time.value = time.value.replace(/\:\:/, ':');
            time.value = time.value.replace(/^([\d]{1})([\s]{1})/, "$1:");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\s]{1})/, "$1$2:");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})/, "$1$2:$3");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})([\d]{1})(.*?)/, "$1$2$3$4");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})([\d]{1})/, "$1$2:$3$4");
            time.value = time.value.replace(/^([\d]{1})([\d]{1}):([\d]{1})([\d]{1})([\s\S]{1})/, "$1$2:$3$4");
            time.value = time.value.replace(/^([\d]{1})([\d]{1}):([\D]{1,99})/, "$1$2:");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})([\d]{1})\./, "$1:$2$3");
            time.value = time.value.replace(/^([\d]{1})\.([\d]{1})([\d]{1})/, "$1:$2$3");
            time.value = time.value.replace(/^([\d]{1})([\d]{2})([\S\s]{1,99})/, "$1$2:$3");
            time.value = time.value.replace(/^([\d]{1}):([\d]{2})([\S\s]{1,99})/, "$1:$2");
            time.value = time.value.replace(/^([\d])/, "$1");
            time.value = time.value.replace(/^([1])([\d]{1})/, "$1$2");
            time.value = time.value.replace(/^([3-9])([\d]{1})/, "2$2");
            time.value = time.value.replace(/^([2-9]{1})([4-9]{1})/, "$13");
            time.value = time.value.replace(/^([\d]{1})([\d]{1}):([6-9]{1})/, "$1$2:5");
            time.value = time.value.replace(/^([\d]{1})([\d]{1})$/, "$1$2:");
        }, 10);
    }

    // array duplicate
    function arrDuplicate(arr) {
        let res = [];
        let obj = {};
        for (let i = 0; i < arr.length; i++) {
            if ([undefined, null, ''].includes(arr[i])) {
                continue;
            }
            if (!obj[arr[i]]) {
                obj[arr[i]] = 1;
                res.push(arr[i]);
            }
        }
        return res;
    }

    // get search data
    function getSearchData(type = 'array') {
        let data = {};
        if (type === 'array') {
            for (let key in _data) {
                if (_data[key].value !== undefined && _data[key].value !== '') {
                    data[key] = _data[key].value
                }
            }
        } else if (type === 'string') {
            data = '';
            for (let key in _data) {
                if (![undefined, null, ''].includes(_data[key].value)) {
                    let value = _data[key].value;
                    if (controlJsType(value, 'string')) {
                        data = data + "&" + key + "=" + value;
                    } else if (controlJsType(value, 'array')) {
                        value.forEach(function (val) {
                            data = data + "&" + key + "=" + val;
                        });
                    }
                }
            }
        }
        return data;
    }

    // renderer input
    function rendererSearchFormOnInput(key, value, mold) {
        if ([undefined, null, ''].includes(value)) {
            $(_form).find("input[name='" + key + "']").val('');
            $(_form).find("input[name='" + key + "']").removeClass('bg-warning');
        } else {
            $(_form).find("input[name='" + key + "']").val(value);
            $(_form).find("input[name='" + key + "']").addClass('bg-warning');
        }
    }

    // renderer select
    function rendererSearchFormOnSelect(key, value, mold) {
        if ([undefined, null, ''].includes(value)) {
            $(_form).find("select[name='" + key + "']").val('').removeClass('bg-warning');
            if (key === 'paginate') {
                $(_form).find("select[name='" + key + "']").val(_this.paginations[0]).removeClass('bg-warning');
            }
        } else {
            $(_form).find("select[name='" + key + "']").val(value);
            if (key === 'paginate' && value == _this.paginations[0]) {
                return;
            }
            $(_form).find("select[name='" + key + "']").addClass('bg-warning');
        }
    }

    // renderer check
    function rendererSearchFormOnCheck(key, value, mold) {
        if ([undefined, null, ''].includes(value)) {
            $(_form).find("input[name='" + key + "']").prop("checked", false).removeClass('bg-warning');
        } else {
            if (controlJsType(value, 'array')) {
                value.forEach(function (_value) {
                    $(_form).find("input[name='" + key + "'][value='" + _value + "']").prop("checked", true).addClass('bg-warning');
                })
            } else if (controlJsType(value, 'string')) {
                $(_form).find("input[name='" + key + "'][value='" + value + "']").prop("checked", true).addClass('bg-warning');
            }
        }
    }

    // redener multiple select     input
    function rendererSearchFormOnMultipleSelect(key, value, mold) {
        let ul = $(_form).find("ul[name='" + key + "']");
        if ([undefined, null, ''].includes(value) || (controlJsType(value, 'array') && value.length === 0)) {
            $(_form).find("input[name='" + key + "_tip']").removeClass('bg-warning');
            ul.addClass('bg-warning');
        } else if (!!value) {
            $(_form).find("input[name='" + key + "_tip']").addClass('bg-warning');
            ul.addClass('bg-warning');
        } else if (controlJsType(value, 'array') && value.length >= 1) {
            $(_form).find("input[name='" + key + "_tip']").addClass('bg-warning');
            ul.addClass('bg-warning');
        }
        redenerUl(ul);
    }

    // redener multiple select     ul
    function redenerUl(ul) {
        let name = ul.attr('name');
        let select = _data[name].select;
        if ([null, undefined].includes(select)) {
            _data[name].select = [];
            select = [];
        }
        let lis = ul.find('li');
        if ([null, undefined, ''].includes(lis)) {
            return;
        } else {
            lis.get().forEach(function (dom) {
                if (select.includes($(dom).attr('value'))) {
                    dom.style.backgroundColor = "#4AA0E6";
                    $(dom).addClass('active');
                } else {
                    dom.style.backgroundColor = "#FFFFFF";
                    $(dom).removeClass('active');
                }
            });
            if (lis.length === select.length) {
                $("#multipleCheckBox").prop("checked", true);
            }
            isMultiple(ul.attr('name'));
        }
    }

    function rendererSearchFormOnTime(key, value, mold) {
        if (![undefined, null, ''].includes(value)) {
            $(_form).find("input[name=" + key + "]").val(value.substring(0, 10)).addClass('bg-warning');
            if (value.length > 11 + 5) {
                $(_form).find("input[name='" + key + "_tim']").val(value.substring(11, 5));
            }
        } else {
            $(_form).find("input[name=" + key + "]").val("").removeClass('bg-warning');
            $(_form).find("input[name='" + key + "_tim']").val("");
        }
    }

    function visibleClearBtn() {
        let bool = false;
        for (const key in _data) {
            if (key === 'paginate') {
                if ((key === 'paginate' && _data[key].value !== _this.paginations[0])) {
                    bool = true;
                }
            } else {
                if (![undefined, null, ''].includes(_data[key].value)) {
                    if (controlJsType(_data[key].value, 'array') && _data[key].value.length === 0) {
                        continue;
                    }
                    bool = true;
                }
            }
        }
        if (bool) {
            _clearTr.show();

        } else {
            _clearTr.hide();
        }
    }

    function inputKeyDown() {
        $(_form).find('input').keydown(function (e) {
            if (e.keyCode === 13) {
                setTimeout(function () {
                    if (_this.keydownSearch) _this.onsubmit();
                    if (controlJsType(_this.keydownfun, 'fun')) _this.keydownfun();
                }, 100);
            }
        });
        $(_form).find("input[type='date']").change(function (e) {
            setTimeout(function () {
                // if (_this.keydownSearch)_this.onsubmit();
                if (controlJsType(_this.keydownfun, 'fun')) _this.keydownfun();
            }, 100);
        });
    }

    function selectChange() {
        // $(_form).find('select').change(function () {
        //     _this.onsubmit();
        // })
    }

    function redenerSearchFormOnData(key, value, mold) {
        if (mold === 'input' || mold === 'dateTime' || mold === 'dateTimeLocal' || mold === 'dateMonth') {
            rendererSearchFormOnInput(key, value, mold);
        } else if (mold === 'select') {
            rendererSearchFormOnSelect(key, value, mold);
        } else if (mold === 'check') {
            rendererSearchFormOnCheck(key, value, mold);
        } else if (mold === 'select_multiple_select') {
            rendererSearchFormOnMultipleSelect(key, value, mold);
        } else if (mold === 'time') {
            rendererSearchFormOnTime(key, value, mold);
        }
    }

    // 数据转换
    function switchData() {
        _this.condition.forEach(function (conditions) {
            conditions.forEach(function (condition) {
                if (['input', 'select', 'dateTime', 'dateTimeLocal', 'dateMonth', 'search_select', 'time', 'select_multiple_select', 'checkbox'].includes(condition.type)) {
                    if (!condition.select) {
                        condition.select = '';
                    }
                    let data = {
                        name: condition.name,
                        type: condition.type,
                        value: condition.value,
                        select: condition.select,
                        mold: ['input', 'dateTime'].includes(condition.type) ? 'input' : condition.type,
                        data: condition.data,
                        killings: condition.killings,
                        rules: condition.rules,
                        required: condition.required,
                    }
                    if (condition.type === 'search_select') {
                        data.mold = 'select';
                    }
                    if (condition.type === 'select_multiple_select') {
                        data.value = [];
                    }
                    _data[condition.name] = data;
                } else if (['dateTime_dateTime', 'input_input', 'input_select', 'dateTime_select'].includes(condition.type)) {
                    let types = condition.type.split("_");
                    if (!condition.select) {
                        condition.select = ['', ''];
                    }
                    if (!condition.value) {
                        condition.value = ['', ''];
                    }
                    condition.name.forEach(function (_name, index) {
                        let data = {
                            name: _name,
                            type: types[index],
                            value: condition.value[index],
                            select: condition.select[index],
                            mold: ['input', 'dateTime'].includes(types[index]) ? 'input' : types[index],
                            killings: condition.killings,
                            rules: condition.rules,
                            required: condition.required,
                        }
                        if (condition.killings && Array.isArray(condition.killings)) {
                            data.killings = condition.killings[index];
                        }
                        if (condition.rules && Array.isArray(condition.rules)) {
                            data.rules = condition.rules[index];
                        }
                        _data[_name] = data;
                    })
                }
            })
        })
    }

    // redererSearchForm on cookie
    function rendererSearchForm() {
        let url = document.referrer;
        let partt = /(Edit\/)|(\/eidt)|(eidt\/)/i;
        if (url.search(partt) > 0) {
            rendererOptionOnCookie();
        } else {
            rendererOptionOnUrl();
        }
    }

    function rendererOptionOnCookie() {
        let data = fetchCookie();
        if (data === undefined) {
            return;
        }
        data = JSON.parse(data);
        for (let key in data) {
            _data[key].value = data[key].value;
            _data[key].mold = data[key].mold;
            _data[key].select = data[key].select;
        }
        rendererSearchFormOn_data();
    }

    function rendererOptionOnUrl() {
        if (!window.location.search) {
            return;
        }
        searchOptionToUrlsearch();
        rendererSearchFormOn_data();
    }

    function rendererSearchFormOn_data() {
        for (let key in _data) {
            let value = _data[key].value, type = _data[key].type, mold = _data[key].mold;
            // if(value){
            //     let string = new String(value);
            //     if(string.length > 1 ){
            //         string = string.replace(/\+/g,' ');
            //         value = string
            //     }
            // }
            _data[key].select = value;

            if (['input', 'dateTime', 'dateTimeLocal', 'dateMonth'].includes(mold)) {
                rendererSearchFormOnInput(key, value, mold);
            } else if (['select'].includes(mold)) {
                rendererSearchFormOnSelect(key, value, mold);
            } else if (['checkbox'].includes(mold)) {
                rendererSearchFormOnCheck(key, value, mold);
            } else if (['select_multiple_select'].includes(mold)) {
                if (controlJsType(value, ['array', 'string'])) {
                    let ul = $(_form).find("ul[name='" + key + "']");
                    redenerUl(ul);
                    rendererSearchFormOnMultipleSelect(key, value, mold);
                }
            } else if (['time'].includes(type) && value !== undefined) {
                $(_form).find("input[name='" + key + "']").val(value.substr(0, 10)).addClass('bg-warning');
                $(_form).find("input[id='" + key + "_min']").val(value.substr(11, value.length));
            }
        }
        if ([undefined, null, ''].includes(data['paginate'])) {
            return;
        }
        if ([undefined, null, ''].includes(data['paginate'].value)) {
            $(_form).find("select[name='paginate']").val(_this.paginations[0]);
        } else {
            $(_form).find("select[name='paginate']").val(data['paginate'].value);
        }
    }

    // url path on search form option  renderer
    function searchOptionToUrlsearch() {
        let data = (window.location.search);
        data = decodeURIComponent(decodeURIComponent(data));
        //data = decodeURIComponent(data).replace('%20'," ");
        if (!!data) {
            data = (data.substr(1)).split('&');
            data = convertArrayToObj(data);
            for (const key in data) {
                if (!data[key] || _this.param[key]) {
                    continue;
                }
                if (key === 'paginate') {
                    _data[key] = {
                        name: key,
                        value: data[key],
                        type: 'select',
                        mold: 'select'
                    }
                } else if (key === 'page') {
                    _page = data[key];
                } else if (_data[key].type === 'select_multiple_select') {
                    if (!_data[key]) {
                        _data[key].value = [];
                    } else {
                        _data[key].value = data[key].split(',');
                    }
                } else {
                    _data[key].value = data[key];
                }
            }
        }
    }

    // cookie -> data
    function set_dataOnCookie() {
        let data = fetchCookie();
        data = JSON.parse(data);
        if (!data) {
            return;
        }
        for (const key in data) {
            if (!!data[key]) {
                _data[key].value = data[key].value;
            }
        }
    }

    // array - > object
    function convertArrayToObj(arr) {
        if (!arr || !controlJsType(arr, 'array')) {
            return {};
        } else if (controlJsType(arr, 'array') && arr.length > 0) {
            let data = {};
            arr.forEach(function (map) {
                let arr = map.split('='), key = arr[0], value = arr[1];
                if (!data[key]) {
                    data[key] = value;
                } else {
                    if (controlJsType(data[key], 'string')) {
                        data[key] = [data[key], value];
                    } else if (controlJsType(data[key], 'array')) {
                        data[key].push(value);
                    }
                }
            })
            return data;
        }
    }

    //  paginate
    function pervPage() {
        let obj = getSearchData();
        if (!!obj['page'] && obj['page'] > 1) {
            obj['page'] = obj['page'] - 1;
        }
        return getSearchUri(obj);
    }

    function nextPage() {
        let obj = getSearchData();
        if (!!obj['page']) {
            obj['page'] = obj['page'] + 1;
        } else {
            obj['page'] = 2;
        }
        if (!obj['paginate']) {
            obj['paginate'] = 50;
        }
        return getSearchUri(obj);
    }

    function getSearchObj() {
        let data = window.location.search;
        data = decodeURIComponent(data);
        if (!data) {
            return {};
        }
        let saveData = {};
        data = data.substr(1).split('&');
        data.forEach(function (map) {
            let arr = map.split('&'), key = arr[0], value = arr[1];
            if (!!value) {
                if (!saveData[key]) {
                    saveData[key] = value;
                } else {
                    if (controlJsType(data[key], 'string')) {
                        saveData[key] = [saveData[key], value];
                    } else if (controlJsType(data[key], 'array')) {
                        saveData[key].push(value);
                    }
                }
            }
        })
        return saveData;
    }

    function getPage() {
        return getSearchObj()['page'];
    }

    //  paginate
    function pervPage() {
        let obj = getSearchData();
        _page = getPage();
        if (!obj['paginate']) {
            obj['paginate'] = 50;
        }
        if (Number(_page) > 1) {
            _page = Number(_page) - 1;
        } else {
            _page = 1;
        }
        return getSearchUri(obj);
    }

    function nextPage() {
        let obj = getSearchData();
        _page = getPage();
        if (!_page) {
            _page = 1;
        }
        if (_page) {
            _page = Number(_page) + 1;
        }
        if (!obj['paginate']) {
            obj['paginate'] = 50;
        }
        return getSearchUri(obj);
    }

    function goPage(page) {
        let obj = getSearchData();
        _page = page;
        return getSearchUri(obj);
    }

    function getSearchUri(obj) {
        let string = "?";
        for (const key in obj) {
            if (controlJsType(obj[key], ['string', 'number'])) {
                string += key + "=" + obj[key] + '&';
            } else if (controlJsType(obj[key], 'array') && obj[key].length > 0) {
                obj[key].forEach(function (value) {
                    string += key + "=" + value + '&';
                })
            }
        }
        return string;
    }

};