@extends('admin.content')

@section('title', '系统日志')

@section('content')
<div class="layui-card">
  <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-syslog-search">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">操作人</label>
        <div class="layui-input-block">
          <input type="text" name="username" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">操作内容</label>
        <div class="layui-input-block">
          <input type="text" name="keyword" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
          <select name="action">
            <option value="">全部</option>
            @foreach ($actions as $value => $label)
              <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-syslog-search">搜索</button>
      </div>
    </div>
  </form>
  <div class="layui-card-body">
    <table id="LAY-syslog-list" lay-filter="LAY-syslog-list"></table>
  </div>
</div>
@endsection

@push('scripts')
<script>
layui.use(['table', 'form'], function () {
  var table = layui.table, form = layui.form;
  table.render({
    elem: '#LAY-syslog-list',
    id: 'LAY-syslog-list',
    url: @json(route('admin.system.logs.data')),
    cols: [[
      { field: 'id', title: 'ID', width: 80, sort: true },
      { field: 'created_at', title: '时间', width: 170, sort: true },
      { field: 'actor_role', title: '身份', width: 90 },
      { field: 'actor_username', title: '操作人', width: 120 },
      { field: 'content', title: '操作内容', minWidth: 280 },
      { field: 'ip', title: 'IP', width: 140 }
    ]],
    page: true, limit: 20, limits: [10, 20, 30, 50],
    request: { pageName: 'page', limitName: 'limit' },
    response: { statusName: 'code', statusCode: 0, msgName: 'msg', countName: 'count', dataName: 'data' }
  });
  form.on('submit(LAY-syslog-search)', function (data) {
    table.reload('LAY-syslog-list', { where: data.field, page: { curr: 1 } });
    return false;
  });
});
</script>
@endpush