{% extends "base.html" %}

{% block title %}找股票 · 慢慢看{% endblock %}

{% block content %}
<section class="band" x-data="kanFindPage()" x-cloak>
  <div class="band-title">
    <div>
      <strong>按你的条件找股票</strong>
      <div class="meta">条件由你设置，结果只说明哪些股票匹配，不代表推荐或买入信号。</div>
    </div>
  </div>

  <div class="stack">
    <div><strong>第一步：从哪里找</strong></div>
    <div class="controls">
      <label class="check"><input type="radio" value="watchlist" x-model="pool.type"> 自选</label>
      <label class="check"><input type="radio" value="holdings" x-model="pool.type"> 持仓</label>
      <label class="check"><input type="radio" value="codes" x-model="pool.type"> 自定义代码</label>
      <label class="check"><input type="radio" value="industry" x-model="pool.type"> 行业</label>
      <label class="check"><input type="radio" value="theme" x-model="pool.type"> 题材</label>
    </div>
    <textarea x-show="pool.type === 'codes'" x-model="pool.value" aria-label="自定义股票代码" placeholder="600519,000858 或每行一个代码"></textarea>
    <input x-show="pool.type === 'industry'" type="text" x-model="pool.value" aria-label="行业名称" placeholder="行业名称">
    <input x-show="pool.type === 'theme'" type="text" x-model="pool.value" aria-label="题材名称" placeholder="题材名称">
  </div>

  <div class="stack">
    <div class="toolbar" style="padding:0;border-bottom:0;">
      <div>
        <strong>第二步：设置要满足的条件</strong>
        <div class="meta">多条条件会同时生效。</div>
      </div>
      <div class="controls">
        <label class="check"><input type="checkbox" x-model="excludeSt"> 排除 ST</label>
        <button type="button" @click="addFilter()" :disabled="filters.length >= 6">添加条件</button>
      </div>
    </div>
    <div class="example-rules" aria-label="常用条件示例">
      <span class="meta">快速填入示例：</span>
      <button type="button" @click="applyExample('low180')">180日位置低于 10%</button>
      <button type="button" @click="applyExample('high180')">180日位置高于 90%</button>
      <button type="button" @click="applyExample('lowResonance')">至少 3 个周期接近低位</button>
    </div>
    <template x-if="filters.length === 0">
      <div class="empty" style="padding:10px 0;">还没有条件，可以添加一条或使用上面的示例。</div>
    </template>
    <template x-for="(filter, index) in filters" :key="filter.id">
      <div class="filter-row">
        <select x-model="filter.type" aria-label="条件类型">
          <option value="">选择条件</option>
          <option value="pos">价格区间位置</option>
          <option value="resonance">多周期同时接近低位/高位</option>
          <option value="pe">市盈率（PE TTM）</option>
          <option value="moneyflow">主力资金净额</option>
        </select>
        <select x-show="filter.type === 'pos'" x-model="filter.period" aria-label="周期">
          <option value="">周期</option>
          <option value="30">30日</option>
          <option value="60">60日</option>
          <option value="180">180日</option>
          <option value="360">360日</option>
        </select>
        <select x-show="filter.type === 'resonance'" x-model="filter.level" aria-label="共振方向">
          <option value="">方向</option>
          <option value="low">低点</option>
          <option value="high">高点</option>
        </select>
        <span x-show="filter.type !== 'pos' && filter.type !== 'resonance'"></span>
        <select x-show="filter.type !== 'resonance'" x-model="filter.op" aria-label="运算符">
          <option value="">比较方式</option>
          <option value="lt">小于</option>
          <option value="gt">大于</option>
        </select>
        <span x-show="filter.type === 'resonance'" class="meta">≥</span>
        <input type="number" step="any" x-model="filter.value" placeholder="数值" :aria-label="filterValueLabel(filter)">
        <span class="meta" x-text="filterUnit(filter)"></span>
        <span class="row-actions">
          <button type="button" @click="removeFilter(index)">删除</button>
        </span>
      </div>
    </template>
  </div>

  <div class="toolbar">
    <div class="controls">
      <button class="primary" type="button" @click="submit()" :disabled="loading" x-text="loading ? '正在查找' : '查看结果'"></button>
      <span class="meta" role="status" aria-live="polite" x-text="message"></span>
    </div>
  </div>

  <details class="advanced-panel">
    <summary>高级用法：复制到终端或交给 AI</summary>
    <div class="stack">
      <div class="toolbar" style="padding:0;border-bottom:0;">
        <span class="meta">这条命令与当前表单条件等价。</span>
        <button type="button" @click="copyCommand()">复制命令</button>
      </div>
      <pre class="command-box" x-text="cliCommand"></pre>
      <div class="meta" role="status" aria-live="polite" x-text="copyMessage"></div>
    </div>
  </details>

  <template x-if="result && result.message">
    <div class="toolbar"><span class="notice" x-text="result.message"></span></div>
  </template>

  <template x-if="result && result.rows.length === 0">
    <div class="empty">没有符合条件的股票</div>
  </template>

  <div x-show="result && result.rows.length > 0" class="table-wrap find-results-table">
    <table>
      <thead>
        <tr>
          <th>代码</th>
          <th>名称</th>
          <th>现价</th>
          <th>命中条件</th>
          <th>相关字段值</th>
          <template x-for="period in resultPeriods" :key="period">
            <th x-text="`${period}日位置%`"></th>
          </template>
        </tr>
      </thead>
      <tbody>
        <template x-for="row in (result ? result.rows : [])" :key="row.code">
          <tr>
            <td x-text="row.code"></td>
            <td><a class="stock-link" :href="kanSessionUrl(`/stock/${row.code}`)" x-text="row.name"></a></td>
            <td x-text="formatPrice(row.price)"></td>
            <td x-text="formatTriggers(row.triggered_text)"></td>
            <td x-text="formatMetrics(row.metrics)"></td>
            <template x-for="period in resultPeriods" :key="period">
              <td x-text="formatPct(row.positions[String(period)] ?? null)"></td>
            </template>
          </tr>
        </template>
      </tbody>
    </table>
  </div>

  <div x-show="result && result.rows.length > 0" class="find-result-list">
    <template x-for="row in (result ? result.rows : [])" :key="row.code">
      <article class="find-result-card">
        <div class="find-result-heading">
          <a class="stock-link" :href="kanSessionUrl(`/stock/${row.code}`)"><strong x-text="row.name"></strong> <span class="code" x-text="row.code"></span></a>
          <strong x-text="formatPrice(row.price)"></strong>
        </div>
        <div class="meta" x-text="formatTriggers(row.triggered_text)"></div>
        <div class="find-result-positions">
          <template x-for="period in resultPeriods" :key="period">
            <span><span x-text="`${period} 日 `"></span><strong x-text="formatPct(row.positions[String(period)] ?? null)"></strong></span>
          </template>
        </div>
        <div class="meta" x-show="row.metrics.length > 0" x-text="formatMetrics(row.metrics)"></div>
      </article>
    </template>
  </div>
</section>
{% endblock %}

{% block footer_extra %}<br>{{ find_disclaimer }}{% endblock %}

{% block scripts %}
<script src="/static/find.js"></script>
{% endblock %}