<!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 id="model-table" lay-filter="model-table"></table>
        </div>
    </div>

    <script type="text/html" id="model-toolbar">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i> 新增模型
        </button>
    </script>

    <script type="text/html" id="model-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>

    @verbatim
    <script type="text/html" id="model-status-tpl">
        <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="正常|禁用" lay-filter="model-status" {{ d.status == 1 ? 'checked' : '' }} />
    </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;

        $.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 cols = [[
            { type: 'checkbox', fixed: 'left' },
            { title: 'ID', field: 'id', align: 'center', width: 80, sort: true },
            { title: '名称', field: 'name', minWidth: 120, templet: function(d) {
                var html = d.name;
                if (d.is_default == 1) {
                    html += ' <span class="layui-badge layui-bg-orange" style="font-size:10px;">默认</span>';
                }
                return html;
            }},
            { title: '别名', field: 'alias', align: 'center', width: 120 },
            { title: '扩展表名', field: 'table_name', align: 'center', width: 160 },
            { title: '字段数', field: 'fields_count', align: 'center', width: 80 },
            { title: '分类数', field: 'categories_count', align: 'center', width: 80 },
            { title: '状态', field: 'status', align: 'center', width: 100, templet: '#model-status-tpl' },
            { title: '排序', field: 'sort', align: 'center', width: 80 },
            { title: '操作', toolbar: '#model-bar', align: 'center', width: 100, fixed: 'right' }
        ]];

        var inst = table.render({
            elem: '#model-table',
            url: '/api/admin/content-models',
            page: {
                layout: ['count', 'prev', 'page', 'next', 'limit'],
                groups: 5,
                limit: 20,
                limits: [10, 20, 50, 100]
            },
            cols: cols,
            skin: false,
            toolbar: '#model-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 : []
                };
            }
        });

        form.on('switch(model-status)', function(obj) {
            var id = this.value;
            $.ajax({
                url: '/api/admin/content-models/' + 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: 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(model-table)', function(obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                table.reload('model-table');
            }
        });

        table.on('tool(' + inst.config.id + ')', function(obj) {
            if (obj.event === 'more') {
                var menuData = [
                    { title: '编辑', id: 'edit' },
                    { title: '设计', id: 'design' }
                ];
                if (obj.data.is_default != 1) {
                    menuData.push({ title: '删除', id: 'del' });
                }
                dropdown.render({
                    elem: this,
                    show: true,
                    align: 'right',
                    data: menuData,
                    click: function(menudata) {
                        if (menudata.id === 'edit') {
                            window.edit(obj);
                        } else if (menudata.id === 'design') {
                            window.design(obj);
                        } else if (menudata.id === 'del') {
                            window.remove(obj);
                        }
                    }
                });
            }
        });

        window.add = function() {
            layer.open({
                type: 2,
                title: '新增模型',
                shade: 0.1,
                area: ['550px', '440px'],
                content: '/admin/content-model/form'
            });
        };

        window.edit = function(obj) {
            layer.open({
                type: 2,
                title: '编辑模型：' + obj.data.name,
                shade: 0.1,
                area: ['550px', '440px'],
                content: '/admin/content-model/form?id=' + obj.data.id
            });
        };

        window.design = function(obj) {
            window.open('/admin/content-model/design/' + obj.data.id, '_self');
        };

        window.remove = function(obj) {
            layer.confirm('确定要删除该模型？删除后无法恢复！', {
                icon: 3,
                title: '操作提示',
                btn: ['确定', '取消']
            }, function(index) {
                layer.close(index);
                var loading = layer.load();
                $.ajax({
                    url: '/api/admin/content-models/' + 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('model-table');
                            });
                        } else {
                            layer.msg(res.message || '删除失败', { icon: 2, time: 1000 });
                        }
                    },
                    error: function() {
                        layer.close(loading);
                        layer.msg('请求失败', { icon: 2, time: 1000 });
                    }
                });
            });
        };
    });
</script>
</body>
</html>
