{% extends "base.html" %}

{% block title %}报表查询 - 工厂工时效率管理系统{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-search"></i> 报表查询</h2>

<!-- Filter Panel -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <label for="filterDateFrom" class="form-label">起始日期</label>
                <input type="date" class="form-control" id="filterDateFrom">
            </div>
            <div class="col-md-3">
                <label for="filterDateTo" class="form-label">结束日期</label>
                <input type="date" class="form-control" id="filterDateTo">
            </div>
            <div class="col-md-2">
                <label for="filterDepartment" class="form-label">部门</label>
                <select class="form-select" id="filterDepartment">
                    <option value="">全部</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="filterLine" class="form-label">线别</label>
                <select class="form-select" id="filterLine">
                    <option value="">全部</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end gap-2">
                <button type="button" class="btn btn-primary flex-grow-1" id="searchBtn">
                    <i class="bi bi-search"></i> 查询
                </button>
                <button type="button" class="btn btn-success" id="exportBtn">
                    <i class="bi bi-download"></i> 导出
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Results Table -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>部门</th>
                        <th>线别</th>
                        <th>投入工时</th>
                        <th>产出工时</th>
                        <th>异常工时</th>
                        <th>整体效率</th>
                        <th>异常率</th>
                        <th>创建人</th>
                    </tr>
                </thead>
                <tbody id="resultsBody">
                    <tr>
                        <td colspan="9" class="text-center text-muted">点击"查询"按钮搜索报表</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <nav id="paginationNav" style="display: none;">
            <ul class="pagination justify-content-center">
                <li class="page-item" id="prevPage">
                    <a class="page-link" href="#">上一页</a>
                </li>
                <li class="page-item active">
                    <span class="page-link" id="currentPage">1</span>
                </li>
                <li class="page-item" id="nextPage">
                    <a class="page-link" href="#">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentPage = 1;
let totalPages = 1;
let currentFilters = {};

// Load departments on page load
loadDepartments();

// Event listeners
document.getElementById('filterDepartment').addEventListener('change', loadLines);
document.getElementById('searchBtn').addEventListener('click', searchReports);
document.getElementById('prevPage').addEventListener('click', () => changePage(-1));
document.getElementById('nextPage').addEventListener('click', () => changePage(1));
document.getElementById('exportBtn').addEventListener('click', exportExcel);

async function loadDepartments() {
    try {
        const response = await fetch('/api/departments');
        const result = await response.json();
        if (result.success) {
            result.data.forEach(dept => {
                const option = document.createElement('option');
                option.value = dept;
                option.textContent = dept;
                document.getElementById('filterDepartment').appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading departments:', error);
    }
}

async function loadLines() {
    const department = document.getElementById('filterDepartment').value;
    const lineSelect = document.getElementById('filterLine');
    lineSelect.innerHTML = '<option value="">全部</option>';

    if (!department) return;

    try {
        const response = await fetch(`/api/lines?department=${department}`);
        const result = await response.json();
        if (result.success) {
            result.data.forEach(line => {
                const option = document.createElement('option');
                option.value = line.line;
                option.textContent = line.line;
                lineSelect.appendChild(option);
            });
        }
    } catch (error) {
        console.error('Error loading lines:', error);
    }
}

async function searchReports(page = 1) {
    const dateFrom = document.getElementById('filterDateFrom').value;
    const dateTo = document.getElementById('filterDateTo').value;
    const department = document.getElementById('filterDepartment').value;
    const line = document.getElementById('filterLine').value;

    currentFilters = { dateFrom, dateTo, department, line };
    currentPage = page;

    let url = `/dashboard/api/reports?page=${page}&per_page=20`;
    if (dateFrom) url += `&date_from=${dateFrom}`;
    if (dateTo) url += `&date_to=${dateTo}`;
    if (department) url += `&department=${department}`;
    if (line) url += `&line=${line}`;

    try {
        const response = await fetch(url);
        const result = await response.json();

        if (result.success) {
            renderResults(result.data);
            totalPages = result.pages;
            updatePagination();
        }
    } catch (error) {
        console.error('Error searching reports:', error);
    }
}

function renderResults(data) {
    const tbody = document.getElementById('resultsBody');

    if (data.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">未找到匹配的报表</td></tr>';
        document.getElementById('paginationNav').style.display = 'none';
        return;
    }

    tbody.innerHTML = data.map(report => `
        <tr>
            <td>${report.report_date}</td>
            <td>${report.department}</td>
            <td>${report.line}</td>
            <td>${report.total_input_hours.toFixed(2)}</td>
            <td>${report.total_output_hours.toFixed(2)}</td>
            <td>${report.total_abnormal_hours.toFixed(2)}</td>
            <td>
                <span class="badge ${
                    report.overall_efficiency >= 80 ? 'bg-success' :
                    report.overall_efficiency >= 60 ? 'bg-warning text-dark' : 'bg-danger'
                }">
                    ${report.overall_efficiency.toFixed(2)}%
                </span>
            </td>
            <td>${report.abnormal_hours_rate.toFixed(2)}%</td>
            <td>${report.created_by}</td>
        </tr>
    `).join('');

    document.getElementById('paginationNav').style.display = 'flex';
}

function updatePagination() {
    document.getElementById('currentPage').textContent = currentPage;
    document.getElementById('prevPage').classList.toggle('disabled', currentPage <= 1);
    document.getElementById('nextPage').classList.toggle('disabled', currentPage >= totalPages);
}

function changePage(delta) {
    const newPage = currentPage + delta;
    if (newPage >= 1 && newPage <= totalPages) {
        searchReports(newPage);
    }
}

function exportExcel() {
    const { dateFrom, dateTo, department, line } = currentFilters;

    let url = '/dashboard/api/export-excel';
    const params = [];
    if (dateFrom) params.push(`date_from=${dateFrom}`);
    if (dateTo) params.push(`date_to=${dateTo}`);
    if (department) params.push(`department=${department}`);
    if (line) params.push(`line=${line}`);

    if (params.length > 0) {
        url += '?' + params.join('&');
    }

    window.open(url, '_blank');
}
</script>
{% endblock %}