{% extends "base.html" %}
{% block title %}测试操作 - {{ device.serial }} - EDC 工装管理系统{% endblock %}

{% block content %}
<div class="test-page">
    <div class="test-header">
        <a href="/">← 返回设备列表</a>
        <h2>测试操作 — {{ device.serial }} ({{ device.name or '未命名' }})</h2>
        <div id="device-status-bar" style="margin-top:4px;font-size:14px;">
            设备状态：<span id="device-status-text" class="{% if device.state == 1 %}status-online{% elif device.state == 2 %}status-poor{% else %}status-offline{% endif %}">加载中…</span>
        </div>
        <div id="test-mode-indicator" style="margin-top:4px;font-size:14px;color:#888;display:none;">加载中…</div>
        <div id="config-overview" style="margin-top:8px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;padding:10px 14px;font-size:13px;display:none;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                <strong style="color:#555;">工装配置概览</strong>
                <span id="config-toggle" style="cursor:pointer;color:#888;font-size:12px;user-select:none;" onclick="toggleConfig()">收起 ▲</span>
            </div>
            <div id="config-body">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;">
                    <div>测试模式：<span id="cfg-test-mode">-</span></div>
                    <div>车检器型号：<span id="cfg-dev-type">-</span></div>
                    <div>复位距离：<span id="cfg-reset-dis">-</span> mm</div>
                    <div>皮距：<span id="cfg-minus-dis">-</span> mm</div>
                    <div>触发和释放范围：<span id="cfg-sens-range">-</span> mm</div>
                    <div>频率范围：<span id="cfg-fre-range">-</span> Hz</div>
                </div>
                <div style="margin-top:6px;padding-top:6px;border-top:1px dashed #ddd;">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;">
                        <div>线圈：<span id="cfg-coil">-</span></div>
                        <div>模拟车辆：<span id="cfg-car">-</span></div>
                    </div>
                </div>
                <div id="cfg-wave-params" style="display:none;margin-top:6px;padding-top:6px;border-top:1px dashed #ddd;">
                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 16px;">
                        <div>最近容差：<span id="cfg-near-tol">-</span> mm</div>
                        <div>最远容差：<span id="cfg-far-tol">-</span> mm</div>
                        <div>步进容差：<span id="cfg-step-tol">-</span> mm</div>
                        <div>来回次数：<span id="cfg-back-forth">-</span></div>
                        <div>最近停留：<span id="cfg-near-stay">-</span> ms</div>
                        <div>最远停留：<span id="cfg-far-stay">-</span> ms</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="test-layout">
        <!-- 左侧：测试操作区 -->
        <div class="test-control">
            <h3>手动指令</h3>
            <div class="cmd-buttons">
                <button onclick="sendCmd('B0')" class="btn-cmd">开始测试 (0xB0)</button>
                <button onclick="sendCmd('B1')" class="btn-cmd">测试复原 (0xB1)</button>
                <button onclick="sendCmd('BA')" class="btn-cmd">电机前进 (0xBA)</button>
                <button onclick="sendCmd('BB')" class="btn-cmd">电机后退 (0xBB)</button>
                <button onclick="sendCmd('BC')" class="btn-cmd">电机停止 (0xBC)</button>
            </div>

            <h3>自动化测试</h3>
            <div class="automation">
                <label>
                    车检器序列号：
                    <input type="text" id="detector-serial" placeholder="选填" style="width:180px;">
                </label>
                <br style="margin-bottom:8px;">
                <label>
                    测试次数：
                    <input type="number" id="test-count" value="1" min="1" max="9999">
                </label>
                <label style="margin-left:16px;">
                    间隔时间(秒)：
                    <input type="number" id="interval-sec" value="5" min="0" max="300" style="width:60px;">
                </label>
                <label style="margin-left:16px;">
                    超时时间(秒)：
                    <input type="number" id="timeout-sec" value="4" min="1" max="600" style="width:60px;">
                </label>
                <button id="btn-auto" class="btn-start" onclick="toggleAuto()">开始</button>
                <div class="progress-container">
                    <div class="progress-bar" id="progress-bar"></div>
                    <div class="progress-text" id="progress-text">等待开始...</div>
                </div>
                <div class="stats" id="stats">
                    <span>完成：<strong id="stat-done">0</strong></span>
                    <span>失败：<strong id="stat-failed">0</strong></span>
                    <span>剩余：<strong id="stat-remaining">0</strong></span>
                </div>
                <div class="auto-status" id="auto-status" style="font-size:12px;color:#888;margin-top:4px;"></div>
                <div class="auto-time" id="auto-time" style="display:none;margin-top:8px;font-size:12px;color:#888;">
                    开始：<span id="time-start">-</span> &nbsp; 结束：<span id="time-end">-</span>
                </div>
            </div>
        </div>

        <!-- 右侧：测试信息显示区 -->
        <div class="test-info">
            <h3>当前测试数据 <span id="new-record-count" style="font-size:12px;color:#888;font-weight:normal;margin-left:8px;"></span></h3>
            <div id="latest-result">
                <p class="placeholder">等待设备上报...</p>
            </div>

            <div id="wave-section">
            <h3>波动测试数据</h3>
            <div id="latest-wave">
                <p class="placeholder">暂无波动数据...</p>
            </div>
            </div>

            <h3>自动化平均值</h3>
            <table id="avg-table">
                <tr><td>平均峰峰值</td><td id="avg-ppvalue">-</td><td>V</td></tr>
                <tr><td>平均开始频率</td><td id="avg-idle-freq">-</td><td>Hz</td></tr>
                <tr><td>平均触发频率</td><td id="avg-enter-freq">-</td><td>Hz</td></tr>
                <tr><td>平均触发距离</td><td id="avg-enter-dist">-</td><td>mm</td></tr>
                <tr><td>平均释放距离</td><td id="avg-exit-dist">-</td><td>mm</td></tr>
                <tr><td>平均触发速度</td><td id="avg-enter-speed">-</td><td>m/s</td></tr>
                <tr><td>平均释放速度</td><td id="avg-exit-speed">-</td><td>m/s</td></tr>
            </table>

            <h3 style="margin-top:20px;">本轮测试明细</h3>
            <div id="records-container" style="max-height:400px;overflow-y:auto;">
                <table id="records-table" style="font-size:11px;">
                    <thead>
                        <tr>
                            <th>#</th><th>串口状态</th><th>模式</th><th>峰峰值(V)</th><th>开始频率</th><th>触发距离</th><th>释放距离</th><th>速度(m/s)</th><th>时间</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <p id="records-empty" class="placeholder">暂无记录</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const DNT_ID = {{ device.id }};
</script>
<script src="{{ url_for('static', filename='js/test_op.js') }}"></script>
{% endblock %}