{% extends "base.html" %}

{% block title %}历史记录 - Andon 安灯系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">📊 历史记录查询</h2>

    <!-- 筛选器 -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">工位筛选</label>
                    <select class="form-select" id="stationFilter">
                        <option value="">全部工位</option>
                        {% for station in stations %}
                        <option value="{{ station.id }}">{{ station.station_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">异常类型筛选</label>
                    <select class="form-select" id="categoryFilter">
                        <option value="">全部类型</option>
                        {% for cat in categories %}
                        <option value="{{ cat.id }}">{{ cat.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">状态筛选</label>
                    <select class="form-select" id="statusFilter">
                        <option value="">全部状态</option>
                        <option value="Open">未解决</option>
                        <option value="Closed">已解决</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button class="btn btn-primary w-100" id="searchBtn">🔍 查询</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 历史记录表格 -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>工位</th>
                            <th>异常类型</th>
                            <th>状态</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>响应耗时</th>
                            <th>处理过程</th>
                        </tr>
                    </thead>
                    <tbody id="historyTableBody">
                        <tr>
                            <td colspan="8" class="text-center text-muted">点击"查询"按钮加载数据</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 格式化响应时间
function formatDuration(seconds) {
    if (!seconds) return '-';
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;

    if (hours > 0) {
        return `${hours}小时${minutes}分${secs}秒`;
    } else if (minutes > 0) {
        return `${minutes}分${secs}秒`;
    }
    return `${secs}秒`;
}

// 格式化日期时间
function formatDateTime(isoString) {
    if (!isoString) return '-';
    const date = new Date(isoString);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
}

// 加载历史数据
function loadHistory() {
    const stationId = $('#stationFilter').val();
    const categoryId = $('#categoryFilter').val();
    const status = $('#statusFilter').val();

    let url = '/api/history?';
    if (stationId) url += 'station_id=' + stationId + '&';
    if (categoryId) url += 'category_id=' + categoryId + '&';
    if (status) url += 'status=' + status;

    $.get(url, function(response) {
        if (response.success) {
            const issues = response.issues;
            const tbody = $('#historyTableBody');

            if (issues.length === 0) {
                tbody.html('<tr><td colspan="8" class="text-center text-muted">暂无记录</td></tr>');
                return;
            }

            let html = '';
            issues.forEach(issue => {
                const statusBadge = issue.status === 'Open'
                    ? '<span class="badge bg-danger">未解决</span>'
                    : '<span class="badge bg-success">已解决</span>';

                html += `
                    <tr>
                        <td>${issue.id}</td>
                        <td>${issue.station_name}</td>
                        <td><span class="badge bg-${issue.category_color}">${issue.category_name}</span></td>
                        <td>${statusBadge}</td>
                        <td>${formatDateTime(issue.start_time)}</td>
                        <td>${formatDateTime(issue.end_time)}</td>
                        <td>${formatDuration(issue.response_duration)}</td>
                        <td>${issue.solution_note || '-'}</td>
                    </tr>
                `;
            });

            tbody.html(html);
        }
    });
}

// 查询按钮
$('#searchBtn').on('click', loadHistory);

// 页面加载时自动查询
$(document).ready(function() {
    loadHistory();
});
</script>
{% endblock %}