let table, layer, form;
let myChart = null, myChart2 = null;
let bidCode = parent.parent.$('#bidPro').val()
layui.use(['layer', 'table', 'form', 'laydate'], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;
    var laydate = layui.laydate;

    var defaultDate = '2025-03-14';
    var defaultHour = '08';

    // 初始化日期选择器
    laydate.render({
        elem: '#layuiDate',
        type: 'date',
        format: 'yyyy-MM-dd',
        theme: '#00C6BE',
        trigger: 'click',
        value: defaultDate,
        max: '2025-03-14',
        done: function(value, date, endDate){
            // 选中日期后的回调，自动查询
            initEcharts();
        }
    });

    // 生成小时下拉选项
    var $hour = $('#layuiHour');
    $hour.empty();
    for (let i = 0; i < 24; i++) {
        let hour = (i < 10 ? '0' : '') + i;
        $hour.append(`<option value="${hour}">${hour}</option>`);
    }
    $hour.val(defaultHour);
    // 监听小时变化
    $hour.on('change', function() {
        initEcharts();
    });

    initEcharts();
});


// 初始化 echarts
function initEcharts() {
    // 获取页面选择的日期和小时
    var currentDay = $('#layuiDate').val();
    var hour = $('#layuiHour').val();
    // 兼容小时前导零
    if (hour && hour.length === 1) hour = '0' + hour;
    // 后端查询数据
    const url = commonUrl + "screen/largeScreen/environment/getEnvironmentList?currentDay=" + currentDay + "&hour=" + hour + "&proId=" + bidCode;
	ajaxRequest(url, "get",  null , true, function () {
	}, function (result) {
        if (result.code === 200 && result.data) {
            initEchartsOne(result.data);
        } else {
            layer.msg('<span style="color:#00C6BE">暂无数据</span>', {
                icon: 0
              });
            clearEchartsAndData();
        }
	}, function (xhr) {
		layer.msg(xhr, { icon: 2 });
	});
    
}

function clearEchartsAndData() {
    // 清空echarts实例
     if (window.trendChart) {
        window.trendChart.dispose();
        window.trendChart = null;
    }
    if (window.gisChart) {
        window.gisChart.dispose();
        window.gisChart = null;
    }
    if (window.spaceChart) {
        window.spaceChart.dispose();
        window.spaceChart = null;
    }
    // 清空六大指标数据
    $('#slopeDisplacementValue').text('--');
    $('#slopeDisplacementStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
    $('#temperatureValue').text('--');
    $('#temperatureStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
    $('#humidityValue').text('--');
    $('#humidityStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
    $('#airQualityIndexValue').text('--');
    $('#airQualityIndexStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
    $('#noiseLevelValue').text('--');
    $('#noiseLevelStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
    $('#illuminationValue').text('--');
    $('#illuminationStatus').text('--').removeClass().addClass('px-1.5 py-0.5 rounded-full text-xs bg-gray-200 text-gray-400');
}

// 监听日期和小时选择器变化，自动刷新数据
// $(document).on('change', '#layuiDate', function() {
//     initEcharts();
// });
// $(document).on('change', '#layuiHour', function() {
//     initEcharts();
// });

function initEchartsOne(obj) {

    //六大指标设置
    getEnvironment(obj);

    // 通过obj动态填充
    const trendOption = getTrendOption(obj.list);
    const gisOption = getGisOption(obj);
    const spaceOption = getSpaceOption(obj);

    window.trendChart = echarts.init(document.getElementById('trendChart'));
    window.gisChart = echarts.init(document.getElementById('gisChart'));
    window.spaceChart = echarts.init(document.getElementById('spaceChart'));
        
        const lineChartBtn = document.getElementById('lineChartBtn');
        const barChartBtn = document.getElementById('barChartBtn');
        const updateChartType = (type) => {
            const newOption = { ...trendOption };
            newOption.series = newOption.series.map(series => ({
                ...series,
                type: type
            }));
            trendChart.setOption(newOption);
        };
        lineChartBtn.addEventListener('click', () => {
            lineChartBtn.classList.add('bg-primary/10', 'text-primary');
            lineChartBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
            barChartBtn.classList.remove('bg-primary/10', 'text-primary');
            barChartBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
            updateChartType('line');
        });
        barChartBtn.addEventListener('click', () => {
            barChartBtn.classList.add('bg-primary/10', 'text-primary');
            barChartBtn.classList.remove('text-gray-600', 'hover:bg-gray-100');
            lineChartBtn.classList.remove('bg-primary/10', 'text-primary');
            lineChartBtn.classList.add('text-gray-600', 'hover:bg-gray-100');
            updateChartType('bar');
        });
        trendChart.setOption(trendOption);
        gisChart.setOption(gisOption);
        spaceChart.setOption(spaceOption);
        window.addEventListener('resize', function () {
            trendChart.resize();
            gisChart.resize();
            spaceChart.resize();
        });
}

function getEnvironment(obj) {
    const slopeDisplacement = obj.slopeDisplacement
    const temperature = obj.temperature
    const humidity = obj.humidity
    const airQualityIndex = obj.airQualityIndex
    const noiseLevel = obj.noiseLevel
    const illumination = obj.illumination

    const slopeDisplacementStandard = 0.8
    const temperatureStandard = 35
    const humidityStandard = 75
    const airQualityIndexStandard = 75
    const noiseLevelStandard = 90
    const illuminationStandard = 100000

    const slopeDisplacementDanger = 1.2
    const temperatureDanger = 40
    const humidityDanger = 85
    const airQualityIndexDanger = 100
    const noiseLevelDanger = 110
    const illuminationDanger = 110000

    // 状态判断逻辑
    function getStatus(value, standard, danger) {
        if (value < standard) return '正常';
        if (value >= standard && value < danger) return '警告';
        return '异常';
    }

    const slopeDisplacementStatus = getStatus(slopeDisplacement, slopeDisplacementStandard, slopeDisplacementDanger);
    const temperatureStatus = getStatus(temperature, temperatureStandard, temperatureDanger);
    const humidityStatus = getStatus(humidity, humidityStandard, humidityDanger);
    const airQualityIndexStatus = getStatus(airQualityIndex, airQualityIndexStandard, airQualityIndexDanger);
    const noiseLevelStatus = getStatus(noiseLevel, noiseLevelStandard, noiseLevelDanger);
    const illuminationStatus = getStatus(illumination, illuminationStandard, illuminationDanger);

    // 填充实时数据
    $('#slopeDisplacementValue').text(slopeDisplacement + ' mm');
    $('#slopeDisplacementStatus').text(slopeDisplacementStatus)
        .removeClass()
        .addClass('px-1.5 py-0.5 rounded-full text-xs ' +
            (slopeDisplacementStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
                slopeDisplacementStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
                'bg-[#2d4446] text-[#FF4444]'));

    $('#temperatureValue').text(temperature + ' ℃');
    $('#temperatureStatus').text(temperatureStatus)
        .removeClass()
        .addClass('px-1.5 py-0.5 rounded-full text-xs ' +
            (temperatureStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
                temperatureStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
                'bg-[#2d4446] text-[#FF4444]'));

    $('#humidityValue').text(humidity + ' %');
    $('#humidityStatus').text(humidityStatus)
        .removeClass()
        .addClass('px-1.5 py-0.5 rounded-full text-xs ' +
            (humidityStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
                humidityStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
                'bg-[#2d4446] text-[#FF4444]'));

    $('#airQualityIndexValue').text(airQualityIndex + ' AQI');
    $('#airQualityIndexStatus').text(airQualityIndexStatus)
        .removeClass()
        .addClass('px-1.5 py-0.5 rounded-full text-xs ' +
            (airQualityIndexStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
                airQualityIndexStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
                'bg-[#2d4446] text-[#FF4444]'));

    $('#noiseLevelValue').text(noiseLevel + ' dB');
    $('#noiseLevelStatus').text(noiseLevelStatus)
        .removeClass()
        .addClass('px-1.5 py-0.5 rounded-full text-xs ' +
            (noiseLevelStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
                noiseLevelStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
                'bg-[#2d4446] text-[#FF4444]'));

    $('#illuminationValue').text(illumination + ' lx');
    $('#illuminationStatus').text(illuminationStatus)
        .removeClass()
        .addClass('px-1.5 py-0.5 rounded-full text-xs ' +
            (illuminationStatus === '正常' ? 'bg-[#004446] text-[#00C6BE]' :
                illuminationStatus === '警告' ? 'bg-[#2d4446] text-[#FFB020]' :
                'bg-[#2d4446] text-[#FF4444]'));
}

function getTrendOption(trendData) {
    const xAxis = trendData.map(item => item.currentDay);
    // 保留两位有效小数
    function fix2(val) {
        if (val === null || val === undefined || isNaN(val)) return val;
        return Number(val).toFixed(2);
    }
    const a = trendData.map(item => fix2(item.temperature));
    const b = trendData.map(item => fix2(item.humidity));
    const c = trendData.map(item => fix2(item.airQualityIndex));
    const d = trendData.map(item => fix2(item.noiseLevel));
    const e = trendData.map(item => fix2(item.illumination));

    const trendOption = {
            animation: false,
            backgroundColor: 'transparent',
            textStyle: {
                color: '#00C6BE'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['温度', '湿度', '空气质量', '噪音', '光照度'],
                textStyle: {
                    color: '#00FFD0'
                },
                itemWidth: 24,
                itemHeight: 14
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis
            },
            yAxis: [
                {
                    type: 'value',
                    name: '温度/湿度',
                },
                {
                    type: 'value',
                    name: '其他指标',
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    data: a
                },
                {
                    name: '湿度',
                    type: 'line',
                    smooth: true,
                    data: b
                },
                {
                    name: '空气质量',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    data: c
                },
                {
                    name: '噪音',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    data: d
                },
                {
                    name: '光照度',
                    type: 'line',
                    yAxisIndex: 1,
                    smooth: true,
                    data: e
                }
            ]
        };

        return trendOption;
}

function getGisOption(gisData) {
    const array = []
    array[0] = gisData.gisInstallationTemp
    array[1] = gisData.gisInstallationHumidity
    array[2] = gisData.gisInstallationDustConcentration

    const gisOption = {
        animation: false,
        backgroundColor: 'transparent',
        textStyle: {
            color: '#00C6BE'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['实时值', '标准值'],
            textStyle: {
                color: '#00FFD0'
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['温度 (℃)', '湿度 (%)', '粉尘度 (mg/m³)']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '实时值',
                type: 'bar',
                barGap: 0,
                data: array,
                itemStyle: {
                    color: '#2563eb'
                }
            },
            {
                name: '标准值',
                type: 'bar',
                data: [25, 50, 0.50],
                itemStyle: {
                    color: '#94a3b8'
                }
            }
        ]
    };

    return gisOption;
}

function getSpaceOption(spaceData) {

    var array = []
    array[0] = spaceData.confinedSpaceOxygen
    array[1] = spaceData.confinedSpaceCarbonMonoxide
    array[2] = spaceData.confinedSpaceHydrogenSulfide
    array[3] = spaceData.confinedSpaceCombustibleGas

    const spaceOption = {
        animation: false,
        backgroundColor: 'transparent',
        textStyle: {
            color: '#00C6BE'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                const units = {
                    '氧气': '%',
                    '一氧化碳': 'ppm',
                    '硫化氢': 'ppm',
                    '可燃气体': '%LEL'
                };
                let result = params[0].axisValueLabel + '<br/>';
                params.forEach(param => {
                    result += param.marker + param.seriesName + ': ' + param.value + ' ' + '<br/>';
                });
                return result;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['氧气 (%)', '一氧化碳 (ppm)', '硫化氢 (ppm)', '可燃气体 (%LEL)'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    interval: 0,
                    rotate: 15
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '监测值',
            }
        ],
        series: [
            {
                name: '监测值',
                type: 'bar',
                barWidth: '60%',
                data: array,
                itemStyle: {
                    color: '#2563eb'
                }
            }
        ]
    };

    return spaceOption;
}