{% extends 'base-layer.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
{% endblock %}
{% block main %}
    <div class="box box-danger">
        <form class="form-horizontal" id="selectUsersForm" action="" method="post">
            {% csrf_token %}
            <input type="hidden" name='id' value="{{ role.id }}"/>
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-5">
                        <label class="control-label">可选用户:</label>
                        <select name="from" id="multiselect" class="form-control" size="18" multiple="multiple">
                            {% for item in un_add_users %}
                                <option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-xs-2">
                        <br><br><br><br><br><br>
                        <button type="button" id="multiselect_rightAll" class="btn btn-block"><i
                                class="glyphicon glyphicon-forward"></i></button>
                        <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i
                                class="glyphicon glyphicon-chevron-right"></i></button>
                        <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i
                                class="glyphicon glyphicon-chevron-left"></i></button>
                        <button type="button" id="multiselect_leftAll" class="btn btn-block"><i
                                class="glyphicon glyphicon-backward"></i></button>
                    </div>
                    <div class="col-xs-5">
                        <label class="control-label">{{ role.name }}-已绑定用户:</label>
                        <select name="to" id="multiselect_to" class="form-control" size="18" multiple="multiple">
                            {% for item in added_users %}
                                <option value="{{ item.id }}">{{ item.name }}({{ item.username }})</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 margin-top-5">
                        <p class="text-maroon">*注意：一个用户可以添加到多个角色中,继承多个角色的权限</p>
                    </div>
                </div>
            </div>
            <div class="box-footer ">
                <div class="row span7 text-center ">
                    <button type="button" id="btnCancel" class="btn btn-default margin-right ">重置</button>
                    <button type="button" id="btnSave" class="btn btn-info margin-right ">保存</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{% static 'plugins/select/multiselect.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //初始化多选列表
            $('#multiselect').multiselect({
                search: {
                    left: '<input type="text" class="form-control" placeholder="Search..." />',
                    right: '<input type="text" class="form-control" placeholder="Search..." />',
                },
                fireSearch: function (value) {
                    return value.length > 3;
                }
            });


        });

        $("#btnSave").click(function () {
            $('#multiselect_to option').prop('selected', true);
            var data = $("#selectUsersForm").serialize();
            console.log(data);
            $.ajax({
                type: $("#selectUsersForm").attr('method'),
                url: "{% url 'system:rbac-role-role2user' %}",
                data: data,
                cache: false,
                success: function (msg) {
                    if (msg.result) {
                        layer.alert('操作成功！', {icon: 1}, function (index) {
                            parent.layer.closeAll();
                        });
                    } else {
                        //alert(msg.message);
                        layer.alert('操作失败', {icon: 2});
                    }
                    return;
                }
            });
        });

        /*点取消刷新新页面*/
        $("#btnCancel").click(function () {
            window.location.reload();

        });
    </script>
{% endblock %}