{# Copyright (c) 2025-2026 马建军. All rights reserved. 专有软件，详见 LICENSE.zh-CN.txt #}
{% extends "base.html" %}
{% block title %}关键位监控 - 国内期货 · 交易复盘系统{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/keys.css') }}">
{% endblock %}
{% block content %}
<div class="split-grid">
    <div class="card">
        <h2>新增监控</h2>
        <div class="card-body">
            <details class="module-rules">
                <summary>规则说明</summary>
                <div class="module-rules-body">
                    <p><strong>箱体突破 / 收敛突破（自动单）</strong></p>
                    <ul>
                        <li>触发：<strong>上周期 K 线收盘</strong>收在上沿或下沿之外（默认 5 分）</li>
                        <li>箱体突破须选<strong>上方向</strong>，仅当突破后下单方向一致时才自动开仓</li>
                        <li>顺势：上破做多、下破做空；反转：上破做空、下破做多</li>
                        <li>自动<strong>市价开仓</strong>；止损 = 突破 K 线极值 ± 2 跳</li>
                        <li>盈亏比默认 2（可改）；开启移动保本时默认 3，达目标价自动止盈</li>
                    </ul>
                    <p><strong>关键支阻区（仅提醒）</strong></p>
                    <ul>
                        <li>上沿 = 阻力，下沿 = 支撑，合并为一个区间</li>
                        <li>上周期 K 线收盘突破 → 微信推送（最多 3 次，间隔约 5 分钟）</li>
                        <li>推送完毕后自动结案，<strong>不参与自动开仓</strong></li>
                    </ul>
                </div>
            </details>
            <form action="{{ url_for('add_key') }}" method="post" id="key-add-form">
                <div class="key-form-rows">
                    <div class="key-form-line line-3">
                        <div class="key-field symbol-wrap symbol-mains">
                            <label class="text-label">品种</label>
                            <input type="text" class="symbol-input" placeholder="输入中文或代码，选择主力合约" autocomplete="off" required>
                            <input type="hidden" name="symbol" required>
                            <input type="hidden" name="symbol_name">
                            <input type="hidden" name="market_code" required>
                            <input type="hidden" name="sina_code">
                            <div class="symbol-dropdown"></div>
                            <div class="symbol-selected"></div>
                        </div>
                        <div class="key-field">
                            <label class="text-label">类型</label>
                            <select name="type" id="key-type" required>
                                <option value="箱体突破">箱体突破</option>
                                <option value="收敛突破">收敛突破</option>
                                <option value="关键支阻区">关键支阻区</option>
                            </select>
                        </div>
                        <div class="key-field">
                            <label class="text-label">上周期</label>
                            <select name="bar_period" id="key-bar-period">
                                {% for p in key_periods %}
                                <option value="{{ p.key }}"{% if p.key == '5m' %} selected{% endif %}>{{ p.label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="key-form-line line-3" id="key-row-auto">
                        <div class="key-field" id="key-trade-mode-wrap">
                            <label class="text-label">模式</label>
                            <select name="trade_mode" id="key-trade-mode">
                                <option value="顺势">顺势</option>
                                <option value="反转">反转</option>
                            </select>
                        </div>
                        <div class="key-field" id="key-direction-wrap">
                            <label class="text-label">上方向</label>
                            <select name="direction" id="key-direction">
                                <option value="long">做多</option>
                                <option value="short">做空</option>
                            </select>
                        </div>
                        <div class="key-field" id="key-rr-wrap">
                            <label class="text-label">盈亏比</label>
                            <input name="risk_reward" id="key-rr" type="number" step="0.1" min="0.5" max="10" value="2">
                        </div>
                    </div>
                    <div class="key-form-line line-2" id="key-row-prices">
                        <div class="key-field">
                            <label class="text-label">上沿（阻力）</label>
                            <input name="upper" type="number" step="0.0001" required>
                        </div>
                        <div class="key-field">
                            <label class="text-label">下沿（支撑）</label>
                            <input name="lower" type="number" step="0.0001" required>
                        </div>
                    </div>
                    <div class="key-action-row" id="key-row-actions">
                        <label class="trailing-be-toggle" id="key-trailing-wrap">
                            <input type="checkbox" name="trailing_be" id="key-trailing" value="1">
                            <span>移动保本</span>
                        </label>
                        <p class="hint key-trailing-hint" id="key-trailing-hint">开启后盈亏比默认 3，达 3R 自动止盈并启用移动止损</p>
                        <button type="submit" class="btn-primary key-submit-btn">添加</button>
                    </div>
                </div>
            </form>
            <h3 class="section-label">监控列表</h3>
            <div class="list card-scroll" id="key-monitor-list">
                {% for k in keys %}
                <div class="list-item key-item" data-key-id="{{ k.id }}" style="padding:.75rem;font-size:.85rem">
                    <div>
                        <strong>{{ k.symbol_name or k.symbol }}</strong> {{ k.monitor_type }}
                        <span class="badge planned">{{ k.bar_period or '5m' }}</span>
                        {% if k.monitor_type in ('箱体突破', '收敛突破') %}
                        <span class="badge planned">{{ k.trade_mode or '顺势' }}</span>
                        {% if k.monitor_type == '箱体突破' and k.direction %}
                        <span class="badge profit">{{ '做多' if k.direction == 'long' else '做空' }}</span>
                        {% endif %}
                        {% endif %}
                        {% if k.trailing_be %}
                        <span class="badge profit">移动保本</span>
                        {% endif %}
                    </div>
                    <div class="key-live">
                        <span class="live-price-line">现价：<span class="live-price">--</span></span>
                        <span class="live-dist">距上<span class="dist-up">--</span> 距下<span class="dist-down">--</span></span>
                    </div>
                    <div>上沿 {{ k.upper }} · 下沿 {{ k.lower }}
                        {% if k.monitor_type in ('箱体突破', '收敛突破') %}
                        · 盈亏比 {{ k.risk_reward or 2 }}
                        {% endif %}
                    </div>
                    <a href="{{ url_for('del_key', pid=k.id) }}" class="btn-del" onclick="return confirm('移入历史？')">删</a>
                </div>
                {% else %}
                <div class="empty-hint">暂无监控</div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="card">
        <h2>监控历史</h2>
        <div class="card-body card-scroll">
            <table>
                <thead><tr><th>品种</th><th>类型</th><th>周期</th><th>模式</th><th>上沿</th><th>下沿</th><th>归档</th></tr></thead>
                <tbody>
                    {% for k in history %}
                    <tr>
                        <td>{{ k.symbol_name or k.symbol }}</td>
                        <td>{{ k.monitor_type }}</td>
                        <td>{{ k.bar_period or '5m' }}</td>
                        <td>
                            {% if k.monitor_type in ('箱体突破', '收敛突破') %}
                            {{ k.trade_mode or '顺势' }}
                            {% if k.monitor_type == '箱体突破' and k.direction %}
                            · {{ '做多' if k.direction == 'long' else '做空' }}
                            {% endif %}
                            {% if k.trailing_be %} · 移动保本{% endif %}
                            {% elif k.monitor_type in ('关键阻力位', '关键支撑位') %}
                            支阻区
                            {% else %}
                            提醒
                            {% endif %}
                        </td>
                        <td>{{ k.upper }}</td>
                        <td>{{ k.lower }}</td>
                        <td>{{ k.archived_at[:16] if k.archived_at else '' }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" class="text-muted">暂无历史</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/keys.js') }}"></script>
{% endblock %}