{% extends "base.html" %}

{% block title %}对比 · 慢慢看{% endblock %}

{% block content %}
<section class="band" x-data="kanComparePage()" x-cloak>
  <div class="band-title">
    <div>
      <strong>横向对比</strong>
      <div class="meta">选 2-5 只股票，并排展示位置、估值、资金流对比。</div>
      <div class="meta">缺失项显示为 —；估值与资金流需要在“数据设置”中配置 TuShare。</div>
    </div>
  </div>

  <div class="form-row">
    <label for="compare-codes"><strong>输入代码</strong></label>
    <input id="compare-codes" type="text" inputmode="text" autocapitalize="none" x-model="codesInput" placeholder="输入 2-5 个代码，如 600519、sh000858 或 920000.BJ">
    <button class="primary" type="button" @click="doCompare()" :disabled="loading || !codesInput.trim()">
      <span x-text="loading ? '对比中' : '开始对比'"></span>
    </button>
    <span class="meta" role="status" x-text="message"></span>
  </div>

  <template x-if="stocks.length > 0">
    <div class="compare-scroll">
    <div class="compare-grid" :style="`grid-template-columns: 140px repeat(${stocks.length}, minmax(120px, 1fr)); min-width: ${140 + stocks.length * 120}px`">
      <div class="compare-header"></div>
      <template x-for="stock in stocks" :key="stock.code">
        <div class="compare-header">
          <a class="stock-link" :href="kanSessionUrl(`/stock/${stock.code}`)">
            <strong x-text="stock.name"></strong>
          </a>
          <span class="code" x-text="stock.code"></span>
        </div>
      </template>

      <div class="compare-label">现价</div>
      <template x-for="stock in stocks" :key="'price-' + stock.code">
        <div class="compare-value" x-text="formatPrice(stock.price)"></div>
      </template>

      <div class="compare-label">今日涨跌</div>
      <template x-for="stock in stocks" :key="'change-' + stock.code">
        <div class="compare-value" :class="stock.change_pct >= 0 ? 'change-up' : 'change-down'" x-text="stock.change_pct !== null ? (stock.change_pct >= 0 ? '+' : '') + stock.change_pct.toFixed(2) + '%' : '—'"></div>
      </template>

      <div class="compare-label">行情日期</div>
      <template x-for="stock in stocks" :key="'cutoff-' + stock.code">
        <div class="compare-value" x-text="stock.dataCutoff || '—'"></div>
      </template>

      <div class="compare-label">30日位置</div>
      <template x-for="stock in stocks" :key="'p30-' + stock.code">
        <div class="compare-value" :class="posClass(stock.p30)" x-text="formatPct(stock.p30)"></div>
      </template>

      <div class="compare-label">60日位置</div>
      <template x-for="stock in stocks" :key="'p60-' + stock.code">
        <div class="compare-value" :class="posClass(stock.p60)" x-text="formatPct(stock.p60)"></div>
      </template>

      <div class="compare-label">180日位置</div>
      <template x-for="stock in stocks" :key="'p180-' + stock.code">
        <div class="compare-value" :class="posClass(stock.p180)" x-text="formatPct(stock.p180)"></div>
      </template>

      <div class="compare-label">低点共振</div>
      <template x-for="stock in stocks" :key="'lowres-' + stock.code">
        <div class="compare-value" x-text="'×' + stock.low_resonance"></div>
      </template>

      <div class="compare-label">高点共振</div>
      <template x-for="stock in stocks" :key="'highres-' + stock.code">
        <div class="compare-value" x-text="'×' + stock.high_resonance"></div>
      </template>

      <div class="compare-label">PE TTM</div>
      <template x-for="stock in stocks" :key="'pe-' + stock.code">
        <div class="compare-value" x-text="stock.pe !== null ? stock.pe.toFixed(2) : '—'"></div>
      </template>

      <div class="compare-label">PB</div>
      <template x-for="stock in stocks" :key="'pb-' + stock.code">
        <div class="compare-value" x-text="stock.pb !== null ? stock.pb.toFixed(2) : '—'"></div>
      </template>

      <div class="compare-label">换手率</div>
      <template x-for="stock in stocks" :key="'turnover-' + stock.code">
        <div class="compare-value" x-text="stock.turnover !== null ? stock.turnover.toFixed(2) + '%' : '—'"></div>
      </template>

      <div class="compare-label">股息率</div>
      <template x-for="stock in stocks" :key="'dv-' + stock.code">
        <div class="compare-value" x-text="stock.dv !== null ? stock.dv.toFixed(2) + '%' : '—'"></div>
      </template>

      <div class="compare-label">估值日期</div>
      <template x-for="stock in stocks" :key="'valuation-date-' + stock.code">
        <div class="compare-value" x-text="stock.valuationDate || '—'"></div>
      </template>

      <div class="compare-label">单日主力净额</div>
      <template x-for="stock in stocks" :key="'moneyflow-' + stock.code">
        <div class="compare-value" x-text="formatAmount(stock.moneyflow)"></div>
      </template>

      <div class="compare-label">近5日主力净额</div>
      <template x-for="stock in stocks" :key="'moneyflow5-' + stock.code">
        <div class="compare-value" x-text="formatAmount(stock.moneyflow5)"></div>
      </template>

      <div class="compare-label">资金流日期</div>
      <template x-for="stock in stocks" :key="'moneyflow-date-' + stock.code">
        <div class="compare-value" x-text="stock.moneyflowDate || '—'"></div>
      </template>

      <div class="compare-label">一手金额</div>
      <template x-for="stock in stocks" :key="'lot-' + stock.code">
        <div class="compare-value" x-text="stock.price ? '¥' + (stock.price * 100).toLocaleString('zh-CN', {maximumFractionDigits: 0}) : '—'"></div>
      </template>
    </div>
    </div>
  </template>

  <template x-if="stocks.length === 0 && !loading">
    <div class="empty empty-guide">
      <div class="empty-icon">⚖️</div>
      <strong>输入代码开始对比</strong>
      <p>在上方输入 2-5 个股票代码，并排查看位置、估值和资金流数据。</p>
    </div>
  </template>
</section>
{% endblock %}

{% block scripts %}
<script>
function kanComparePage() {
  return {
    codesInput: "",
    stocks: [],
    loading: false,
    message: "",
    async doCompare() {
      var raw = this.codesInput.trim();
      if (!raw) return;
      var tokens = raw.split(/[\s,，;；]+/).filter(Boolean);
      var normalized = tokens.map(function(token) {
        var code = token
          .replace(/^(sh|sz|bj)[.:]?/i, "")
          .replace(/[.:]?(sh|sz|bj)$/i, "");
        return /^\d{6}$/.test(code) ? code : null;
      });
      var invalid = tokens.filter(function(_token, index) { return normalized[index] === null; });
      if (invalid.length > 0) {
        this.message = "请输入有效的 6 位股票代码：" + invalid.slice(0, 3).join("、");
        return;
      }
      var codes = Array.from(new Set(normalized));
      if (codes.length !== normalized.length) {
        this.message = "请删除重复的股票代码";
        return;
      }
      if (codes.length < 2) {
        this.message = "请输入至少 2 个有效的 6 位代码";
        return;
      }
      if (codes.length > 5) {
        this.message = "最多对比 5 只股票";
        return;
      }
      this.loading = true;
      this.message = "正在读取数据";
      this.stocks = [];
      try {
        var response = await kanFetch("/api/compare", {
          method: "POST",
          headers: { "Content-Type": "application/json", "X-Kan-Web": "1" },
          body: JSON.stringify({ codes: codes }),
        });
        var payload = await response.json().catch(function() { return {}; });
        if (!response.ok) {
          this.message = payload.detail || "对比数据加载失败";
          return;
        }
        var results = (payload.stocks || []).map(this.toStock);
        var failures = payload.errors || [];
        this.stocks = results.length >= 2 ? results : [];
        if (results.length >= 2 && failures.length === 0) {
          this.message = "已对比 " + results.length + " 只股票";
        } else if (results.length >= 2) {
          this.message = "已对比 " + results.length + " 只；未载入 " + failures.map((item) => item.code).join("、");
        } else {
          var failedText = failures.map((item) => item.code + "（" + item.message + "）").join("、");
          this.message = "至少需要 2 只有行情数据的股票" + (failedText ? "；" + failedText : "");
        }
      } catch(_) {
        this.message = "对比数据加载失败，请稍后重试";
      } finally {
        this.loading = false;
      }
    },
    toStock(data) {
      var positions = {};
      (data.periods || []).forEach(function(p) { positions[p.period] = p.position_pct; });
      return {
        code: data.code,
        name: data.name,
        price: data.price,
        change_pct: data.change_pct,
        dataCutoff: data.data_cutoff || data.scan_date,
        p30: positions[30] ?? null,
        p60: positions[60] ?? null,
        p180: positions[180] ?? null,
        low_resonance: data.low_resonance || 0,
        high_resonance: data.high_resonance || 0,
        pe: data.valuation ? data.valuation.pe_ttm : null,
        pb: data.valuation ? data.valuation.pb : null,
        turnover: data.valuation ? data.valuation.turnover_rate : null,
        dv: data.valuation ? data.valuation.dv_ttm : null,
        valuationDate: data.valuation ? data.valuation.trade_date : null,
        moneyflow: data.moneyflow ? data.moneyflow.net_amount : null,
        moneyflow5: data.moneyflow ? data.moneyflow.net_amount_5d : null,
        moneyflowDate: data.moneyflow ? data.moneyflow.trade_date : null,
      };
    },
    formatPrice(v) {
      return v === null || v === undefined ? "—" : Number(v).toFixed(2);
    },
    formatPct(v) {
      return v === null || v === undefined ? "—" : Number(v).toFixed(1) + "%";
    },
    formatAmount(v) {
      if (v === null || v === undefined) return "—";
      return Number(v).toLocaleString("zh-CN", { maximumFractionDigits: 2 }) + " 万元";
    },
    posClass(v) {
      if (v === null || v === undefined) return "";
      if (v <= 20) return "pct-low";
      if (v >= 80) return "pct-high";
      return "";
    },
  };
}
</script>
{% endblock %}