{% extends "base.html" %}

{% block title %}效率看板 - 工厂工时效率管理系统{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-bar-chart"></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="filterDepartment" class="form-label">部门</label>
                <select class="form-select" id="filterDepartment">
                    <option value="">全部</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="filterLine" class="form-label">线别</label>
                <select class="form-select" id="filterLine">
                    <option value="">全部</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="filterDays" class="form-label">天数</label>
                <select class="form-select" id="filterDays">
                    <option value="7">最近7天</option>
                    <option value="14">最近14天</option>
                    <option value="30" selected>最近30天</option>
                    <option value="60">最近60天</option>
                    <option value="90">最近90天</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-primary" id="applyFilter">
                    <i class="bi bi-funnel"></i> 应用筛选
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row mb-4">
    <div class="col-lg-8 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-graph-up"></i> 效率趋势图
            </div>
            <div class="card-body">
                <canvas id="efficiencyChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-pie-chart"></i> 异常工时分布
            </div>
            <div class="card-body">
                <canvas id="abnormalChart"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Summary Stats -->
<div class="row">
    <div class="col-md-3 mb-3">
        <div class="card stats-card bg-primary text-white">
            <div class="card-body">
                <h6 class="card-title">平均效率</h6>
                <h2 class="mb-0" id="avgEfficiency">-</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stats-card bg-success text-white">
            <div class="card-body">
                <h6 class="card-title">最高效率</h6>
                <h2 class="mb-0" id="maxEfficiency">-</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stats-card bg-warning text-dark">
            <div class="card-body">
                <h6 class="card-title">最低效率</h6>
                <h2 class="mb-0" id="minEfficiency">-</h2>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card stats-card bg-info text-white">
            <div class="card-body">
                <h6 class="card-title">日报数量</h6>
                <h2 class="mb-0" id="reportCount">-</h2>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let efficiencyChart = null;
let abnormalChart = null;

// Load departments on page load
loadDepartments();

// Apply filter button
document.getElementById('applyFilter').addEventListener('click', loadChartData);

// Load departments
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);
    }
}

// Load lines when department changes
document.getElementById('filterDepartment').addEventListener('change', async function() {
    const department = this.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);
    }
});

// Load chart data
async function loadChartData() {
    const department = document.getElementById('filterDepartment').value;
    const line = document.getElementById('filterLine').value;
    const days = document.getElementById('filterDays').value;

    // Load efficiency trend
    try {
        let url = `/dashboard/api/efficiency-trend?days=${days}`;
        if (department) url += `&department=${department}`;
        if (line) url += `&line=${line}`;

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

        if (result.success) {
            renderEfficiencyChart(result.data);
            updateStats(result.data);
        }
    } catch (error) {
        console.error('Error loading efficiency trend:', error);
    }

    // Load abnormal distribution
    try {
        let url = `/dashboard/api/abnormal-distribution?days=${days}`;
        if (department) url += `&department=${department}`;
        if (line) url += `&line=${line}`;

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

        if (result.success) {
            renderAbnormalChart(result.data);
        }
    } catch (error) {
        console.error('Error loading abnormal distribution:', error);
    }
}

function renderEfficiencyChart(data) {
    const ctx = document.getElementById('efficiencyChart').getContext('2d');

    if (efficiencyChart) {
        efficiencyChart.destroy();
    }

    efficiencyChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.labels,
            datasets: [
                {
                    label: '直接人员效率 (%)',
                    data: data.direct_efficiency,
                    backgroundColor: 'rgba(54, 162, 235, 0.8)',
                    borderColor: 'rgb(54, 162, 235)',
                    borderWidth: 1
                },
                {
                    label: '间接人员效率 (%)',
                    data: data.indirect_efficiency,
                    backgroundColor: 'rgba(255, 159, 64, 0.8)',
                    borderColor: 'rgb(255, 159, 64)',
                    borderWidth: 1
                },
                {
                    label: '总效率 (%)',
                    data: data.efficiency,
                    backgroundColor: 'rgba(75, 192, 192, 0.8)',
                    borderColor: 'rgb(75, 192, 192)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 120,
                    title: {
                        display: true,
                        text: '效率 (%)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '日期'
                    }
                }
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed.y !== null) {
                                label += context.parsed.y.toFixed(2) + '%';
                            }
                            return label;
                        }
                    }
                }
            }
        }
    });
}

function renderAbnormalChart(data) {
    const ctx = document.getElementById('abnormalChart').getContext('2d');

    if (abnormalChart) {
        abnormalChart.destroy();
    }

    const colors = [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)',
        'rgb(255, 159, 64)',
        'rgb(201, 203, 207)'
    ];

    abnormalChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: data.labels,
            datasets: [{
                data: data.values,
                backgroundColor: colors.slice(0, data.labels.length)
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom'
                }
            }
        }
    });
}

function updateStats(data) {
    const efficiency = data.efficiency;

    if (efficiency.length > 0) {
        const validEfficiency = efficiency.filter(e => e > 0);
        if (validEfficiency.length > 0) {
            const avg = validEfficiency.reduce((a, b) => a + b, 0) / validEfficiency.length;
            const max = Math.max(...validEfficiency);
            const min = Math.min(...validEfficiency);

            document.getElementById('avgEfficiency').textContent = avg.toFixed(1) + '%';
            document.getElementById('maxEfficiency').textContent = max.toFixed(1) + '%';
            document.getElementById('minEfficiency').textContent = min.toFixed(1) + '%';
        } else {
            document.getElementById('avgEfficiency').textContent = '-';
            document.getElementById('maxEfficiency').textContent = '-';
            document.getElementById('minEfficiency').textContent = '-';
        }
        document.getElementById('reportCount').textContent = efficiency.length;
    } else {
        document.getElementById('avgEfficiency').textContent = '-';
        document.getElementById('maxEfficiency').textContent = '-';
        document.getElementById('minEfficiency').textContent = '-';
        document.getElementById('reportCount').textContent = '0';
    }
}

// Load initial chart data
loadChartData();
</script>
{% endblock %}