{% load static %}
<style>
    #{{ widget.attrs.id }}_add, #{{ widget.attrs.id }}_change, #{{ widget.attrs.id }}_delete {
        margin-top: 5px;
        padding: 0 5px;
        height: 20px;
        line-height: 20px;
    }
</style>


{% include "django/forms/widgets/select.html" %}

 <div class="text-left">
                <button type="button" id="{{ widget.attrs.id }}_refresh"
                        class="btn btn-default  btn-xs margin-left ">刷新
                </button>

                <button type="button" id="{{ widget.attrs.id }}_btn_select_all"
                        class="btn btn-default  btn-xs margin-left ">全选
                </button>

                <button type="button" id="{{ widget.attrs.id }}_btn_deselect_all"
                        class="btn btn-default  btn-xs margin-left ">
                    全不选
                </button>
</div>
<div class="layui-btn-group">
        <a class="layui-btn layui-btn-mini" id="{{ widget.attrs.id }}_add">新增</a>
    {% if meta_i.ai.add.perm_code in request.permission_codes %}
        <a class="layui-btn layui-btn-mini" id="{{ widget.attrs.id }}_add">新增</a>
    {% endif %}
    {#    {% if can_update %}<a class="layui-btn layui-btn-mini layui-btn-disabled layui-btn-normal"#}
    {#                          id="{{ widget.attrs.id }}_change">修改</a>{% endif %}#}
    {#    {% if can_delete %}<a class="layui-btn layui-btn-mini layui-btn-disabled layui-btn-danger"#}
    {#                          id="{{ widget.attrs.id }}_delete">删除</a>{% endif %}#}
</div>

<script>
    {#$('#{{ widget.attrs.id }}').select2();#}
    $('#{{ widget.attrs.id }}').multiSelect({
        keepOrder: true,
        dblClick: true,
        selectableHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='try \"关键字\"'>",
        selectionHeader: "<input type='text' class='search-input form-control' autocomplete='off' placeholder='try \"关键字\"'>",
        afterInit: function (ms) {
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                .on('keydown', function (e) {
                    if (e.which === 40) {
                        that.$selectableUl.focus();
                        return false;
                    }
                });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                .on('keydown', function (e) {
                    if (e.which == 40) {
                        that.$selectionUl.focus();
                        return false;
                    }
                });
        },
        afterSelect: function () {
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function () {
            this.qs1.cache();
            this.qs2.cache();
        }
    });

    $('#{{ widget.attrs.id }}_btn_select_all').on('click', function () {
                $('#{{ widget.attrs.id }}').multiSelect('select_all');
            });

            $('#{{ widget.attrs.id }}_btn_deselect_all').on('click', function () {
                $('#{{ widget.attrs.id }}').multiSelect('deselect_all');
            });

            $('#{{ widget.attrs.id }}_btn_refresh').on('click', function () {
                $('#{{ widget.attrs.id }}').multiSelect('refresh');
            });
    $('#{{ widget.attrs.id }}_add').click(function () {
        layer.open({
            title: "添加{{ popup_name }}",
            type: 2,
            area: ['{{ width }}', '{{ height }}'],
            area: ['95%', '95%'],
            content: '{{ add_url }}' + '?_popup=1&_to_field={{ widget.attrs.id }}',
            closeBtn: false,
            shadeClose: false,
            shade: 0.3,
            maxmin: true,
            moveOut: true,
            success: function (layer, index) {
                <!--刷新选中状态 -->
                {{ widget.attrs.id }}_isDisabled();
            },
            btn: ['确定', '关闭'],
            yes: function (index, layero) {
                var ifname = "layui-layer-iframe" + index;//获得layer层的名字
                var Ifame = window.frames[ifname];
                Ifame.document.getElementById("myform").submit();
                $('#{{ widget.attrs.id }}').multiSelect('addOption', { value: 'test', text: 'test', index: 0, nested: 'optgroup_label' });
                layer.close(index);
            },
            btn2: function (index) {
                layer.close(index);
            },
        });
    });

    $("#{{ widget.attrs.id }}_change").click(function () {
        var id = $('#{{ widget.attrs.id }}').val();
        if (id) {
            layer.open({
                title: "修改{{ popup_name }}",
                type: 2,
                area: ['95%', '95%'],
                content: '{{ update_url }}' + id + '?_popup=1&_to_field={{ widget.attrs.id }}',
                success: function (layer, index) {

                },
                btn: ['确定', '关闭'],
                yes: function (index, layero) {
                    var ifname = "layui-layer-iframe" + index;//获得layer层的名字
                    var Ifame = window.frames[ifname];
                    Ifame.document.getElementById("myform").submit();
                    layer.close(index);
                },
                btn2: function (index) {
                    layer.close(index);
                },
            });
        }
    });

    $("#{{ widget.attrs.id }}_delete").click(function () {
        var id = $('#{{ widget.attrs.id }}').val();
        var value = $('#{{ widget.attrs.id }} option[value=' + id + ']').text();
        var indexGood = value.lastIndexOf('>');
        var valueN = indexGood > 0 ? value.substring(indexGood + 1, value.length) : value;
        if (id) {
            layer.confirm('确认删除 ' + valueN + ' 吗?', {icon: 3, title: '删除{{ popup_name }}'}, function (index) {
                $.ajax({
                    type: "POST",
                    data: {},
                    url: '{{ delete_url }}' + id + '/?_popup=1',
                    dataType: 'json',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
                    },
                    success: function (data, textStatus) {
                        <!--关闭弹窗 返回列表 -->
                        layer.close(index);
                        $('#{{ widget.attrs.id }} option[value=' + data.id + ']').remove();
                        $("#{{ widget.attrs.id }}_change,#{{ widget.attrs.id }}_delete").addClass('layui-btn-disabled');

                        return false;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert('删除失败 ' + XMLHttpRequest.responseText)
                    }
                });
            });
        }
    });

    /********select绑定change事件，如果value有值，就可修改及删除  页面加载完成之后做相同判断**********/
    function {{ widget.attrs.id }}_isDisabled() {
        if ($('#{{ widget.attrs.id }}').val()) {
            if ($('#{{ widget.attrs.id }}').val().length === 1)
                $("#{{ widget.attrs.id }}_change,#{{ widget.attrs.id }}_delete").removeClass('layui-btn-disabled');
            else
                $("#{{ widget.attrs.id }}_change,#{{ widget.attrs.id }}_delete").addClass('layui-btn-disabled');
        } else {
            $("#{{ widget.attrs.id }}_change,#{{ widget.attrs.id }}_delete").addClass('layui-btn-disabled');
        }
    }

    $('#{{ widget.attrs.id }}').change(function () {
        {{ widget.attrs.id }}_isDisabled();
    });

    {{ widget.attrs.id }}_isDisabled();
</script>
