<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        table+table {
            margin-top: 20px !important;
        }
        .api-tag {float: right}
        .layui-form-checkbox span {padding-right: 0px !important;}
    </style>
</head>
<body>
<div class="layui-anim layui-anim-fadein">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body" style="min-height: 372px">
                    <form class="layui-form" lay-filter="formData">
                        <div id="permissionTemplateBox"></div>
                        <script id="permissionTemplate" type="text/html">
                            {{# if(d.length == 0) { }}
                            <div style="text-align: center; padding-top: 116px;">
                                <i class="layui-icon layui-icon-face-surprised" style="font-size: 200px;"></i>
                            </div>
                            <div style="text-align: center; margin-top: 74px; font-size: 20px;">请先添加各增、删、改、查接口权限</div>
                            {{# } }}
                            {{# for(var i = 0, item; item = d[i++];) { }}
                            <fieldset class="layui-elem-field">
                                <legend>{{item.systemTag}}</legend>
                                <div class="layui-field-box">
                                    {{# for(var j = 0, jItem; jItem = item.permissionApis[j++];) { }}
                                    <table class="layui-table">
                                        <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" id="{{jItem.apiTag}}" class="select-all" title="全选" lay-skin="primary" lay-filter="permissionAllFilter">
                                                <span class="api-tag">{{jItem.apiTag}}</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                {{# for(var x = 0, xItem; xItem = jItem.permissions[x++];) { }}
                                                <div class="api-check" id="apiCheck{{xItem.permissionId}}" title="{{xItem.permissionUrl}}" style="display: inline-block; padding: 5px;">
                                                    <input type="checkbox" name="{{jItem.apiTag}}[{{xItem.permissionId}}]" id="{{xItem.permissionId}}" title="{{xItem.permissionTitle}}" lay-skin="primary" lay-filter="permissionFilter">
                                                </div>
                                                {{# } }}
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    {{# } }}
                                </div>
                            </fieldset>
                            {{# } }}
                        </script>
                        <div class="layui-form-item layui-layout-admin">
                            <div class="layui-input-block">
                                <div class="layui-footer" style="left: 0;">
                                    <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
                                    <button type="button" class="layui-btn layui-btn-primary close">关闭</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'laydate', 'common'], function() {
        var $ = layui.$;
        var $win = $(window);
        var table = layui.table;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var layer = layui.layer;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var common = layui.common;
        var resizeTimeout = null;
        var roleId = top.restAjax.params(window.location.href).roleId;
        var permissionType = top.restAjax.params(window.location.href).permissionType;
        var type = 'query';
        if(permissionType === 'permissionInsert') {
            type = 'insert';
        } else if(permissionType === 'permissionDelete') {
            type = 'delete';
        } else if(permissionType === 'permissionUpdate') {
            type = 'update';
        }

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        // 初始化全选
        function initSelectAll(name) {
            var checkboxs = $('input[name^="'+ name +'"]');
            var isAllChecked = true;
            for(var i = 0, item; item = checkboxs[i++];) {
                if(!item.checked) {
                    isAllChecked = false;
                }
            }
            if(isAllChecked) {
                $('#'+ name).prop('checked', true);
            } else {
                $('#'+ name).prop('checked', false);
            }
            form.render('checkbox');
        }

        function initFormTable(callback) {
            var loadLayerIndex;
            top.restAjax.get(top.restAjax.path('api/permission/listgroup?permissionType={permissionType}', [permissionType]), {}, null, function(code, data) {
                laytpl(document.getElementById('permissionTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('permissionTemplateBox').innerHTML = html;
                    form.render('checkbox');
                    callback();
                });
            }, function(code, data) {
                top.dialog.msg(data.msg);
            }, function() {
                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            }, function() {
                top.dialog.close(loadLayerIndex);
            });
        }

        initFormTable(function() {
            var loadLayerIndex;
            top.restAjax.get(top.restAjax.path('api/role/permission/list/{roleId}', [roleId]), {
                permissionType: type
            }, null, function(code, data) {
                var formData = {};
                for(var i = 0, item; item = data[i++];) {
                    formData[item.apiTag +'['+ item.permissionId +']'] = true;
                }
                form.val("formData", formData);
                form.render('checkbox');

                var selectAllCheckboxs = $('.select-all');
                for(var i = 0, item; item = selectAllCheckboxs[i++];) {
                    initSelectAll(item.id);
                }
            }, function(code, data) {
                top.dialog.msg(data.msg);
            }, function() {
                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            }, function() {
                top.dialog.close(loadLayerIndex);
            });
        });

        // 权限 checkbox 多选
        form.on('checkbox(permissionAllFilter)', function(data) {
            var checkboxs = $('input[name^="'+ data.elem.id +'"]');
            var formData = {};
            if(data.elem.checked) {
                for(var i = 0, item; item = checkboxs[i++];) {
                    formData[item.name] = true;
                }
            } else {
                for(var i = 0, item; item = checkboxs[i++];) {
                    formData[item.name] = false;
                }
            }
            form.val("formData", formData);
            form.render('checkbox');
        });

        // 权限 checkbox 单选
        form.on('checkbox(permissionFilter)', function(data) {
            var name = data.elem.name.split('\[')[0];
            initSelectAll(name);
        });

        // 提交表单
        form.on('submit(submitForm)', function(formData) {
            var permissionIds = [];
            for(var k in formData.field) {
                permissionIds.push(k.substr(0, k.length - 1).replace('[', '_'))
            }
            top.dialog.confirm(top.dataMessage.commit, function(index) {
                top.dialog.close(index);
                var loadLayerIndex;
                top.restAjax.put(top.restAjax.path('api/role/permission/update/{roleId}', [roleId]), {
                    type: type,
                    permissionIds: permissionIds
                }, null, function(code, data) {
                    top.dialog.msg(top.dataMessage.updateSuccess, {
                        time: 0,
                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
                        shade: 0.3,
                        yes: function(index) {
                            top.dialog.close(index);
                            window.location.reload();
                        },
                        btn2: function() {
                            closeBox();
                        }
                    });
                }, function(code, data) {
                    top.dialog.msg(data.msg);
                }, function() {
                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
                }, function() {
                    top.dialog.close(loadLayerIndex);
                });
            });
            return false;
        });

        $('.close').on('click', function() {
            closeBox();
        });

        $(document).on('mouseenter', '.api-check', function(event) {
            layTipsIndex = layer.tips(this.title, this, {
                tips: 1,
                area: ['auto', 'auto']
            });
            event.stopPropagation();
        })
    });
</script>
</body>
</html>