{% extends "base.html" %}

{% block title %}
  {% if info %}{{ info.name }} {{ info.code }} · 慢慢看{% else %}未找到 · 慢慢看{% endif %}
{% endblock %}

{% block content %}
{% if not_found %}
<section class="band">
  <div class="band-title">
    <span>本地缓存没有该代码数据</span>
    <a class="meta" href="{{ session_url(request, '/') }}">返回看盘台</a>
  </div>
  <div class="empty">代码：{{ code }}</div>
</section>
{% else %}
<div x-data="kanStockPage(window.KAN_STOCK)" x-cloak>
  <section class="band">
    <div class="band-title">
      <div>
        <strong>{{ info.name }} {{ info.code }}</strong>
        <span class="code">现价 {{ "%.2f"|format(info.price) if info.price is not none else "—" }}</span>
        {% if info.change_pct is not none %}
          <span class="{% if info.change_pct >= 0 %}change-up{% else %}change-down{% endif %}">
            {{ "%+.2f%%"|format(info.change_pct) }}
          </span>
        {% else %}
          <span class="meta">—</span>
        {% endif %}
      </div>
      <div class="controls">
        <button type="button" @click="addToWatchlist()" x-text="watchlistMsg" :disabled="watchlistMsg === '添加中'"></button>
        <a class="meta" href="{{ session_url(request, '/') }}">返回看盘台</a>
      </div>
    </div>
  </section>

  <section class="band">
    <div class="band-title">
      <div>
        <strong>先看三个关键周期</strong>
        <div class="meta">0 接近区间最低，100 接近区间最高；位置只描述价格坐标，不代表买卖信号。</div>
      </div>
      <span class="{% if info.stale %}notice{% else %}meta{% endif %}">
        数据截止 {{ info.data_cutoff or info.scan_date or "—" }}{% if info.stale %} · 需要更新{% endif %}
      </span>
    </div>
    <div class="summary-grid">
      {% for period in info.periods %}
        {% if period.period in (30, 60, 180) %}
        <div class="summary-cell position-gauge">
          <div class="field-label">{{ period.period }}日位置</div>
          <div class="field-value {% if period.position_pct is not none and period.position_pct <= 20 %}pct-low{% elif period.position_pct is not none and period.position_pct >= 80 %}pct-high{% endif %}">
            {{ "%.1f%%"|format(period.position_pct) if period.position_pct is not none else "—" }}
          </div>
          {% if period.position_pct is not none %}
          <div class="mini-track">
            <span class="mini-dot" style="--pct: {{ period.position_pct }}%;"></span>
          </div>
          {% endif %}
          <div class="meta">
            低 {{ "%.2f"|format(period.n_low) if period.n_low is not none else "—" }} ·
            高 {{ "%.2f"|format(period.n_high) if period.n_high is not none else "—" }}
          </div>
          {% if period.distance_to_low_pct is not none or period.gain_pct is not none %}
          <div class="meta">
            {% if period.distance_to_low_pct is not none %}距低 {{ "%.1f%%"|format(period.distance_to_low_pct) }}{% endif %}
            {% if period.distance_to_high_pct is not none %} · 距高 {{ "%.1f%%"|format(period.distance_to_high_pct) }}{% endif %}
          </div>
          {% endif %}
        </div>
        {% endif %}
      {% endfor %}
    </div>
  </section>

  <section class="band">
    <details class="detail-disclosure">
      <summary>查看全部周期位置标尺</summary>
      <div class="range-list">
      {% for period in info.periods %}
        <div class="range-row">
          <strong>{{ period.period }}日</strong>
          {% if period.position_pct is not none %}
            <div>
              <div class="range-track">
                <span class="range-dot" style="--pct: {{ period.position_pct }}%;"></span>
              </div>
              <div class="range-labels">
                <span>区间低点 {{ "%.2f"|format(period.n_low) if period.n_low is not none else "—" }}</span>
                <span>区间高点 {{ "%.2f"|format(period.n_high) if period.n_high is not none else "—" }}</span>
              </div>
            </div>
            <span class="meta">{{ "%.1f%%"|format(period.position_pct) }}</span>
          {% else %}
            <div class="meta">数据不可用</div>
            <span class="meta">—</span>
          {% endif %}
        </div>
      {% endfor %}
      </div>
    </details>
  </section>

  <section class="band">
    <div class="band-title">
      <span><span class="term-tip">一手计算器<span class="tip-icon">?</span><span class="tip-content">A 股最小交易单位 = 100 股。一手金额 = 现价 × 100。</span></span></span>
    </div>
    <div class="summary-grid">
      <div class="summary-cell">
        <div class="field-label">一手金额</div>
        <div class="field-value" x-text="lotAmount"></div>
        <div class="meta">现价 × 100 股</div>
      </div>
      <div class="summary-cell" x-show="cashAmount > 0">
        <div class="field-label">占你现金</div>
        <div class="field-value" x-text="lotPctOfCash"></div>
        <div class="meta" x-text="`现金 ${formatMoney(cashAmount)}`"></div>
      </div>
      <div class="summary-cell">
        <div class="field-label">距 180 日高点</div>
        <div class="field-value" x-text="distanceToHigh"></div>
        <div class="meta">还差多少到区间最高</div>
      </div>
      <div class="summary-cell">
        <div class="field-label">距 180 日低点</div>
        <div class="field-value" x-text="distanceToLow"></div>
        <div class="meta">距离区间最低多远</div>
      </div>
    </div>
  </section>

  <section class="band">
    <div class="band-title">
      <span>K 线走势</span>
      <div class="tabs">
        <button type="button" :class="{active: klineDays === 60}" @click="setKlineDays(60)">60日</button>
        <button type="button" :class="{active: klineDays === 120}" @click="setKlineDays(120)">120日</button>
        <button type="button" :class="{active: klineDays === 250}" @click="setKlineDays(250)">250日</button>
      </div>
    </div>
    <div id="kline-chart" class="chart tall" role="img" :aria-label="`${info.name} K 线走势图`" x-show="klineReady"></div>
    <div class="empty" x-show="!klineReady" x-text="klineMessage"></div>
  </section>

  <section class="band">
    <div class="band-title">
      <span>位置走势</span>
      <div class="tabs">
        <button type="button" :class="{active: period === 30}" @click="setPeriod(30)">30日</button>
        <button type="button" :class="{active: period === 60}" @click="setPeriod(60)">60日</button>
        <button type="button" :class="{active: period === 180}" @click="setPeriod(180)">180日</button>
        <button type="button" @click="exportHistoryCsv()" title="导出位置历史为 CSV">导出</button>
      </div>
    </div>
    <div id="history-chart" class="chart" role="img" :aria-label="`${info.name} ${period} 日价格位置走势`" x-show="historyReady"></div>
    <div class="empty" x-show="!historyReady" x-text="historyMessage"></div>
  </section>

  {% if info.board_context %}
  <section class="band">
    <div class="band-title">
      <span>行业位置对照</span>
      <span class="meta">{{ info.board_context.industry }} · 样本 {{ info.board_context.cached_sample }}/{{ info.board_context.constituent_count }} 只</span>
    </div>
    <div class="summary-grid">
      {% for bp in info.board_context.periods %}
        {% if bp.period in (30, 60, 180) %}
        <div class="summary-cell">
          <div class="field-label">{{ bp.period }}日</div>
          <div class="field-value">
            {{ "%.1f%%"|format(bp.stock_pct) if bp.stock_pct is not none else "—" }}
            {% if bp.rank and bp.rank_total %}
              <span class="meta">排 {{ bp.rank }}/{{ bp.rank_total }}</span>
            {% endif %}
          </div>
          <div class="meta">行业均值 {{ "%.1f%%"|format(bp.board_avg_pct) if bp.board_avg_pct is not none else "—" }}</div>
        </div>
        {% endif %}
      {% endfor %}
    </div>
  </section>
  {% endif %}

  <section class="band">
    <div class="band-title">
      <span>基础字段</span>
      <span class="meta">缺失项显示为 —</span>
    </div>
    <div class="grid-fields">
      <div class="field">
        <div class="field-label"><span class="term-tip">量价方向<span class="tip-icon">?</span><span class="tip-content">今天成交量和价格变化的配合方向。如“放量上涨”表示成交量放大且价格上涨。</span></span></div>
        <div class="field-value">{{ info.volume_price_state or (info.volume.state if info.volume else "—") }}</div>
      </div>
      <div class="field">
        <div class="field-label"><span class="term-tip">低点共振<span class="tip-icon">?</span><span class="tip-content">多个时间周期同时接近低位的数量。×N 表示有 N 个周期同时满足。</span></span></div>
        <div class="field-value">×{{ info.low_resonance }}</div>
      </div>
      <div class="field">
        <div class="field-label"><span class="term-tip">高点共振<span class="tip-icon">?</span><span class="tip-content">多个时间周期同时接近高位的数量。×N 表示有 N 个周期同时满足。</span></span></div>
        <div class="field-value">×{{ info.high_resonance }}</div>
      </div>
      <div class="field">
        <div class="field-label"><span class="term-tip">PE TTM<span class="tip-icon">?</span><span class="tip-content">市盈率（滚动 12 个月）= 股价 / 每股收益。反映市场对公司盈利的估值水平。</span></span></div>
        <div class="field-value">{{ "%.2f"|format(info.valuation.pe_ttm) if info.valuation.pe_ttm is not none else "—" }}</div>
      </div>
      <div class="field">
        <div class="field-label"><span class="term-tip">PB<span class="tip-icon">?</span><span class="tip-content">市净率 = 股价 / 每股净资产。反映市场对公司净资产的估值水平。</span></span></div>
        <div class="field-value">{{ "%.2f"|format(info.valuation.pb) if info.valuation.pb is not none else "—" }}</div>
      </div>
      <div class="field">
        <div class="field-label"><span class="term-tip">换手率<span class="tip-icon">?</span><span class="tip-content">当天成交量占流通股总数的比例。换手率高表示交易活跃。</span></span></div>
        <div class="field-value">{{ "%.2f%%"|format(info.valuation.turnover_rate) if info.valuation.turnover_rate is not none else "—" }}</div>
      </div>
      <div class="field">
        <div class="field-label"><span class="term-tip">股息率 TTM<span class="tip-icon">?</span><span class="tip-content">过去 12 个月分红 / 当前股价。反映持有股票的现金回报率。</span></span></div>
        <div class="field-value">{{ "%.2f%%"|format(info.valuation.dv_ttm) if info.valuation.dv_ttm is not none else "—" }}</div>
      </div>
      <div class="field">
        <div class="field-label"><span class="term-tip">量比<span class="tip-icon">?</span><span class="tip-content">当天成交量 / 过去 5 日平均成交量。量比 > 1 表示放量，< 1 表示缩量。</span></span></div>
        <div class="field-value">{{ "%.2f"|format(info.valuation.volume_ratio) if info.valuation.volume_ratio is not none else "—" }}</div>
      </div>
      <div class="field">
        <div class="field-label">估值日期</div>
        <div class="field-value">{{ info.valuation.trade_date or "—" }}</div>
      </div>
      <div class="field">
        <div class="field-label">数据说明</div>
        <div class="field-value"><span class="pill">缺失项未参与判断</span></div>
      </div>
    </div>
  </section>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if info %}
<script>
  window.KAN_STOCK = {{ info|tojson }};
</script>
{% endif %}
{% endblock %}