<!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">
            <table class="layui-hide" id="category-table" lay-filter="category-table"></table>
        </div>
    </div>

    @verbatim
    <script type="text/html" id="category-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i> 添加分类
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="expandAll">
                <i class="layui-icon layui-icon-spread-left"></i> 展开
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="foldAll">
                <i class="layui-icon layui-icon-shrink-right"></i> 折叠
            </button>
        </div>
    </script>

    <script type="text/html" id="category-bar">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-xs" lay-event="more">操作 <i class="layui-icon layui-icon-down"></i></a>
        </div>
    </script>

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

    <script type="text/html" id="category-model-tpl">
        {{# if(d.model){ }}{{ d.model.name }}{{# } else { }}<span style="color:#999">未绑定</span>{{# } }}
    </script>
    @endverbatim
</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', 'dropdown'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var dropdown = layui.dropdown;
        var treeTable = layui.treeTable;

        $.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);
                    });
                }
            }
        });

        var inst = treeTable.render({
            elem: '#category-table',
            url: '/api/admin/content-categories',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh'
            }, 'filter', 'print', 'exports'],
            cellMinWidth: 80,
            maxHeight: ($(window).height() - 140) + 'px',
            tree: {
                view: {
                    expandAllDefault: false,
                    showIcon: false
                },
                data: {
                    idKey: 'id',
                    parentIdKey: 'parent_id'
                }
            },
            toolbar: '#category-toolbar',
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: 80, fixed: 'left', align: 'center', unresize: true },
                { field: 'name', title: '分类名称', minWidth: 150, align: 'left' },
                { field: 'content_model', title: '绑定模型', width: 120, align: 'center', templet: '#category-model-tpl' },
                { field: 'sort', title: '排序', width: 80, align: 'center' },
                { field: 'status', title: '状态', width: 100, align: 'center', templet: '#category-status-tpl' },
                { fixed: 'right', title: '操作', width: 100, align: 'center', toolbar: '#category-bar' }
            ]],
            parseData: function(res) {
                var data = res.data;
                if (Array.isArray(data)) {
                    return {
                        "code": res.code === 0 ? 0 : 1,
                        "msg": res.message || "",
                        "count": data.length,
                        "data": data
                    };
                }
                return {
                    "code": 1,
                    "msg": "数据格式错误",
                    "count": 0,
                    "data": []
                };
            }
        });

        treeTable.on('toolbar(category-table)', function(obj) {
            if (obj.event === 'refresh') {
                treeTable.reload('category-table');
            } else if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'expandAll') {
                treeTable.expandAll('category-table', true);
            } else if (obj.event === 'foldAll') {
                treeTable.expandAll('category-table', false);
            }
        });

        treeTable.on('tool(' + inst.config.id + ')', function(obj) {
            if (obj.event === 'more') {
                var hasModel = obj.data.model_id ? true : false;
                var menuData = [
                    { title: '编辑', id: 'edit' },
                    { title: '删除', id: 'del' }
                ];
                if (!hasModel) {
                    menuData.splice(1, 0, { title: '添加子分类', id: 'addChild' });
                }
                dropdown.render({
                    elem: this,
                    show: true,
                    align: 'right',
                    data: menuData,
                    click: function(menudata) {
                        if (menudata.id === 'edit') {
                            window.edit(obj);
                        } else if (menudata.id === 'del') {
                            window.remove(obj);
                        } else if (menudata.id === 'addChild') {
                            window.addChild(obj);
                        }
                    }
                });
            }
        });

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

        window.add = function() {
            layer.open({
                type: 2,
                title: '添加分类',
                shade: 0.1,
                maxmin: true,
                area: ['90vw', '600px'],
                content: '/admin/content-category/form'
            });
        };

        window.addChild = function(obj) {
            layer.open({
                type: 2,
                title: '添加子分类',
                shade: 0.1,
                maxmin: true,
                area: ['90vw', '600px'],
                content: '/admin/content-category/form?parent_id=' + obj.data.id
            });
        };

        window.edit = function(obj) {
            layer.open({
                type: 2,
                title: '编辑分类：' + obj.data.name,
                shade: 0.1,
                maxmin: true,
                area: ['90vw', '600px'],
                content: '/admin/content-category/form?id=' + obj.data.id
            });
        };

        window.remove = function(obj) {
            layer.confirm('确定要删除该分类？子分类将一并删除，删除后无法恢复！', {
                icon: 3,
                title: '操作提示',
                btn: ['确定', '取消']
            }, function(index) {
                layer.close(index);
                var loading = layer.load(2);
                $.ajax({
                    url: '/api/admin/content-categories/' + obj.data.id,
                    type: 'DELETE',
                    dataType: 'json',
                    success: function(res) {
                        layer.close(loading);
                        if (res.code === 0) {
                            layer.msg('删除成功', { icon: 1, time: 1000 }, function() {
                                obj.del();
                            });
                        } else {
                            layer.msg(res.message || '删除失败', { icon: 2, time: 2000 });
                        }
                    },
                    error: function() {
                        layer.close(loading);
                        layer.msg('请求失败', { icon: 2, time: 2000 });
                    }
                });
            });
        };

        window.refresh = function() {
            treeTable.reload('category-table');
        };
    });
</script>
</body>
</html>
