@extends('admin/layout')
@section('header')
    <link rel="stylesheet" href="{{asset('js/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css')}}">

    <style type="text/css">
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }

        .ztree li span.button.reset {
            margin-right: 2px;
            background-position: -110px -48px;
            vertical-align: top;
            *vertical-align: middle
        }
    </style>
@endsection
@section('content')
    <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        菜单配置
                    </div>
                    <div class="ibox-content">
                        <button class="btn btn-info btn-sm" type="button" onclick="units.saveView(0,1)">添加一级菜单</button>
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>

            <div class="col-sm-9">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">权限配置
                        <button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px"
                                onclick="units.batchDelete()">删除
                        </button>

                        <button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px"
                                onclick="units.saveView(0)">添加
                        </button>
                    </div>
                    <div class="ibox-content">
                        <table id="table" class="table table-condensed" data-mobile-responsive="true"></table>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </body>
@endsection
@section('footer')
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.core.min.js')}}"></script>
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.exedit.min.js')}}"></script>
    <script>

        var units = {
            search: function () {
                tips.selectPage();
            },
            getIdsBySelections: function () {
                var selections = $("#table").bootstrapTable('getSelections');
                var ids = [];
                $.each(selections, function (inx, val) {
                    ids.push(val.id);
                });
                return ids;
            },
            saveView: function (id, type) { //功能权限添加修改 带 type的 是菜单权限添加一级菜单

                if (id === 0 && type !== 1) {
                    var nodes = zTreeObj.getSelectedNodes();
                    // console.log(nodes);
                    if (nodes.length === 0) {
                        layer.alert('请先在左侧菜单选择你要添加的位置', {icon: 0});
                        return;
                    }
                }
                var url = '/admin/system/permissions/' + id + '?type=2';
                if (type === 1) {
                    url = '/admin/system/permissions/' + id + '?type=1';
                }
                layer.open({
                    type: 2,
                    content: url,
                    area: ['60%', '50%'],
                    title: '保存',
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {

                        var son = $(layero).find('iframe')[0].contentWindow;
                        var data = son.tips.getFormValues('#form');

                        layer.close(index);

                        data.type = 2;
                        if (type === 1) { // 菜单权限添加一级菜单
                            data.type = 1;
                            data.parent_id = 0;
                        } else {
                            if (id === 0) {
                                data.parent_id= nodes[0].id
                            }
                        }

                        var config = {
                            type: 'PUT',
                            url: url,
                            data: data,
                            success: function (result) {
                                if (type === 1) {
                                    zTreeObj.addNodes(null, {
                                        id: result.data.id,
                                        pId: result.data.parent_id,
                                        name: result.data.title
                                    });
                                } else {
                                    layer.msg(result.message, {icon: 6, time: 1500}, function () {
                                        tips.tableRefresh('#table');
                                    });
                                }
                            }
                        };
                        tips.ajax(config);
                    }
                });
            },
            batchDelete: function () {
                var ids = units.getIdsBySelections();
                if (ids.length === 0) {
                    layer.alert('请先选择您所要操作的对象');
                    return;
                }
                layer.confirm('您确定要删除吗?', {icon: 3, title: '删除信息'}, function () {
                    tips.ajax({url: '/admin/system/permissions', type: 'delete', data: {ids: ids}});
                    tips.tableRefresh('#table');
                });
            },
            addHoverDom: function (treeId, treeNode) {
                var sObj = $("#" + treeNode.tId + "_span");

                var addBtn = "#addBtn_" + treeNode.tId;
                // if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
                if (treeNode.editNameFlag || $(addBtn).length > 0) return;
                var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='add node' onfocus='this.blur();'></span>" +
                    "<span class='button reset' id='resetBtn_" + treeNode.tId + "' title='reset node' onfocus='this.blur();'></span>";
                sObj.after(addStr);

                var btn = $(addBtn);
                if (btn) btn.bind("click", function () {  //菜单权限添加
                    layer.open({
                        type: 2,
                        content: ['/admin/system/permissions/0?type=1'],
                        area: ['60%', '60%'],
                        title: '保存',
                        btn: ['确认', '取消'],
                        yes: function (index, layero) {
                            var son = $(layero).find('iframe')[0].contentWindow;
                            var data = son.tips.getFormValues('#form');
                            data.type = 1;
                            data.parent_id = treeNode.id;
                            var config = {
                                type: 'PUT',
                                url: '/admin/system/permissions/0',
                                data: data,
                                success: function (result) {
                                    layer.msg(result.message, {icon: 6, time: 1500}, function () {
                                        layer.close(index);
                                    });
                                    zTreeObj.addNodes(treeNode, {
                                        id: result.data.id,
                                        pId: result.data.parent_id,
                                        name: result.data.title
                                    });
                                }
                            };
                            tips.ajax(config);
                        }
                    });
                    return false;
                });

                var resetBtn = $("#resetBtn_" + treeNode.tId);
                if (resetBtn) resetBtn.bind("click", function () { //菜单权限修改
                    layer.open({
                        type: 2,
                        content: ['/admin/system/permissions/' + treeNode.id + '?type=1'],
                        area: ['60%', '60%'],
                        title: '保存',
                        btn: ['确认', '取消'],
                        yes: function (index, layero) {
                            var son = $(layero).find('iframe')[0].contentWindow;
                            var data = son.tips.getFormValues('#form');
                            data.type = 1;
                            var config = {
                                type: 'PUT',
                                url: '/admin/system/permissions/' + treeNode.id,
                                data: data,
                                success: function (result) {
                                    layer.msg(result.message, {icon: 6, time: 1500}, function () {
                                        layer.close(index);
                                    });
                                    treeNode.name = result.data.title;
                                    zTreeObj.updateNode(treeNode);

                                }
                            };
                            tips.ajax(config);
                        }
                    });
                    return false;
                });
            }
        };


        var zTreeObj;
        // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
        var setting = {
            callback: {
                onClick: function (event, treeId, treeNode) {
                    config.otherParams = {parentId: treeNode.id};
                    tips.tableRefresh();
                },
                beforeRemove: function (treeId, treeNode) {
                    zTreeObj.selectNode(treeNode);
                    layer.confirm('是否删除所有选中的数据?', {icon: 3, title: '提示'}, function (index) {
                        layer.close(index);
                        var config = {
                            type: 'delete',
                            url: '/admin/system/permissions/' + treeNode.id,
                            success: function (result) {
                                layer.msg(result.message, {icon: 6, time: 1500}, function () {
                                    layer.close(index);
                                });
                                zTreeObj.removeNode(treeNode);
                            }
                        };
                        tips.ajax(config);

                    });
                    return false;
                }
            },
            edit: {
                enable: true,
                showRenameBtn: false,
                showRemoveBtn: true
            },
            view: {
                addHoverDom: units.addHoverDom,
                removeHoverDom: function (treeId, treeNode) {
                    $("#addBtn_" + treeNode.tId).unbind().remove();
                    $("#resetBtn_" + treeNode.tId).unbind().remove();
                },
                selectedMulti: false
            }
        };
        // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)

        var trees = JSON.parse('{!! json_encode($trees) !!}');

        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, trees);
        });


        var config = {};
        config.url = '/admin/system/permissions';
        config.columns = [ //字段
            /*{checkbox: true},*/
            {
                title: '序号', align: 'center', formatter: function (value, item, index) {
                    return index + 1;
                }
            },
            {title: '名称', field: 'title', align: 'center'},
            {title: '规则', field: 'rule', align: 'center'},

            {title: '创建时间', field: 'created_at', align: 'center'},
            {
                title: '操作', field: 'id', align: 'center',
                formatter: function (value) {
                    return (
                        '<button onclick="units.saveView(' + value + ')" class="btn btn-xs"><span class="glyphicon glyphicon-edit"></span>编辑</button>'
                        // '<button onclick="units.detail(' + value + ')" class="btn btn-xs"><span class="glyphicon glyphicon-menu-hamburger"></span>详情</button>'
                    );
                }
            }
        ];
        tips.bootstrapTable(config);


        $(document).on('click', '#on', function () {
            var ids = units.getIdsBySelections();
            if (ids.length === 0) {
                layer.alert('请先选择您所要操作的对象');
                return;
            }
            tips.ajax({url: '/admin/system/users/on', type: 'put', data: {ids: ids}});
            tips.tableRefresh('#table');
        });


        $(document).on('click', '#off', function () {
            var ids = units.getIdsBySelections();
            if (ids.length === 0) {
                layer.alert('请先选择您所要操作的对象');
                return;
            }
            tips.ajax({url: '/admin/system/users/off', type: 'put', data: {ids: ids}});
            tips.tableRefresh('#table');
        });


        $(document).on('click', '#add', function () {
            layer.open({
                type: 2,
                content: ['/admin/system/user/show/0'],
                area: ['60%', '70%'],
                title: '添加用户'
            });
        });

    </script>
@endsection