(function ($) {
    $.fn.multiselect = function (options) {
        var defaults = {
            borderCss: "combox_border",
            inputCss: "combox_input",
            buttonCss: "combox_button",
            selectCss: "combox_select",
            datas: [],
            labels: [],
            disable: 3,
            init: []
        };
        var options = $.extend(defaults, options);

        function _initBorder($border) {//初始化外框CSS
            $border.css({ 'position': 'relative', 'height': '100%' }).addClass(options.borderCss);
            return $border;
        }


        function _initInput($border) {//初始化输入框
            let _ = `<div>
            <div id="labellist" style="float:left;"></div>
            <div id="plusbtn" style="float:left;margin-top:-5px;">
                <div class="circle" data-toggle="dropdown">
                    <div class="glyphicon glyphicon-plus white" style="margin-top:4px;"></div>
                </div>
                <div id="drop_p" class="dropdown-menu" data-stopPropagation="true">
                    <div id="dropdownLabels" style="padding:2px 10px;">
                    </div>
                </div>
            </div>
            </div>`;
            $border.append(_);
            return $border;//IE6需要返回值
        }

        function _initSelect($border) {//初始化下拉列表
            let $drop = $border.children("div").children("div").children("div[id='drop_p']").children("div[id='dropdownLabels']");
            let search = `<li id="search" class="dropdown-item selecta"><input id="searchlabels" type="text" class="form-control" style="float:right;margin-left:0px;" /></li>`;
            $drop.append(search);
            var length = options.datas.length;
            for (let i = 0; i < length; i++) {
                let lii = ` <li name="cb" id="li_label_${i}" class="dropdown-item selecta" href="#"><span id="span${i}" class="labelstyle label-default white">${options.datas[i]}</span><input id="checkbox${i}" style="float:right; margin-top:10px;margin-left:15px;" type='checkbox'/></li>`;
                $drop.append(lii);
                console.log($drop)
                var $li = $drop.children('li');
                $li.delegate('input', 'click', function () {
                    var status = document.getElementById("checkbox" + i).checked;
                    if (status) {
                        if (options.labels.indexOf(i) < 0) options.labels.push(i);
                    }
                    else {
                        let after = [];
                        for (let j = 0; j < options.labels.length; j++) {
                            if (options.labels[j] != i) after.push(options.labels[j]);
                        }
                        options.labels = after;
                    }
                    console.log(options.labels)
                    changeDisabledStatus();
                })
            }

            $("#search").on('input', function () {
                let value = $("#searchlabels").val();
                var lb_cp = JSON.parse(JSON.stringify(options.datas));
                for (let i = 0; i < lb_cp.length; i++) {
                    if (lb_cp[i].indexOf(value) >= 0) {
                        $("#li_label_" + i).show();
                    }
                    else {
                        $("#li_label_" + i).hide();
                    }
                }
            })

            $drop.delegate('li', 'click', function () {
                createLabel(options, $border);
            });

            initLabel(options, $border)


            return $border;
        }

        function createLabel(options, $border) {
            let html = "";
            let $div = $border.children('div').children('div[id="labellist"]');
            $div.empty();
            for (let i = 0; i < options.labels.length; i++) {
                let key = options.labels[i];
                let content = options.datas[key];
                html = `<div class="parent_label label">
                    <span class="label label-default labelstyle">${content}</span>
                    <span id="del_${key}" class="glyphicon glyphicon-minus-sign deleteLabel"></span>
                </div>`;
                $div.append(html);
                $("#del_" + key).click(function (e) {
                    let after = [];
                    for (let j = 0; j < options.labels.length; j++) {
                        if (options.labels[j] != key) after.push(options.labels[j]);
                        else {
                            $("input[id=checkbox" + key + "]").each(function () {
                                $(this).prop("checked", false);
                            });
                        }
                    }
                    options.labels = after;
                    createLabel(options, $border);
                    changeDisabledStatus();
                })
            }
            
            result = GetSelectValue();
            $border.data('selected', result);
            
        }

        function changeDisabledStatus() {
            if (options.labels.length >= options.disable) {
                console.log(options.labels.length)
                $("#plusbtn").hide();
                $("input[type=checkbox]").each(function () {
                    $(this).attr("disabled", true);
                });
            }
            else {
                $("input[type=checkbox]").each(function () {
                    $(this).attr("disabled", false);
                });
                $("#plusbtn").show();
            }
        }

        function GetSelectValue() {
            var str = [];
            for (let i = 0; i < options.labels.length; i++) {
                let key = options.labels[i];
                let content = options.datas[key];
                str.push(content);
            }
            return str;
        }

        function initLabel(options, $border) {
            let dic = new Array();
            if (options.init.length == 0) return;
            for (let i = 0; i < options.datas.length; i++) {
                dic[options.datas[i]] = i;
            }
            for (let i = 0; i < options.init.length; i++) {
                var content = options.init[i];
                options.labels.push(dic[content]);
                $("#checkbox" + dic[content]).prop("checked", true);
            }
            createLabel(options, $border)
            changeDisabledStatus()
        }

        return this.each(function () {
            var _this = $(this);
            _this.empty();
            _this = _initBorder(_this);//初始化外框CSS
            _this = _initInput(_this);//初始化输入框
            _initSelect(_this);//初始化下拉列表
        });
    };
})(jQuery);

var ps = {
    datas:['选项一', '选项二', '选项三', '维护不到位', '12'],//选项
    disable: 4,//最大限制
    init:['选项一', '选项二', '选项三', '维护不到位']//初始化选中值
}
var multi = $('#multiselect').multiselect(ps);

let selected = multi.data('selected');//['','','']