// 资源利用率页面（前端模拟数据，方便对照设计稿）
let table, layer, form;
let trendChart = null;
let equipmentChart = null;

layui.use(['layer', 'table', 'form'], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    initCards();
    initTeamTable();
    initTrendChart();
    initEquipmentChart();
    initAnalysisList();

    window.addEventListener('resize', debounce(() => {
        if (trendChart) trendChart.resize();
        if (equipmentChart) equipmentChart.resize();
    }, 300));
});

function debounce(fn, delay) {
    let t = null;
    return function () {
        clearTimeout(t);
        t = setTimeout(() => fn.apply(this, arguments), delay);
    };
}

// 顶部/中部数字卡片模拟数据
function initCards() {
    $('#workerUtilization').text('75%');
    $('#deviceUtilization').text('80%');
    $('#todayDutyRate').text('96');
    $('#yesterdayDutyRate').text('104');
}

// 班组人员利用率表格（模拟数据）
function initTeamTable() {
    const data = [
        { workType: '电气专业', teamName: 'XXX电气1班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 100 },
        { workType: '土建专业', teamName: 'XXX土建1班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 99 },
        { workType: '电气专业', teamName: 'XXX电气2班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 95 },
        { workType: '电气专业', teamName: 'XXX电气3班', teamLeader: '黄忠平', totalPeople: 50, todayDuty: 50, utilizationRate: 91 },
    ];

    table.render({
        elem: '#teamTable',
        data,
        page: false,
        skin: 'line',
        cols: [[
            { type: 'numbers', title: '序号', width: '8%', align: 'center' },
            { field: 'workType', title: '专业', width: '16%', align: 'center' },
            { field: 'teamName', title: '班组', width: '18%', align: 'center' },
            { field: 'teamLeader', title: '班组负责人', width: '16%', align: 'center' },
            { field: 'totalPeople', title: '班组人数', width: '14%', align: 'center' },
            { field: 'todayDuty', title: '当日到岗', width: '14%', align: 'center' },
            {
                field: 'utilizationRate',
                title: '利用率',
                align: 'center',
                templet: d => (d.utilizationRate || 0) + '%'
            }
        ]]
    });
}

// 一周到岗趋势（折线面积图）
function initTrendChart() {
    trendChart = echarts.init(document.getElementById('trendChart'));
    const dates = ['xxx-xx-01', 'xxx-xx-02', 'xxx-xx-03', 'xxx-xx-04', 'xxx-xx-05', 'xxx-xx-06', 'xxx-xx-07'];
    const actual = [60, 62, 58, 65, 68, 66, 70];
    const should = [90, 92, 91, 92, 94, 93, 95];

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            backgroundColor: 'rgba(19,51,55,.8)',
            borderColor: 'rgba(255,255,255,.2)',
            textStyle: { color: '#fff' },
            formatter: params => {
                if (!params || !params.length) return '';
                const name = params[0].name;
                let html = `<div style="font-weight:bold;margin-bottom:6px;">${name}</div>`;
                params.forEach(p => {
                    html += `
                        <div style="display:flex;align-items:center;margin-bottom:2px;min-width:140px;">
                            <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color};margin-right:8px;"></span>
                            <span style="color:#B9D6D9;margin-right:6px;">${p.seriesName}</span>
                            <span style="color:#fff;margin-left:auto;font-weight:bold;">${p.value}</span>
                        </div>`;
                });
                return html;
            }
        },
        legend: {
            data: ['实到', '应到'],
            top: 8,
            right: 20,
            textStyle: { color: '#fff' }
        },
        grid: { top: '22%', left: '6%', right: '4%', bottom: '15%' },
        xAxis: {
            type: 'category',
            data: dates,
            axisLabel: { color: '#fff' },
            axisLine: { lineStyle: { color: '#5A6E71' } }
        },
        yAxis: {
            type: 'value',
            axisLabel: { color: 'rgba(255,255,255,0.8)' },
            splitLine: { lineStyle: { color: 'rgba(255,255,255,0.2)', type: 'dashed' } }
        },
        series: [
            {
                name: '实到',
                type: 'line',
                smooth: true,
                data: actual,
                lineStyle: { width: 2, color: '#00FEFC' },
                itemStyle: { color: '#00FEFC' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(18,86,100,0.6)' },
                        { offset: 1, color: 'rgba(16,72,81,0.7)' }
                    ])
                }
            },
            {
                name: '应到',
                type: 'line',
                smooth: true,
                data: should,
                lineStyle: { width: 2, color: 'rgba(25,196,134,1)' },
                itemStyle: { color: 'rgba(25,196,134,1)' },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(17,95,82,0.6)' },
                        { offset: 1, color: 'rgba(16,72,67,0.7)' }
                    ])
                }
            }
        ],
        dataZoom: [
            { show: true, height: 12, bottom: '8%', start: 0, end: 100 },
            { type: 'inside', start: 0, end: 100 }
        ]
    };
    trendChart.setOption(option);
}

// 设备情况柱状图
function initEquipmentChart() {
    equipmentChart = echarts.init(document.getElementById('equipmentStatus'));
    const devName = ['挖掘机', '吊车', '搅拌机', 'xxx1', 'xxx2', 'xxx3', 'xxx4'];
    const einDay = [12, 10, 11, 8, 9, 10, 11];
    const usedDay = [8, 6, 7, 5, 6, 7, 8];

    const color1 = { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [{ offset: 0, color: '#1CFFA3' }, { offset: 1, color: '#1CFFA3' }] };
    const color2 = { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [{ offset: 0, color: '#00FEFC' }, { offset: 1, color: '#00FEFC' }] };

    const option = {
        legend: {
            top: '10%',
            right: '3%',
            textStyle: { fontSize: 12, color: '#FFF' },
            selectedMode: false,
            icon: 'circle',
            itemWidth: 12,
            itemHeight: 10,
            itemGap: 15
        },
        grid: { x: '6%', x2: '4%', y: '25%', y2: '18%' },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            backgroundColor: 'rgba(19,51,55,.8)',
            borderColor: 'rgba(255,255,255,.2)',
            textStyle: { color: '#fff' },
            formatter: params => {
                if (!params || !params.length) return '';
                const name = params[0].name;
                let html = `<div style="font-weight:bold;margin-bottom:6px;">${name}</div>`;
                params.forEach(p => {
                    html += `
                        <div style="display:flex;align-items:center;margin-bottom:2px;min-width:140px;">
                            <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${p.color};margin-right:8px;"></span>
                            <span style="color:#B9D6D9;margin-right:6px;">${p.seriesName}</span>
                            <span style="color:#fff;margin-left:auto;font-weight:bold;">${p.value}</span>
                        </div>`;
                });
                return html;
            }
        },
        xAxis: {
            data: devName,
            axisLine: { lineStyle: { color: '#214776' } },
            axisLabel: { color: '#C5DFFB', fontSize: 12 },
            axisTick: { show: false }
        },
        yAxis: {
            type: 'value',
            splitLine: { lineStyle: { type: 'dashed', opacity: 0.2 } },
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { color: '#C5DFFB' }
        },
        dataZoom: [
            { show: true, height: 12, bottom: '8%', start: 0, end: 100 },
            { type: 'inside', start: 0, end: 100 }
        ],
        series: [
            { name: '入场天数', type: 'bar', barWidth: 18, data: einDay, itemStyle: { color: color1 } },
            { name: '使用天数', type: 'bar', barWidth: 18, data: usedDay, itemStyle: { color: color2 } }
        ]
    };
    equipmentChart.setOption(option, true);
}

// 右下分析提醒列表
function initAnalysisList() {
    const list = [
        'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。',
        '吊车设备使用率较低，如暂时不用，可进行出厂维护，避免设备进行其他项目施工。',
        'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。',
        'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。',
        'xx班组质量控制合格率低于80%，请持续关注该班组施工质量情况。'
    ];
    const html = list.map(text => `<div class="analysis-item">${text}</div>`).join('');
    $('#analysisList').html(html);
}