{% extends "base.html" %}
{% block title %}数据统计 · 期权中控{% endblock %}
{% block body %}
<section class="page-head stats-head">
  <div>
    <p class="settings-eyebrow">Analytics</p>
    <h1>数据统计</h1>
    <p class="muted settings-lead">多机 KPI 对比与累计已实现盈亏曲线。划转/提现不影响曲线。后台常驻刷新,打开即读缓存。</p>
  </div>
  <div class="stats-window-tabs" id="stats-window-tabs" role="tablist">
    <button type="button" class="stats-win-btn" data-window="today">今日</button>
    <button type="button" class="stats-win-btn is-active" data-window="7d">近7日</button>
    <button type="button" class="stats-win-btn" data-window="30d">近30日</button>
    <button type="button" class="stats-win-btn" data-window="all">全部</button>
  </div>
</section>

<p class="muted" id="stats-status">读取缓存…</p>

<section class="panel stats-kpi-panel" id="stats-kpi-panel">
  <div class="stats-kpi-grid" id="stats-kpi-grid"></div>
</section>

<section class="panel stats-table-panel">
  <div class="stats-card-head-inline">
    <div>
      <h2>机器对比</h2>
      <p class="muted">实时资金状态 + 当前窗口交易 KPI。排序：模拟在上、实盘在下。收益率 = 窗口已结算盈亏 ÷ 初始资金。</p>
    </div>
  </div>
  <div class="overview-table-wrap">
    <table class="overview-table stats-table" id="stats-table">
      <thead>
        <tr>
          <th>机器</th>
          <th>状态</th>
          <th>模式</th>
          <th>余额</th>
          <th>权利金</th>
          <th>浮盈</th>
          <th>笔数</th>
          <th>胜率</th>
          <th>已实现</th>
          <th>收益率</th>
          <th>均持仓</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="stats-table-body">
        <tr><td colspan="12" class="muted">加载中…</td></tr>
      </tbody>
    </table>
  </div>
</section>

<section class="panel stats-curve-panel stats-curve-panel--large">
  <div class="stats-card-head-inline">
    <div>
      <h2>已实现盈亏曲线</h2>
      <p class="muted">主指标为各机累计已实现盈亏(期权平仓真盈亏U累加)。可勾选机器叠加对比。</p>
    </div>
    <label class="stats-curve-toggle">
      <input type="checkbox" id="stats-show-total" checked>
      显示合计
    </label>
  </div>
  <div class="stats-machine-picker" id="stats-machine-picker" aria-label="选择机器"></div>
  <div class="stats-chart-wrap stats-chart-wrap--large">
    <canvas id="stats-curve-canvas" width="960" height="480"></canvas>
    <div class="stats-chart-empty muted" id="stats-curve-empty" hidden>暂无已实现盈亏数据;实例更新并有平仓记录后显示。</div>
  </div>
  <div class="stats-legend" id="stats-curve-legend"></div>
</section>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='stats.js') }}?v=5"></script>
{% endblock %}