{% extends "base.html" %}
{% block title %}{{ contract }}{% endblock %}
{% block heading %}{{ contract }}{% endblock %}
{% block breadcrumb %}<a href="/contracts/">行情数据</a> / {{ contract }}{% endblock %}

{% block content %}
{% if latest %}
<div class="stat-grid">
  <div class="stat-card">
    <div class="label">最新收盘</div>
    <div class="value">{{ latest.close|int }}</div>
    <div class="trend">日期 {{ latest.date }}</div>
  </div>
  <div class="stat-card">
    <div class="label">次日预测振幅</div>
    <div class="value" style="color:var(--accent);">{{ next_amp if next_amp else '—' }}</div>
    <div class="trend">近5日均波幅</div>
  </div>
  <div class="stat-card">
    <div class="label">最新波幅</div>
    <div class="value">{{ latest.diff|int }} 点</div>
    <div class="trend">{{ latest.date }}</div>
  </div>
</div>
{% endif %}

<div class="section-title">日线数据</div>
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
  <p style="font-size:0.78rem;color:var(--sub);margin:0;">
    振幅 = 近 5 日 (最高−最低) 均值取整 · 点击振幅值查看计算过程
  </p>
  {% if rows|length > 7 %}
  <button id="toggle-all" class="btn" style="font-size:0.78rem;padding:4px 14px;background:var(--surface);color:var(--accent);border:1px solid var(--accent);border-radius:5px;cursor:pointer;" onclick="toggleAll()">显示全部 ({{ rows|length }}条)</button>
  {% endif %}
</div>

<div class="table-wrap">
<table id="bars-table">
  <tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>波幅</th><th>5日均振幅</th></tr>
  {% for row in rows %}
  <tr data-index="{{ loop.index0 }}" data-diff="{{ row.diff }}" data-date="{{ row.date }}" data-weekday="{{ row.weekday }}"{% if loop.index0 >= 7 %} class="extra-row" style="display:none;"{% endif %}>
    <td>{{ row.date }}</td>
    <td>{{ row.weekday }}</td>
    <td>{{ row.open }}</td>
    <td>{{ row.close }}</td>
    <td>{{ row.high }}</td>
    <td>{{ row.low }}</td>
    <td>{{ row.diff }}</td>
    <td>
      {% if row.has_amp %}
      <span class="amp-cell">{{ row.amp_5d }}</span>
      {% else %}
      <span class="na">—</span>
      {% endif %}
  {% endfor %}
  {% if next_date %}
  <tr style="background:var(--accent-light);font-weight:500;">
    <td>{{ next_date }}</td>
    <td>{{ next_weekday }}</td>
    <td class="na">—</td>
    <td class="na">—</td>
    <td class="na">—</td>
    <td class="na">—</td>
    <td class="na">—</td>
    <td><span style="color:var(--accent);font-weight:700;">{{ next_amp }}</span></td>
  </tr>
  {% endif %}
</table>
</div>

<script>

var allShown = false;
function toggleAll() {
  allShown = !allShown;
  var btn = document.getElementById('toggle-all');
  var rows = document.querySelectorAll('.extra-row');
  rows.forEach(function(r) { r.style.display = allShown ? '' : 'none'; });
  btn.textContent = allShown ? '收起' : '显示全部 ({{ rows|length }}条)';
}
document.querySelectorAll('.amp-cell').forEach(function(cell) {
  cell.addEventListener('click', function() {
    var row = cell.parentElement.parentElement;
    var tbl = document.getElementById('bars-table');
    var rows = tbl.querySelectorAll('tr');
    var idx = parseInt(row.dataset.index);
    if (idx < 5) return;

    document.getElementById('drawer-title').textContent = '{{ contract }}';
    document.getElementById('drawer-date').textContent = '目标: ' + row.dataset.date + ' ' + row.dataset.weekday + '  振幅 ' + cell.textContent.trim();

    var html = '<tr><td>日期</td><td>最高−最低</td></tr>';
    var sum = 0;
    for (var j = idx - 5; j < idx; j++) {
      var r = rows[j + 1];
      html += '<tr><td>' + r.dataset.date + ' ' + r.dataset.weekday + '</td><td>' + r.dataset.diff + '</td></tr>';
      sum += parseInt(r.dataset.diff);
    }
    document.getElementById('drawer-table').innerHTML = html;
    document.getElementById('drawer-result').innerHTML = '合计 <b>' + sum + '</b> &divide; 5 = <b>' + (sum / 5).toFixed(1) + '</b><br>四舍五入 &rarr; <b>' + Math.round(sum / 5) + '</b>';

    document.getElementById('overlay').classList.add('show');
    document.getElementById('drawer').classList.add('show');

    if (activeRow) activeRow.classList.remove('active');
    row.classList.add('active');
    activeRow = row;
  });
});
</script>
{% endblock %}