@extends('admin.content')

@section('title', '访问统计')

@section('content')
@php $portal = $portal ?? 'admin'; @endphp
<div class="layui-card">
  <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-visit-search">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">时间</label>
        <div class="layui-input-block">
          <select name="range">
            <option value="30d" selected>近30天</option>
            <option value="7d">近7天</option>
            <option value="yesterday">昨日</option>
            <option value="today">今日</option>
          </select>
        </div>
      </div>
      @include('admin.partials.filter_channel_select')
      <div class="layui-inline">
        <label class="layui-form-label">系统</label>
        <div class="layui-input-block">
          <input type="text" name="os" class="layui-input" placeholder="如 iOS" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">系统版本</label>
        <div class="layui-input-block">
          <input type="text" name="os_version" class="layui-input" placeholder="如 16.6" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">浏览器</label>
        <div class="layui-input-block">
          <input type="text" name="browser" class="layui-input" placeholder="如 Safari" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">Referer</label>
        <div class="layui-input-block">
          <input type="text" name="referer" class="layui-input" placeholder="来源" autocomplete="off">
        </div>
      </div>
      @include('admin.partials.filter_agent_select')
      <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-visit-search">搜索</button>
      </div>
    </div>
  </form>
  <div class="layui-card-body">
    <div class="layui-form" style="margin-bottom:12px;">
      <div class="layui-inline">
        <label class="layui-form-label" style="width:auto;">分组</label>
        <div class="layui-input-inline" style="width:180px;">
          <select id="LAY-visit-group">
            <option value="os">系统</option>
            <option value="os_version">系统 + 版本</option>
            <option value="browser">浏览器</option>
            <option value="browser_version">浏览器 + 版本</option>
          </select>
        </div>
      </div>
    </div>
    <table class="layui-table" lay-size="sm">
      <thead><tr><th>分组</th><th>PV</th><th>UV</th></tr></thead>
      <tbody id="LAY-visit-groups"><tr><td colspan="3">—</td></tr></tbody>
    </table>
    <table id="LAY-visit-list" lay-filter="LAY-visit-list"></table>
  </div>
</div>
@endsection

@push('scripts')
<script>
layui.use(['table', 'form'], function () {
  var table = layui.table, form = layui.form, $ = layui.$;
  var portal = @json($portal);
  var where = { range: '30d' };

  if (window.CorunaFilterOptions) CorunaFilterOptions.apply(form);

  function loadGroups() {
    var g = $('#LAY-visit-group').val() || 'os';
    $.getJSON(@json(route($portal.'.visits.groups')), Object.assign({}, where, { group: g }), function (res) {
      if (!res || res.code !== 0) return;
      var html = '';
      (res.data.rows || []).forEach(function (r) {
        html += '<tr><td>' + (r.label || '—') + '</td><td>' + r.pv + '</td><td>' + r.uv + '</td></tr>';
      });
      $('#LAY-visit-groups').html(html || '<tr><td colspan="3">暂无</td></tr>');
    });
  }

  table.render({
    elem: '#LAY-visit-list',
    id: 'LAY-visit-list',
    url: @json(route($portal.'.visits.data')),
    where: where,
    cols: [[
      { field: 'id', title: 'ID', width: 70, sort: true },
      { field: 'channel_id', title: '渠道', minWidth: 160 },
      { field: 'client_uid', title: '访客 UID', width: 160 },
      { field: 'os', title: '系统', width: 90 },
      { field: 'os_version', title: '系统版本', width: 100 },
      { field: 'browser', title: '浏览器', width: 100 },
      { field: 'browser_version', title: '浏览器版本', width: 110 },
      { field: 'ip', title: 'IP', width: 130 },
      { field: 'referer', title: 'Referer', minWidth: 220 },
      { field: 'user_agent', title: 'UA', minWidth: 260 },
      { field: 'created_at', title: '时间', width: 170, sort: true }
    ]],
    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-visit-search)', function (data) {
    where = data.field;
    table.reload('LAY-visit-list', { where: where, page: { curr: 1 } });
    loadGroups();
    return false;
  });

  form.on('select', function (data) {
    if (data.elem && data.elem.id === 'LAY-visit-group') loadGroups();
  });
  $('#LAY-visit-group').on('change', loadGroups);

  form.render();
  loadGroups();
});
</script>
@endpush