{% 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="all" 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="题材名称">
    <p class="meta" x-show="pool.type === 'all'">全市场扫描需要在“数据设置”配置 TuShare token；股东与 ROE 条件请改用其他候选池。</p>
  </div>

  <div class="stack">
    <div class="toolbar" style="padding:0;border-bottom:0;">
      <div>
        <strong>第二步：设置要满足的条件</strong>
        <div class="meta">最多 {{ find_max_filters }} 条；可选择满足全部条件（AND）或任一条件（OR）。</div>
      </div>
      <div class="controls">
        <label class="check"><input type="radio" name="find-match-mode" value="all" x-model="matchMode"> 满足全部</label>
        <label class="check"><input type="radio" name="find-match-mode" value="any" x-model="matchMode"> 满足任一</label>
        <label class="check"><input type="checkbox" x-model="excludeSt"> 排除 ST</label>
        <button type="button" @click="addFilter()" :disabled="filters.length >= maxFilters">添加条件</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" @change="normalizeFilter(filter)" aria-label="条件类型">
          <option value="">选择条件</option>
          {% for group in find_filter_groups %}
          <optgroup label="{{ group.label }}">
            {% for option in group.options %}
            <option value="{{ option.type }}"{% if not option.supports_all %} :disabled="pool.type === 'all'"{% endif %}>{{ option.label }}{% if not option.supports_all %}（全市场不支持）{% endif %}</option>
            {% endfor %}
          </optgroup>
          {% endfor %}
        </select>
        <input x-show="needsPeriod(filter)" type="number" min="2" max="360" step="1" x-model="filter.period" aria-label="周期（2至360日）" placeholder="周期 2-360日">
        <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="!needsPeriod(filter) && filter.type !== 'resonance'"></span>
        <select x-model="filter.op" aria-label="运算符">
          <option value="">比较方式</option>
          <option value="lt">小于</option>
          <option value="lte">小于等于</option>
          <option value="gt">大于</option>
          <option value="gte">大于等于</option>
          <option value="eq">等于</option>
          <option value="ne">不等于</option>
        </select>
        <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 class="notice" x-show="pool.type === 'all' && filter.type && !supportsAll(filter)">该条件不支持全市场，请更换候选池。</div>
      </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="toolbar">
    <span class="meta" x-text="resultSummary"></span>
    <div class="controls">
      <select x-model="sortKey" @change="page = 1; batchMsg = '本页加入自选'" aria-label="排序字段">
        <option value="">默认顺序</option>
        <template x-for="option in sortOptions" :key="option.key">
          <option :value="option.key" x-text="option.label"></option>
        </template>
      </select>
      <button type="button" @click="sortDir = sortDir === 'desc' ? 'asc' : 'desc'; page = 1; batchMsg = '本页加入自选'" x-text="sortDir === 'desc' ? '↓ 降序' : '↑ 升序'"></button>
      <button type="button" @click="addAllToWatchlist()" x-text="batchMsg"></button>
    </div>
  </div>

  <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 sortedRows" :key="row.code">
          <tr @click="window.location.href = kanSessionUrl(`/stock/${row.code}`)" style="cursor:pointer;">
            <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 sortedRows" :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>
          <div class="controls">
            <button type="button" @click="addToWatchlist(row.code)" :disabled="row.in_watchlist === true || row._added === true" x-text="row.in_watchlist === true || row._added === true ? '已在自选 ✓' : '+ 自选'"></button>
            <strong x-text="formatPrice(row.price)"></strong>
          </div>
        </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>

  <div x-show="result && result.rows.length > pageSize" class="toolbar" aria-label="结果分页">
    <button type="button" @click="page = Math.max(1, page - 1); batchMsg = '本页加入自选'; window.scrollTo({top: 0, behavior: 'smooth'})" :disabled="page <= 1">上一页</button>
    <span class="meta" x-text="`第 ${page}/${totalPages} 页 · ${pageStart}-${pageEnd} / ${result ? result.rows.length : 0}`"></span>
    <button type="button" @click="page = Math.min(totalPages, page + 1); batchMsg = '本页加入自选'; window.scrollTo({top: 0, behavior: 'smooth'})" :disabled="page >= totalPages">下一页</button>
  </div>
</section>
{% endblock %}

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

{% block scripts %}
<script>
window.KAN_FIND_FILTERS = {{ find_filter_options|tojson }};
window.KAN_FIND_MAX_FILTERS = {{ find_max_filters }};
</script>
<script src="/static/find.js"></script>
{% endblock %}