<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户组管理</title>
    <link rel="stylesheet" href="{{ asset('CmsProUi/component/pear/css/pear.css') }}">
    <link rel="stylesheet" href="{{ asset('CmsProUi/font-awesome/4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/admin.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/variables.css') }}">
    <link rel="stylesheet" href="{{ asset('Admin/css/reset.css') }}">
    @include('admin.partials.permission-script')
</head>
<body>
<div class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" placeholder="组名/标识" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">全部状态</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-md" lay-submit lay-filter="group-query">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-body">
            <table id="group-table" lay-filter="group-table"></table>
        </div>
    </div>

    <script type="text/html" id="group-toolbar">
        <button class="layui-btn layui-btn-sm" lay-event="add" data-permission="admin.user-group.store">
            <i class="layui-icon layui-icon-add-1"></i> 新增
        </button>
    </script>

    @verbatim
    <script type="text/html" id="group-status-tpl">
        <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="group-status" {{ d.status == 1 ? 'checked' : '' }} />
    </script>
    @endverbatim

    @verbatim
    <script type="text/html" id="group-default-tpl">
        {{# if(d.is_default == 1){ }}
        <span class="layui-badge layui-bg-orange">默认</span>
        {{# } else { }}
        <span class="layui-badge layui-bg-gray">-</span>
        {{# } }}
    </script>
    @endverbatim

    @verbatim
    <script type="text/html" id="group-color-tpl">
        {{# if(d.color){ }}
        <span style="display:inline-block;width:16px;height:16px;border-radius:50%;background-color:{{ d.color }};vertical-align:middle;"></span>
        {{# } else { }}
        -
        {{# } }}
    </script>
    @endverbatim

    <script type="text/html" id="group-bar">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-xs" lay-event="edit" data-permission="admin.user-group.update">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-permission="admin.user-group.destroy">删除</a>
        </div>
    </script>
</div>
<script src="{{ asset('CmsProUi/component/layui/layui.js') }}"></script>
<script src="{{ asset('CmsProUi/component/pear/pear.js') }}"></script>
<script>
    layui.use(['table', 'form', 'jquery'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            statusCode: {
                401: function() {
                    layer.msg('登录已过期，请重新登录', {icon: 2, time: 1500}, function() {
                        window.location.href = '/admin/login?redirect=' + encodeURIComponent(window.location.pathname + window.location.search);
                    });
                }
            }
        });

        // 根据权限隐藏工具栏按钮
        $('#group-toolbar [data-permission]').each(function() {
            if (!window.hasPermission || !window.hasPermission($(this).data('permission'))) {
                $(this).hide();
            }
        });

        var cols = [[
            { type: 'numbers', fixed: 'left' },
            { title: 'ID', field: 'id', align: 'center', width: 80, sort: true },
            { title: '组名', field: 'name', align: 'center', width: 150 },
            { title: '标识', field: 'code', align: 'center', width: 120 },
            { title: '颜色', field: 'color', align: 'center', width: 80, templet: '#group-color-tpl' },
            { title: '默认', field: 'is_default', align: 'center', width: 80, templet: '#group-default-tpl' },
            { title: '排序', field: 'sort', align: 'center', width: 80, sort: true },
            { title: '状态', field: 'status', align: 'center', width: 110, templet: '#group-status-tpl' },
            { title: '描述', field: 'description', align: 'center', minWidth: 160 },
            { title: '操作', toolbar: '#group-bar', align: 'center', width: 140, fixed: 'right' }
        ]];

        var inst = table.render({
            elem: '#group-table',
            url: '/api/admin/user-groups',
            page: {
                layout: ['count', 'prev', 'page', 'next', 'limit'],
                groups: 5,
                limit: 20,
                limits: [10, 20, 50, 100]
            },
            cols: cols,
            skin: false,
            toolbar: '#group-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh'
            }, 'filter', 'print', 'exports'],
            parseData: function(res) {
                return {
                    "code": res.code === 0 ? 0 : 1,
                    "msg": res.message || "",
                    "count": res.data && res.data.pagination ? res.data.pagination.total : 0,
                    "data": res.data ? res.data.items : []
                };
            },
            done: function() {
                // 根据权限隐藏行内操作按钮
                $('td [data-permission]').each(function() {
                    if (!window.hasPermission || !window.hasPermission($(this).data('permission'))) {
                        $(this).hide();
                    }
                });
            }
        });

        form.on('submit(group-query)', function(data) {
            table.reload('group-table', { where: data.field, page: { curr: 1 } });
            return false;
        });

        form.on('switch(group-status)', function(obj) {
            var id = this.value;
            $.ajax({
                url: '/api/admin/user-groups/' + id,
                type: 'PUT',
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify({ status: obj.elem.checked ? 1 : 0, name: '', code: '' }),
                success: function(res) {
                    if (res.code === 0) {
                        layer.msg('状态更新成功', { icon: 1, time: 1000 });
                    } else {
                        layer.msg(res.message || '操作失败', { icon: 2, time: 1000 });
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render();
                    }
                },
                error: function() {
                    layer.msg('请求失败', { icon: 2, time: 1000 });
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render();
                }
            });
        });

        table.on('toolbar(group-table)', function(obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                table.reload('group-table');
            }
        });

        table.on('tool(' + inst.config.id + ')', function(obj) {
            if (obj.event === 'edit') {
                window.edit(obj);
            } else if (obj.event === 'del') {
                window.remove(obj);
            }
        });

        window.add = function() {
            layer.open({
                type: 1,
                title: '新增用户组',
                shade: 0.1,
                area: ['500px', '480px'],
                content: '<form class="layui-form" lay-filter="group-add-form" style="padding:20px;">' +
                    '<div class="layui-form-item"><label class="layui-form-label">组名</label><div class="layui-input-block"><input type="text" name="name" lay-verify="required" placeholder="请输入组名" class="layui-input"></div></div>' +
                    '<div class="layui-form-item"><label class="layui-form-label">标识</label><div class="layui-input-block"><input type="text" name="code" lay-verify="required" placeholder="如 default/vip" class="layui-input"></div></div>' +
                    '<div class="layui-form-item"><label class="layui-form-label">颜色</label><div class="layui-input-block"><input type="text" name="color" placeholder="如 #5FB878" class="layui-input"></div></div>' +
                    '<div class="layui-form-item"><label class="layui-form-label">排序</label><div class="layui-input-block"><input type="number" name="sort" value="0" class="layui-input"></div></div>' +
                    '<div class="layui-form-item"><label class="layui-form-label">默认组</label><div class="layui-input-block"><input type="checkbox" name="is_default" lay-skin="switch" lay-text="是|否" value="1"></div></div>' +
                    '<div class="layui-form-item"><label class="layui-form-label">描述</label><div class="layui-input-block"><textarea name="description" placeholder="请输入描述" class="layui-textarea"></textarea></div></div>' +
                    '<div class="layui-form-item" style="text-align:center;"><button type="button" class="layui-btn" lay-submit lay-filter="group-add-submit">提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div>' +
                    '</form>'
            });
            form.render();
            form.on('submit(group-add-submit)', function(data) {
                var loading = layer.load();
                $.ajax({
                    url: '/api/admin/user-groups',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res) {
                        layer.close(loading);
                        if (res.code === 0) {
                            layer.msg('创建成功', { icon: 1, time: 1000 }, function() {
                                layer.closeAll();
                                table.reload('group-table');
                            });
                        } else {
                            layer.msg(res.message || '创建失败', { icon: 2, time: 1000 });
                        }
                    },
                    error: function() {
                        layer.close(loading);
                        layer.msg('请求失败', { icon: 2, time: 1000 });
                    }
                });
                return false;
            });
        };

        window.edit = function(obj) {
            var loading = layer.load();
            $.get('/api/admin/user-groups/' + obj.data.id, function(res) {
                layer.close(loading);
                if (res.code !== 0) {
                    layer.msg(res.message || '获取失败', { icon: 2 });
                    return;
                }
                var d = res.data;
                layer.open({
                    type: 1,
                    title: '编辑用户组：' + d.name,
                    shade: 0.1,
                    area: ['500px', '480px'],
                    content: '<form class="layui-form" lay-filter="group-edit-form" style="padding:20px;">' +
                        '<div class="layui-form-item"><label class="layui-form-label">组名</label><div class="layui-input-block"><input type="text" name="name" lay-verify="required" value="' + (d.name || '') + '" class="layui-input"></div></div>' +
                        '<div class="layui-form-item"><label class="layui-form-label">标识</label><div class="layui-input-block"><input type="text" name="code" lay-verify="required" value="' + (d.code || '') + '" class="layui-input"></div></div>' +
                        '<div class="layui-form-item"><label class="layui-form-label">颜色</label><div class="layui-input-block"><input type="text" name="color" value="' + (d.color || '') + '" placeholder="如 #5FB878" class="layui-input"></div></div>' +
                        '<div class="layui-form-item"><label class="layui-form-label">排序</label><div class="layui-input-block"><input type="number" name="sort" value="' + (d.sort || 0) + '" class="layui-input"></div></div>' +
                        '<div class="layui-form-item"><label class="layui-form-label">默认组</label><div class="layui-input-block"><input type="checkbox" name="is_default" lay-skin="switch" lay-text="是|否" value="1" ' + (d.is_default == 1 ? 'checked' : '') + '></div></div>' +
                        '<div class="layui-form-item"><label class="layui-form-label">描述</label><div class="layui-input-block"><textarea name="description" class="layui-textarea">' + (d.description || '') + '</textarea></div></div>' +
                        '<div class="layui-form-item" style="text-align:center;"><button type="button" class="layui-btn" lay-submit lay-filter="group-edit-submit">提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div>' +
                        '</form>'
                });
                form.render();
                form.on('submit(group-edit-submit)', function(data) {
                    var editLoading = layer.load();
                    $.ajax({
                        url: '/api/admin/user-groups/' + d.id,
                        type: 'PUT',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(data.field),
                        success: function(res) {
                            layer.close(editLoading);
                            if (res.code === 0) {
                                layer.msg('更新成功', { icon: 1, time: 1000 }, function() {
                                    layer.closeAll();
                                    table.reload('group-table');
                                });
                            } else {
                                layer.msg(res.message || '更新失败', { icon: 2, time: 1000 });
                            }
                        },
                        error: function() {
                            layer.close(editLoading);
                            layer.msg('请求失败', { icon: 2, time: 1000 });
                        }
                    });
                    return false;
                });
            });
        };

        window.remove = function(obj) {
            layer.confirm('确定要删除该用户组？', {
                icon: 3,
                title: '操作提示',
                btn: ['确定', '取消']
            }, function(index) {
                layer.close(index);
                var loading = layer.load();
                $.ajax({
                    url: '/api/admin/user-groups/' + obj.data.id,
                    type: 'DELETE',
                    dataType: 'json',
                    success: function(res) {
                        layer.close(loading);
                        if (res.code === 0) {
                            layer.msg('删除成功', { icon: 1, time: 1000 }, function() {
                                table.reload('group-table');
                            });
                        } else {
                            layer.msg(res.message || '删除失败', { icon: 2, time: 1000 });
                        }
                    },
                    error: function() {
                        layer.close(loading);
                        layer.msg('请求失败', { icon: 2, time: 1000 });
                    }
                });
            });
        };
    });
</script>
</body>
</html>
