{extend name="common/layout" /}
{block name="title"}操作日志{/block}
{block name="css"}
<link href="{$static}/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
{/block}
{block name="content"}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <div class="row align-items-center g-2">
          <div class="col"><h4 class="card-title mb-0">操作日志</h4></div>
          <div class="col-auto">
            <div class="d-flex flex-wrap gap-2">
              <button type="button" class="btn btn-success btn-sm" id="btn-export"><i class="ri-download-2-line"></i> 导出</button>
              <button type="button" class="btn btn-danger btn-sm" id="btn-delete"><i class="ri-delete-bin-line"></i> 删除</button>
              <button type="button" class="btn btn-light btn-sm" id="btn-refresh"><i class="ri-refresh-line"></i> 刷新</button>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <form class="row g-2 admin-toolbar admin-toolbar-nowrap mb-3" id="search-form">
          <div class="col">
            <input type="text" class="form-control form-control-sm" name="username" placeholder="管理员/昵称">
          </div>
          <div class="col">
            <select class="form-select form-select-sm" name="module">
              <option value="">全部模块</option>
              {volist name="modules" id="m"}
              <option value="{$m}">{$m}</option>
              {/volist}
            </select>
          </div>
          <div class="col">
            <input type="text" class="form-control form-control-sm" name="action" placeholder="动作 save/delete">
          </div>
          <div class="col">
            <select class="form-select form-select-sm" name="status">
              <option value="">全部状态</option>
              <option value="1">成功</option>
              <option value="0">失败</option>
            </select>
          </div>
          <div class="col">
            <input type="text" class="form-control form-control-sm js-datepicker" name="start_time" placeholder="开始日期" autocomplete="off">
          </div>
          <div class="col">
            <input type="text" class="form-control form-control-sm js-datepicker" name="end_time" placeholder="结束日期" autocomplete="off">
          </div>
          <div class="col">
            <input type="text" class="form-control form-control-sm" name="keyword" placeholder="标题/路径/IP/提示">
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-primary btn-sm" id="btn-search">搜索</button>
          </div>
        </form>
        <table id="data-table"></table>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script src="{$static}/js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="{$static}/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script>
function fmtTime(value) {
    if (!value) return '-';
    if (typeof value === 'string' && value.indexOf('-') > 0) return value;
    var d = new Date(value * 1000);
    if (isNaN(d.getTime())) return '-';
    var p = function (n) { return n < 10 ? '0' + n : n; };
    return d.getFullYear() + '-' + p(d.getMonth()+1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());
}

var $table = $('#data-table');
$table.bootstrapTable(AdminPage.tableDefaults({
    url: "{:url('/admin/oplog/list')}",
    pageList: [20, 50, 100],
    queryParams: function (params) { return AdminPage.queryFromForm('#search-form', params); },
    columns: [{
        checkbox: true
    }, {
        field: 'id', title: 'ID', width: 70
    }, {
        field: 'username', title: '管理员',
        formatter: function (v, row) {
            var name = v || '-';
            if (row.nickname && row.nickname !== v) {
                name += ' <small class="text-muted">(' + row.nickname + ')</small>';
            }
            return name;
        }
    }, {
        field: 'title', title: '操作'
    }, {
        field: 'module', title: '模块'
    }, {
        field: 'action', title: '动作', width: 80
    }, {
        field: 'method', title: '方法', width: 70
    }, {
        field: 'ip', title: 'IP', width: 120
    }, {
        field: 'status', title: '状态', width: 70,
        formatter: function (v) {
            return parseInt(v) === 1
                ? AdminPage.badge('成功', 'success')
                : AdminPage.badge('失败', 'danger');
        }
    }, {
        field: 'response_msg', title: '结果'
    }, {
        field: 'create_time', title: '时间', width: 160, formatter: fmtTime
    }, {
        field: 'operate', title: '操作', width: 140,
        formatter: function (v, row) {
            return '<button type="button" class="btn btn-sm btn-info me-1" onclick="showDetail('+row.id+')">详情</button>' +
                   '<button type="button" class="btn btn-sm btn-danger" onclick="deleteOne('+row.id+')">删除</button>';
        }
    }]
}));

$('#btn-search,#btn-refresh').on('click', function () { $table.bootstrapTable('refresh'); });

$('#btn-export').on('click', function () {
    var form = {};
    $('#search-form').serializeArray().forEach(function (item) { form[item.name] = item.value; });
    var q = $.param(form);
    window.location.href = "{:url('/admin/oplog/export')}" + (q ? ('?' + q) : '');
});

$('#btn-delete').on('click', function () {
    var rows = $table.bootstrapTable('getSelections');
    if (!rows.length) { AdminUI.notify('请选择数据', 'warning'); return; }
    AdminUI.confirm('确认删除选中日志？', function () {
        $.post("{:url('/admin/oplog/delete')}", { ids: rows.map(function (r) { return r.id; }) }, function (res) {
            AdminUI.result(res);
            if (res.code === 1) $table.bootstrapTable('refresh');
        }, 'json');
    });
});

function deleteOne(id) {
    AdminUI.confirm('确认删除该日志？', function () {
        $.post("{:url('/admin/oplog/delete')}", { id: id }, function (res) {
            AdminUI.result(res);
            if (res.code === 1) $table.bootstrapTable('refresh');
        }, 'json');
    });
}

function showDetail(id) {
    $.get("{:url('/admin/oplog/detail')}", { id: id }, function (res) {
        if (res.code !== 1 || !res.data) {
            AdminUI.result(res);
            return;
        }
        var d = res.data;
        var html = '<div class="text-start small lh-lg">' +
            '<p><b>ID：</b>' + d.id + '</p>' +
            '<p><b>管理员：</b>' + (d.username || '-') + (d.nickname ? ' (' + d.nickname + ')' : '') + '</p>' +
            '<p><b>标题：</b>' + (d.title || '-') + '</p>' +
            '<p><b>模块/动作：</b>' + (d.module || '-') + ' / ' + (d.action || '-') + '</p>' +
            '<p><b>请求：</b>' + (d.method || '-') + ' ' + (d.path || '-') + '</p>' +
            '<p><b>URL：</b><span class="text-break">' + (d.url || '-') + '</span></p>' +
            '<p><b>IP：</b>' + (d.ip || '-') + '</p>' +
            '<p><b>UA：</b><span class="text-break">' + (d.user_agent || '-') + '</span></p>' +
            '<p><b>状态：</b>' + (parseInt(d.status) === 1 ? '成功' : '失败') +
            '（code=' + (d.response_code || 0) + '，' + (d.response_msg || '') + '）</p>' +
            '<p><b>时间：</b>' + fmtTime(d.create_time) + '</p>' +
            '<p><b>请求参数：</b></p>' +
            '<pre class="p-2 rounded bg-light border overflow-auto" style="max-height:260px;white-space:pre-wrap;word-break:break-all">' +
            $('<div/>').text(d.request_pretty || d.request || '{}').html() +
            '</pre></div>';
        AdminUI.dialog({
            title: '日志详情',
            icon: 'ri-file-text-line',
            content: html,
            buttons: [{ text: '关闭', btnClass: 'btn-primary' }]
        });
    }, 'json');
}
</script>
{/block}