<!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') }}">
</head>
<body>
<div class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="logFilter">
                <div class="layui-form-item layui-inline-group">
                    <div class="layui-inline">
                        <label class="layui-form-label">应用</label>
                        <div class="layui-input-inline" style="width:150px;">
                            <select name="app_id" id="filterAppId">
                                <option value="">全部应用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">操作</label>
                        <div class="layui-input-inline" style="width:120px;">
                            <select name="operation" id="filterOperation">
                                <option value="">全部操作</option>
                                <option value="install">安装</option>
                                <option value="uninstall">卸载</option>
                                <option value="enable">启用</option>
                                <option value="disable">禁用</option>
                                <option value="upgrade">升级</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="btnSearch"><i class="fa fa-search"></i> 查询</button>
                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
                    </div>
                </div>
            </form>

            <table id="logTable" lay-filter="logTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="operation-tpl">
@verbatim
{{# if(d.operation === 'install'){ }}
    <span class="layui-badge layui-bg-green">安装</span>
{{# } else if(d.operation === 'uninstall'){ }}
    <span class="layui-badge">卸载</span>
{{# } else if(d.operation === 'enable'){ }}
    <span class="layui-badge layui-bg-blue">启用</span>
{{# } else if(d.operation === 'disable'){ }}
    <span class="layui-badge layui-bg-orange">禁用</span>
{{# } else if(d.operation === 'upgrade'){ }}
    <span class="layui-badge layui-bg-cyan">升级</span>
{{# } }}
@endverbatim
</script>

<script type="text/html" id="version-tpl">
@verbatim
{{# if(d.version_from && d.version_to){ }}
    {{d.version_from}} → {{d.version_to}}
{{# } else if(d.version_to){ }}
    {{d.version_to}}
{{# } else { }}
    -
{{# } }}
@endverbatim
</script>

<script type="text/html" id="result-tpl">
@verbatim
{{# if(d.result === 1){ }}
    <span style="color:#4caf50;"><i class="fa fa-check-circle"></i> 成功</span>
{{# } else { }}
    <span style="color:#f44336;"><i class="fa fa-times-circle"></i> 失败</span>
{{# } }}
@endverbatim
</script>

<script type="text/html" id="detail-tpl">
@verbatim
{{# if(d.detail){ }}
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
{{# } else { }}
    -
{{# } }}
@endverbatim
</script>

<script src="{{ asset('CmsProUi/component/layui/layui.js') }}"></script>
<script src="{{ asset('CmsProUi/component/pear/pear.js') }}"></script>
<script>
layui.use(['table', 'form', 'jquery', 'layer'], function(){
    var table = layui.table,
        form = layui.form,
        $ = layui.jquery,
        layer = layui.layer;

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

    $.get('/api/admin/apps', function(res) {
        if (res.code === 0) {
            var apps = res.data || [];
            apps.forEach(function(app) {
                $('#filterAppId').append('<option value="'+app.app_id+'">'+app.name+'</option>');
            });
            form.render('select');
        }
    });

    table.render({
        elem: '#logTable',
        url: '/api/admin/app-logs',
        page: true,
        limit: 15,
        limits: [10, 15, 30, 50],
        cols: [[
            {field: 'app_id', title: '应用', width: 120},
            {field: 'operation', title: '操作', width: 100, templet: '#operation-tpl', align: 'center'},
            {field: 'version_from', title: '版本变化', width: 160, templet: '#version-tpl', align: 'center'},
            {field: 'result', title: '结果', width: 90, templet: '#result-tpl', align: 'center'},
            {field: 'error_message', title: '错误信息', minWidth: 200, templet: function(d) {
                return d.error_message ? '<span style="color:#f44336;">'+d.error_message+'</span>' : '-';
            }},
            {field: 'operator_id', title: '操作人', width: 100, templet: function(d) {
                return d.operator ? d.operator.username : '-';
            }},
            {field: 'create_time', title: '时间', width: 170},
            {title: '详情', width: 90, templet: '#detail-tpl', align: 'center'}
        ]],
        parseData: function(res) {
            if (res.code !== 0) return {code:1, msg:res.message, count:0, data:[]};
            return {
                code: 0,
                msg: '',
                count: res.data.pagination.total,
                data: res.data.items
            };
        }
    });

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

    table.on('tool(logTable)', function(obj) {
        if (obj.event === 'detail') {
            var detail = obj.data.detail || {};
            var html = '<div style="padding:15px;"><table class="layui-table">';
            html += '<thead><tr><th>项目</th><th>详情</th></tr></thead><tbody>';
            for (var key in detail) {
                html += '<tr><td>'+key+'</td><td>'+JSON.stringify(detail[key])+'</td></tr>';
            }
            html += '</tbody></table></div>';
            layer.open({ type:1, title:'操作详情', area:['500px','400px'], content:html });
        }
    });
});
</script>
</body>
</html>
