@extends('admin.content')

@section('title', $title)

@section('content')
@php
  $portal = $portal ?? 'admin';
  $isWhatsApp = (int) ($kind ?? 0) === \App\Models\PluginSession::KIND_WHATSAPP;
@endphp
<div class="layui-card">
  <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-session-search">
    <div class="layui-form-item">
      @include('admin.partials.filter_channel_select')
      <div class="layui-inline">
        <label class="layui-form-label">设备 ID</label>
        <div class="layui-input-block">
          <input type="text" name="device_key" class="layui-input" autocomplete="off">
        </div>
      </div>
      @include('admin.partials.filter_agent_select')
      <div class="layui-inline">
        <label class="layui-form-label">{{ $isWhatsApp ? '账号 / 手机' : '用户 ID' }}</label>
        <div class="layui-input-block">
          <input type="text" name="account_id" class="layui-input" autocomplete="off">
        </div>
      </div>
      <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-session-search">搜索</button>
      </div>
    </div>
  </form>
  <div class="layui-card-body">
    <table id="LAY-session-list" lay-filter="LAY-session-list"></table>
    <script type="text/html" id="LAY-session-ops">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="payload">参数</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">设备详情</a>
    </script>
  </div>
</div>
@endsection

@push('scripts')
<script>
layui.use(['table', 'form', 'layer'], function () {
  var table = layui.table, form = layui.form, layer = layui.layer;
  var isWhatsApp = @json($isWhatsApp);
  var dataUrl = @json($isWhatsApp ? route($portal.'.whatsapp.data') : route($portal.'.telegram.data'));
  if (window.CorunaFilterOptions) CorunaFilterOptions.apply(form);
  function esc(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  function yesNo(v) {
    return v ? '<span style="color:#16a34a;">有</span>' : '<span style="color:#94a3b8;">无</span>';
  }
  function dash(v) { return v ? v : '—'; }

  var cols = [
    { field: 'id', title: 'ID', width: 70, sort: true },
    { field: 'device_key', title: '设备 ID', width: 160 },
    { field: 'channel_id', title: '渠道 ID', width: 160, templet: function (d) { return dash(d.channel_id); } }
  ];
  if (isWhatsApp) {
    cols.push(
      { field: 'account_id', title: '账号', minWidth: 160, sort: true, templet: function (d) { return dash(d.account_id); } },
      { field: 'phone', title: '手机号', width: 150, templet: function (d) { return dash(d.phone); } },
      { field: 'nickname', title: '昵称', width: 140, templet: function (d) { return dash(d.nickname); } },
      { field: 'version', title: '版本', width: 110, templet: function (d) { return dash(d.version); } },
      { field: 'has_keystore', title: '密钥', width: 80, templet: function (d) { return yesNo(d.has_keystore); } }
    );
  } else {
    cols.push(
      { field: 'account_id', title: '用户 ID', minWidth: 160, sort: true, templet: function (d) { return dash(d.account_id); } },
      { field: 'has_state', title: '状态', width: 80, templet: function (d) { return yesNo(d.has_state); } },
      { field: 'has_db', title: 'DB', width: 80, templet: function (d) { return yesNo(d.has_db); } }
    );
  }
  cols.push(
    { field: 'created_at', title: '创建时间', width: 170, sort: true },
    { field: 'updated_at', title: '更新时间', width: 170, sort: true },
    { title: '操作', width: 170, align: 'center', fixed: 'right', toolbar: '#LAY-session-ops' }
  );

  table.render({
    elem: '#LAY-session-list',
    id: 'LAY-session-list',
    url: dataUrl,
    cols: [cols],
    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-session-search)', function (data) {
    table.reload('LAY-session-list', { where: data.field, page: { curr: 1 } });
    return false;
  });

  table.on('tool(LAY-session-list)', function (obj) {
    if (obj.event === 'payload') {
      var url = obj.data.payload_url;
      if (!url) {
        layer.msg('缺少参数地址');
        return;
      }
      var load = layer.load(1, { shade: 0.1 });
      fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
        .then(function (res) {
          return res.json().then(function (body) { return { ok: res.ok, body: body || {} }; })
            .catch(function () { return { ok: false, body: { msg: '参数接口返回了非 JSON' } }; });
        })
        .then(function (out) {
          layer.close(load);
          var body = out.body || {};
          var json = body.data && body.data.payload_json;
          if (!out.ok || body.code === 1 || !json) {
            layer.msg(body.msg || '加载参数失败');
            return;
          }
          var downloadUrl = (body.data && body.data.download_url) || obj.data.download_url || '';
          var downloadBtn = downloadUrl
            ? '<a class="layui-btn layui-btn-sm" href="' + esc(downloadUrl) + '" download>下载完整参数</a>'
            : '';
          layer.open({
            type: 1,
            title: (isWhatsApp ? 'WS 参数 #' : 'TG 参数 #') + obj.data.id,
            area: ['720px', '520px'],
            content: '<div style="margin:12px 12px 0;">' + downloadBtn + '</div>' +
              '<pre class="json-block" style="margin:12px;max-height:400px;">' +
              esc(json) + '</pre>'
          });
        })
        .catch(function () {
          layer.close(load);
          layer.msg('加载参数失败');
        });
      return;
    }
    if (obj.event !== 'detail') return;
    var url = obj.data.detail_url;
    var title = '设备 ' + (obj.data.device_key || ('#' + obj.data.id));
    try {
      if (parent && parent.layui && parent.layui.index) {
        parent.layui.index.openTabsPage(url, title);
        return;
      }
    } catch (e) {}
    location.href = url;
  });
});
</script>
@endpush