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


{% include "django/forms/widgets/select.html" %}
<div class="layui-btn-group">
    {% if meta_i.ai.add.perm_code in request.permission_codes %}
        <a class="layui-btn layui-btn-mini layui-btn-primary" id="{{ widget.attrs.id }}_query">查找</a>
        <a class="layui-btn layui-btn-mini" id="{{ widget.attrs.id }}_add">新增</a>
    {% endif %}
    {% if meta_i.ai.edit.perm_code in request.permission_codes %}
        <a class="layui-btn layui-btn-mini layui-btn-disabled layui-btn-normal" id="{{ widget.attrs.id }}_change">修改</a>
        <a class="layui-btn layui-btn-mini layui-btn-disabled layui-btn-warm" id="{{ widget.attrs.id }}_clear">清空</a>
    {% endif %}
    {% if meta_i.ai.del.perm_code in request.permission_codes %}
        <a class="layui-btn layui-btn-mini layui-btn-disabled layui-btn-danger" id="{{ widget.attrs.id }}_delete">删除</a>
    {% endif %}
</div>

<script>

    //window.onload = function () {
    $('#{{ widget.attrs.id }}').select2(
       {
          ajax: {
            delay: 250,
            //dataType: 'json',
            url: '{{ select_url }}',
            processResults: function (data) {
                return {
                    results: data
                };
            }
          }
      }
   );

    $('#{{ 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 }}',
            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 }}_change").click(function () {
        var id = $('#{{ widget.attrs.id }}').val();
        if (id) {
            layer.open({
                title: "修改{{ popup_name }}",
                type: 2,
                {#area: ['{{ width }}', '{{ height }}'],#}
                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');
                        $('#{{ widget.attrs.id }}').select2();

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

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


    function {{ widget.attrs.id }}_update_option_text(id, value) {
        if (id) {
            var option = new Option(value, id, true, true);
            $('#{{ widget.attrs.id }}').append(option).trigger('change');
            // manually trigger the `select2:select` event
            $('#{{ widget.attrs.id }}').trigger({
                type: 'select2:select',
                params: {
                    data: {
                        "id": id,
                        "text": value,
                        "genus": value,
                        "species": value
                    }
                }
            });
        }
    }

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

   $("#{{ widget.attrs.id }}_clear").click(function () {
       $("#{{ widget.attrs.id }}").val(null).trigger('change');
   });
    //}
</script>