<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="/static/instance_theme.js?v=5"></script>
    <title>{{ exchange_display }} | 实盘下单放大</title>
    <link rel="stylesheet" href="/static/instance_theme.css?v=5">
    <link rel="stylesheet" href="/static/focus_chart_page.css?v=1">
</head>
<body class="focus-page">
<div class="container">
    <div class="card">
        <div class="row" style="justify-content:space-between">
            <div class="theme-toggle instance-theme-toggle" role="group" aria-label="界面主题">
                <button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
                    <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                        <path fill="currentColor" d="M12.1 3a9 9 0 1 0 8.9 11 6.5 6.5 0 1 1-8.9-11z"/>
                    </svg>
                </button>
                <button type="button" class="theme-toggle-btn" data-theme-value="light" aria-pressed="false" title="亮色主题">
                    <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
                    </svg>
                </button>
            </div>
            <div class="row">
                <a class="btn" href="/">返回首页</a>
                <strong class="focus-title">实盘下单放大(100根K线)</strong><span class="exchange-tag">{{ exchange_display }}</span>
            </div>
            <div class="status">最近刷新:<span id="updated-at">--</span></div>
        </div>
        {% if orders %}
        <div class="row" style="margin-top:10px">
            <label>订单</label>
            <select id="order-id">
                {% for o in orders %}
                <option value="{{ o.id }}" {% if selected_order and o.id == selected_order.id %}selected{% endif %}>
                    #{{ o.id }} {{ o.symbol }} {{ '做多' if o.direction == 'long' else '做空' }}
                </option>
                {% endfor %}
            </select>
            <label>周期</label>
            <select id="timeframe">
                {% for tf in ['1m','3m','5m','15m','30m','1h','4h','1d'] %}
                <option value="{{ tf }}" {% if tf == default_timeframe %}selected{% endif %}>{{ tf }}</option>
                {% endfor %}
            </select>
            <button id="manual-refresh" type="button">刷新</button>
            <span id="load-status" class="status"></span>
        </div>
        {% else %}
        <div class="empty">当前没有激活订单,无法展示放大K线.</div>
        {% endif %}
    </div>

    {% if orders %}
    <div class="card">
        <div class="meta">
            <div class="meta-item meta-item--emph"><div class="k">交易对</div><div class="v" id="m-symbol">-</div></div>
            <div class="meta-item meta-item--emph"><div class="k">方向</div><div class="v" id="m-direction">-</div></div>
            <div class="meta-item"><div class="k">成交价</div><div class="v" id="m-entry">-</div></div>
            <div class="meta-item"><div class="k">止损</div><div class="v" id="m-sl">-</div></div>
            <div class="meta-item"><div class="k">止盈</div><div class="v" id="m-tp">-</div></div>
            <div class="meta-item"><div class="k">盈亏比</div><div class="v" id="m-rr">-</div></div>
            <div class="meta-item"><div class="k">移动保本</div><div class="v" id="m-breakeven">-</div></div>
            <div class="meta-item"><div class="k">现价</div><div class="v" id="m-price">-</div></div>
            <div class="meta-item meta-item--emph meta-item--pnl"><div class="k">浮盈亏</div><div class="v" id="m-pnl">-</div></div>
        </div>
    </div>
    <div class="card">
        <div id="chart-wrap"><div id="chart"></div></div>
    </div>
    {% endif %}
</div>

{% if orders %}
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="/static/focus_chart_page.js?v=2"></script>
<script>
const refreshMs = Math.max({{ price_refresh_seconds * 1000 }}, 5000);
const orderSelect = document.getElementById("order-id");
const tfSelect = document.getElementById("timeframe");
const statusEl = document.getElementById("load-status");
const updatedAtEl = document.getElementById("updated-at");
const chartHost = document.getElementById("chart");
const FCP = window.FocusChartPage;
let fc = null;

function ensureChart(){
    if(fc && fc.ensureSeries()) return true;
    if(!window.LightweightCharts){
        statusEl.className = "status err";
        statusEl.innerText = "图表库加载失败";
        return false;
    }
    fc = FCP.createFocusChart(chartHost);
    if(!fc || !fc.ensureSeries()){
        statusEl.className = "status err";
        statusEl.innerText = "K线序列初始化失败";
        return false;
    }
    return true;
}

async function loadOrderKline(){
    if(!ensureChart()) return;
    const orderId = orderSelect.value;
    const timeframe = tfSelect.value;
    if(!orderId) return;
    statusEl.className = "status";
    statusEl.innerText = "加载中...";
    try{
        const resp = await fetch(`/api/order_kline?order_id=${encodeURIComponent(orderId)}&timeframe=${encodeURIComponent(timeframe)}`);
        const data = await resp.json();
        if(!resp.ok || !data.ok) throw new Error(data.msg || "请求失败");
        if(fc && typeof fc.setPriceTick === "function") fc.setPriceTick(data.price_tick);
        else FCP.setActivePriceTick(data.price_tick);
        const candles = Array.isArray(data.candles) ? data.candles : [];
        if(!candles.length){
            statusEl.className = "status err";
            statusEl.innerText = "暂无K线数据";
            return;
        }
        fc.candleSeries.setData(candles);
        fc.resetPriceLines();
        const o = data.order || {};
        fc.addLine(o.trigger_price, FCP.lineTitle("成交价", o.trigger_price_display), "#42a5f5");
        fc.addLine(o.stop_loss, FCP.lineTitle("止损", o.stop_loss_display), "#ff6666");
        fc.addLine(o.take_profit, FCP.lineTitle("止盈", o.take_profit_display), "#4cd97f");
        const markPx = o.current_price;
        if(markPx) fc.addLine(markPx, FCP.lineTitle("现价", o.current_price_display), "#ffb74d");
        fc.chart.timeScale().fitContent();
        FCP.paintOrderMeta(o);
        updatedAtEl.innerText = data.updated_at || "--";
        statusEl.className = "status";
        statusEl.innerText = `已加载 ${candles.length} 根K线`;
    }catch(err){
        statusEl.className = "status err";
        statusEl.innerText = err && err.message ? err.message : "加载失败";
    }
}

document.getElementById("manual-refresh").addEventListener("click", loadOrderKline);
orderSelect.addEventListener("change", loadOrderKline);
tfSelect.addEventListener("change", loadOrderKline);
loadOrderKline();
setInterval(loadOrderKline, refreshMs);
</script>
{% endif %}
</body>
</html>
