{% extends 'groups/base_layer.html' %}
{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'groups/bower_components/zTree/css/metroStyle/metroStyle.css' %}"
    type="text/css">
<link rel="stylesheet" href="{% static 'groups/bower_components/zTree/css/zTreeStyle/zTreeStyle.css' %}"
    type="text/css">
<link rel="stylesheet" href="{% static 'groups/bower_components/zTree/css/demo.css' %}" type="text/css">
{% endblock %}
{% block main %}

<style type="text/css">
    .ztree li span.button.switch.level0 {
        visibility: hidden;
        width: 1px;
    }

    .ztree li ul.level0 {
        padding: 0;
        background: none;
    }
</style>
<div class="box box-danger">
    <form class="form-horizontal" id="addTreeForm" action="" method="post">
        {% csrf_token %}
        <!-- 注释1：页面实例是由Role2MenuView视图返回的，同时传递了上下文role,这里使用role.id时用来提交POST请求时向后台传递的id-->
        <input type="hidden" name='id' value="{{ role.id }}" />
        <input type="hidden" name="tree" id="tree" value="" />
        <div class="box-body">
            <div class="row">
                <div class="col-xs-12">
                    <!-- <div class="row span7 text-center ">
                                <label class="control-label"><h5>所有权限</h5></label>

                            </div> -->
                    <ul id="left_tree" class="ztree" style="width:100%"></ul>
                </div>
                <!-- <div class="col-xs-2">
                            <br><br><br><br><br><br>
                            <div class="text-center">
                                <button type="button" id="btnSave" class="btn btn-info margin-right ">生成</button>
                            </div>
                            <div class="text-center text-gray margin-top-5">{{ role.name }}权限</div>

                        </div>
                        <div class="col-xs-5">
                            <div class="row span7 text-center">
                                <label class="control-label"><h5>已有权限</h5></label>
                            </div>
                            <ul id="right_tree" class="ztree" style="width:100%"></ul>
                        </div> -->
            </div>
        </div>
        <div class="box-footer ">
            <div class="row span7 text-center ">
              <button type="button" id="btnSave" class="btn btn-info margin-right ">保存</button>
            </div>
          </div>
    </form>
</div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript" src="{% static 'groups/bower_components/zTree/js/jquery.ztree.core.js' %}"></script>
<script type="text/javascript" src="{% static 'groups/bower_components/zTree/js/jquery.ztree.excheck.js' %}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var zTree;
        var demoIframe;

        var left_tree_setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: true
            },
            check: {
                enable: true,
                //chkboxType : { "Y" : "", "N" : "" }
            },
            data: {
                key: {
                    name: "menuname",
                    //title:"title",
                },
                simpleData: {
                    enable: true,
                    idKey: "menuid",
                    pIdKey: "parentid",
                    check: "checked",
                    rootPId: ""
                },
            }
        };

        var right_tree_setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: true
            },
            check: {
                enable: false,
                //chkboxType : { "Y" : "", "N" : "" }
            },
            data: {
                key: {
                    name: "menuname",
                    //title:"title",
                },
                simpleData: {
                    enable: true,
                    idKey: "menuid",
                    pIdKey: "parentid",
                    rootPId: ""
                },
            }
        };

        $.ajax({
            type: "GET",
            url: "{% url 'rbac-role-role2menu_list' %}",
            data: { "id": {{ role.id }}},
        cache: false,
        success: function (msg) {
            layer.close();
            var t = $("#left_tree");
            t = $.fn.zTree.init(t, left_tree_setting, msg.data);
            var treeObj = $.fn.zTree.getZTreeObj("left_tree");
            treeObj.expandAll(true);
            return;
        }
            });

    $("#btnSave").click(function () {
        var treeObj = $.fn.zTree.getZTreeObj("left_tree");
        var nodes = treeObj.getCheckedNodes(true);
        $("#tree").val(JSON.stringify(nodes));
        var data = $("#addTreeForm").serialize();
        $.ajax({
            type: $("#addTreeForm").attr('method'),
            url: "{% url 'rbac-role-role2menu' %}",
            data: data,
            cache: false,
            beforeSend: function () {
                this.layerIndex = layer.load(1, {
                    shade: [0.1, '#fff']
                });
            },
            success: function (msg) {
                if (msg.result) {
                    layer.alert('操作成功', { icon: 1 }, function (index) {
                        parent.layer.closeAll();
                    });
                } else {
                    //alert(msg.message);
                    layer.alert('操作失败', { icon: 2 });
                }
                return;
            }
        });
    });
        });


</script>
{% endblock %}