{% extends "base.html" %}
{% block title %}日志详情{% endblock %}
{% block content %}
<h3 class="mb-3">日志详情</h3>
<div class="card mb-3">
    <div class="card-body">
        <h5 class="card-title">{{ log.api.name }}</h5>
        <p class="card-text mb-1"><strong>请求时间:</strong> <span id="log-req-time">{{ log.request_time|to_cst }}</span></p>
        <p class="card-text mb-1"><strong>响应时间:</strong> <span id="log-resp-time">{{ log.response_time|to_cst or '-' }}</span></p>
        <p class="card-text mb-1"><strong>状态:</strong> <span id="log-status">
            {% if log.success is none %}
                <span class="badge bg-secondary">进行中</span>
            {% elif log.success %}
                <span class="badge bg-success">成功</span>
            {% else %}
                <span class="badge bg-danger">失败</span>
            {% endif %}
        </span></p>
        <p class="card-text mb-1"><strong>HTTP 状态码:</strong> <span id="log-http">{{ log.http_status_code if log.http_status_code is not none else '-' }}</span></p>
        <p class="card-text mb-1"><strong>耗时 (ms):</strong> <span id="log-duration">{{ log.duration_ms if log.duration_ms is not none else '-' }}</span></p>
        <p class="card-text mb-1"><strong>错误信息:</strong> <span id="log-error">{{ log.error_message or '-' }}</span></p>
        <p class="card-text mb-1"><strong>响应内容:</strong></p>
        <pre class="bg-light p-2" style="max-height: 300px; overflow:auto;" id="log-body">{{ log.response_body or '-' }}</pre>
    </div>
</div>
<a class="btn btn-secondary" href="{{ url_for('logs.list_logs') }}">返回</a>

<script>
(function() {
    const statusEl = document.getElementById('log-status');
    const httpEl = document.getElementById('log-http');
    const durationEl = document.getElementById('log-duration');
    const errorEl = document.getElementById('log-error');
    const bodyEl = document.getElementById('log-body');
    const reqEl = document.getElementById('log-req-time');
    const respEl = document.getElementById('log-resp-time');

    const badge = (state) => {
        if (state === null || state === undefined) return '<span class="badge bg-secondary">进行中</span>';
        if (state === true) return '<span class="badge bg-success">成功</span>';
        return '<span class="badge bg-danger">失败</span>';
    };
    const safe = (val, fallback='-') => (val === null || val === undefined || val === '') ? fallback : val;

    async function poll() {
        try {
            const res = await fetch(`{{ url_for('logs.log_stream', log_id=log.id) }}`);
            if (!res.ok) return schedule();
            const data = await res.json();
            statusEl.innerHTML = badge(data.success);
            httpEl.textContent = safe(data.http_status_code, '-');
            durationEl.textContent = safe(data.duration_ms, '-');
            errorEl.textContent = safe(data.error_message, '-');
            bodyEl.textContent = data.response_body || '-';
            reqEl.textContent = safe(data.request_time, '-');
            respEl.textContent = safe(data.response_time, '-');
            if (!data.finished) {
                schedule();
            }
        } catch (e) {
            schedule();
        }
    }
    function schedule() {
        setTimeout(poll, 1500);
    }
    // 进行中时才轮询
    {% if log.success is none %}
    schedule();
    {% endif %}
})();
</script>
{% endblock %}