let table, layer, form, laydate;
let temperatureHumidityChart = null;
let windSpeedChart = null;
let airQualityChart = null;

layui.use(["layer", "table", "form", "laydate"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;
    laydate = layui.laydate;
    
    // 响应成功后的拦截器
    $.ajaxSetup({
        beforeSend: function (xhr, options) {
            var originalSuccess = options.success;
            options.success = function (data, textStatus, jqXhr) {
                data = modifyResponseData(data);
                originalSuccess.apply(this, arguments);
            };
        },
    });
    
    // 初始化页面
    initPage();
    
    // 初始化日期范围选择器
    initDateRangePicker();
});

// 初始化页面
function initPage() {
    initTemperatureHumidityChart();
    initWindSpeedChart();
    initAirQualityChart();
    initEnvironmentRecordTable();
}

// 初始化日期范围选择器
function initDateRangePicker() {
    laydate.render({
        elem: '#dateRange',
        type: 'date',
        range: true,
        format: 'yyyy-MM-dd',
        theme: 'dark',
        max: 0,
        done: function(value, date, endDate) {
            // 日期范围选择完成
        }
    });
}

// 查询数据
function queryData() {
    const dateRange = $('#dateRange').val();
    // 重新加载图表数据
    getTemperatureHumidityData();
    getWindSpeedData();
    getAirQualityData();
    queryRecords();
}

// 初始化温湿度图表（柱状图+折线图，双Y轴）
function initTemperatureHumidityChart() {
    const chartDom = document.getElementById('temperatureHumidityChart');
    if (!chartDom) return;
    
    if (temperatureHumidityChart) {
        temperatureHumidityChart.dispose();
    }
    
    temperatureHumidityChart = echarts.init(chartDom);
    
    // 模拟数据 - 后续替换为真实接口数据
    const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const temperatures = [25, 28, 30, 32, 30, 28, 26]; // 温度（°C）
    const humidities = [60, 65, 70, 75, 72, 68, 65]; // 湿度（%）
    
    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13, 34, 37, 0.95)',
            borderColor: 'rgba(6, 189, 221, 0.8)',
            borderWidth: 1,
            borderRadius: 4,
            padding: [12, 16],
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            }
        },
        legend: {
            data: ['温度', '湿度'],
            top: '5%',
            right: '5%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect'
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: times,
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '°C',
                nameTextStyle: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLabel: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                        width: 1
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.15)',
                        type: 'dashed',
                        width: 1
                    }
                }
            },
            {
                type: 'value',
                name: '%',
                nameTextStyle: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLabel: {
                    color: '#FFFFFF',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                        width: 1
                    }
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '温度',
                type: 'bar',
                yAxisIndex: 0,
                data: temperatures,
                barWidth: '40%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#4A90E2'
                    }, {
                        offset: 1,
                        color: '#2E5C8A'
                    }]),
                    borderRadius: [2, 2, 0, 0]
                },
                label: {
                    show: false
                }
            },
            {
                name: '湿度',
                type: 'line',
                yAxisIndex: 1,
                data: humidities,
                itemStyle: {
                    color: '#50E3C2'
                },
                lineStyle: {
                    width: 2,
                    color: '#50E3C2'
                },
                symbol: 'circle',
                symbolSize: 6,
                label: {
                    show: false
                }
            }
        ]
    };
    
    temperatureHumidityChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        if (temperatureHumidityChart) {
            temperatureHumidityChart.resize();
        }
    });
}

// 初始化风速图表（折线图）
function initWindSpeedChart() {
    const chartDom = document.getElementById('windSpeedChart');
    if (!chartDom) return;
    
    if (windSpeedChart) {
        windSpeedChart.dispose();
    }
    
    windSpeedChart = echarts.init(chartDom);
    
    // 模拟数据 - 后续替换为真实接口数据
    const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const windSpeeds = [5.2, 6.1, 5.8, 4.5, 5.0, 6.2, 5.5]; // 风速（m/s）
    
    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13, 34, 37, 0.95)',
            borderColor: 'rgba(6, 189, 221, 0.8)',
            borderWidth: 1,
            borderRadius: 4,
            padding: [12, 16],
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            }
        },
        legend: {
            data: ['风速'],
            top: '5%',
            right: '5%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect'
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: times,
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: 'm/s',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.15)',
                    type: 'dashed',
                    width: 1
                }
            }
        },
        series: [
            {
                name: '风速',
                type: 'line',
                data: windSpeeds,
                itemStyle: {
                    color: '#50E3C2'
                },
                lineStyle: {
                    width: 2,
                    color: '#50E3C2'
                },
                symbol: 'circle',
                symbolSize: 6,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(80, 227, 194, 0.3)'
                    }, {
                        offset: 1,
                        color: 'rgba(80, 227, 194, 0.05)'
                    }])
                },
                label: {
                    show: false
                }
            }
        ]
    };
    
    windSpeedChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        if (windSpeedChart) {
            windSpeedChart.resize();
        }
    });
}

// 初始化空气质量图表（双折线图）
function initAirQualityChart() {
    const chartDom = document.getElementById('airQualityChart');
    if (!chartDom) return;
    
    if (airQualityChart) {
        airQualityChart.dispose();
    }
    
    airQualityChart = echarts.init(chartDom);
    
    // 模拟数据 - 后续替换为真实接口数据
    const times = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'];
    const pm25 = [35, 38, 42, 40, 38, 36, 34]; // PM2.5
    const pm10 = [55, 60, 65, 62, 58, 56, 54]; // PM10
    
    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(13, 34, 37, 0.95)',
            borderColor: 'rgba(6, 189, 221, 0.8)',
            borderWidth: 1,
            borderRadius: 4,
            padding: [12, 16],
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            }
        },
        legend: {
            data: ['PM2.5', 'PM10'],
            top: '5%',
            right: '5%',
            textStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect'
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: times,
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: 'µg/m³',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLabel: {
                color: '#FFFFFF',
                fontSize: 12
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    width: 1
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.15)',
                    type: 'dashed',
                    width: 1
                }
            }
        },
        series: [
            {
                name: 'PM2.5',
                type: 'line',
                data: pm25,
                itemStyle: {
                    color: '#87CEEB'
                },
                lineStyle: {
                    width: 2,
                    color: '#87CEEB'
                },
                symbol: 'circle',
                symbolSize: 6,
                label: {
                    show: false
                }
            },
            {
                name: 'PM10',
                type: 'line',
                data: pm10,
                itemStyle: {
                    color: '#50E3C2'
                },
                lineStyle: {
                    width: 2,
                    color: '#50E3C2'
                },
                symbol: 'circle',
                symbolSize: 6,
                label: {
                    show: false
                }
            }
        ]
    };
    
    airQualityChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        if (airQualityChart) {
            airQualityChart.resize();
        }
    });
}

// 生成模拟数据
function generateEnvironmentMockData() {
    const projectNames = ['安徽淮北凌云220kv 变电站新建工程'];
    const workPlans = ['WP001', 'WP002', 'WP003', 'WP004', 'WP005'];
    const locations = ['主变区', '开关站', '控制室', '配电室', '电缆沟'];
    const monitoringPoints = ['MP001', 'MP002', 'MP003', 'MP004', 'MP005', 'MP006'];
    const pointNames = ['临建区道路施工 监测点', '主变区监测点', '开关站监测点', '控制室监测点', '配电室监测点', '电缆沟监测点'];
    
    const mockData = [];
    const today = new Date();
    
    for (let i = 0; i < 25; i++) {
        const date = new Date(today);
        date.setDate(date.getDate() - Math.floor(i / 3));
        const timeStr = date.getFullYear() + '-' + 
                       String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                       String(date.getDate()).padStart(2, '0') + ' ' +
                       String(8 + (i % 7)).padStart(2, '0') + ':' +
                       String(Math.floor(Math.random() * 60)).padStart(2, '0') + ':' +
                       String(Math.floor(Math.random() * 60)).padStart(2, '0');
        
        mockData.push({
            projectName: projectNames[0],
            workPlanNumber: workPlans[Math.floor(Math.random() * workPlans.length)],
            workLocation: locations[Math.floor(Math.random() * locations.length)],
            monitoringPointNumber: monitoringPoints[Math.floor(Math.random() * monitoringPoints.length)],
            monitoringPointName: pointNames[Math.floor(Math.random() * pointNames.length)],
            monitoringTime: timeStr,
            temperature: (20 + Math.floor(Math.random() * 15)).toFixed(1),
            humidity: (50 + Math.floor(Math.random() * 30)).toFixed(1),
            windSpeed: (3 + Math.random() * 5).toFixed(1),
            airQuality: (30 + Math.floor(Math.random() * 40)).toFixed(0)
        });
    }
    
    return mockData;
}

// 初始化环境监测记录表格
function initEnvironmentRecordTable() {
    const mockData = generateEnvironmentMockData();
    
    table.render({
        elem: '#environmentRecordTable',
        data: mockData,
        skin: 'line',
        page: {
            layout: ['prev', 'page', 'next', 'count', 'skip'],
            groups: 5,
            limit: 10,
            limits: [10, 20, 30]
        },
        height: 'full',
        cols: [[
            {field: 'projectName', title: '工程名称', width: '15%', align: 'center'},
            {field: 'workPlanNumber', title: '作业计划编号', width: '10%', align: 'center'},
            {field: 'workLocation', title: '作业地点', width: '10%', align: 'center'},
            {field: 'monitoringPointNumber', title: '监测点编号', width: '10%', align: 'center'},
            {field: 'monitoringPointName', title: '监测点名称', width: '15%', align: 'center'},
            {field: 'monitoringTime', title: '监测时间', width: '12%', align: 'center'},
            {field: 'temperature', title: '温度', width: '6%', align: 'center'},
            {field: 'humidity', title: '湿度', width: '6%', align: 'center'},
            {field: 'windSpeed', title: '风速', width: '6%', align: 'center'},
            {field: 'airQuality', title: '空气质量', width: '6%', align: 'center'},
            {title: '视频查看', width: '6%', align: 'center', templet: function(d) {
                return '<a href="javascript:void(0)" style="color: #00FFB8;" onclick="viewVideo(\'' + d.monitoringPointNumber + '\')">查看</a>';
            }},
            {title: '分析改进', width: '8%', align: 'center', templet: function(d) {
                return '<a href="javascript:void(0)" style="color: #00FFB8;" onclick="analyzeImprove(\'' + d.monitoringPointNumber + '\')">分析与改进</a>';
            }}
        ]]
    });
}

// 查询记录
function queryRecords() {
    const keyword = $('#keywordInput').val();
    const dateRange = $('#dateRange').val();
    
    table.reload('environmentRecordTable', {
        where: {
            keyword: keyword,
            dateRange: dateRange,
            bidCode: parent.parent.$('#bidPro').val() || ''
        },
        page: {
            curr: 1
        }
    });
}

// 查看视频
function viewVideo(monitoringPointNumber) {
    layer.msg('查看视频: ' + monitoringPointNumber, {icon: 1});
    // 后续实现视频查看功能
}

// 分析与改进
function analyzeImprove(monitoringPointNumber) {
    layer.msg('分析与改进: ' + monitoringPointNumber, {icon: 1});
    // 后续实现分析改进功能
}

// 获取温湿度数据（接口调用）
function getTemperatureHumidityData() {
    const bidCode = parent.parent.$('#bidPro').val() || '';
    const dateRange = $('#dateRange').val();
    const url = commonUrl + 'screen/largeScreen/dataAnalysis/getTemperatureHumidity';
    
    $.ajax({
        url: url,
        type: 'GET',
        headers: {
            decrypt: 'decrypt',
            Authorization: token
        },
        data: {
            bidCode: bidCode,
            dateRange: dateRange
        },
        success: function(res) {
            if (res.code === 200 && res.data) {
                updateTemperatureHumidityChart(res.data);
            }
        },
        error: function(err) {
            console.error('获取温湿度数据失败:', err);
        }
    });
}

// 更新温湿度图表
function updateTemperatureHumidityChart(data) {
    if (!temperatureHumidityChart) return;
    
    const times = data.map(item => item.time);
    const temperatures = data.map(item => item.temperature);
    const humidities = data.map(item => item.humidity);
    
    temperatureHumidityChart.setOption({
        xAxis: {
            data: times
        },
        series: [
            {
                name: '温度',
                data: temperatures
            },
            {
                name: '湿度',
                data: humidities
            }
        ]
    });
}

// 获取风速数据（接口调用）
function getWindSpeedData() {
    const bidCode = parent.parent.$('#bidPro').val() || '';
    const dateRange = $('#dateRange').val();
    const url = commonUrl + 'screen/largeScreen/dataAnalysis/getWindSpeed';
    
    $.ajax({
        url: url,
        type: 'GET',
        headers: {
            decrypt: 'decrypt',
            Authorization: token
        },
        data: {
            bidCode: bidCode,
            dateRange: dateRange
        },
        success: function(res) {
            if (res.code === 200 && res.data) {
                updateWindSpeedChart(res.data);
            }
        },
        error: function(err) {
            console.error('获取风速数据失败:', err);
        }
    });
}

// 更新风速图表
function updateWindSpeedChart(data) {
    if (!windSpeedChart) return;
    
    const times = data.map(item => item.time);
    const windSpeeds = data.map(item => item.windSpeed);
    
    windSpeedChart.setOption({
        xAxis: {
            data: times
        },
        series: [{
            name: '风速',
            data: windSpeeds
        }]
    });
}

// 获取空气质量数据（接口调用）
function getAirQualityData() {
    const bidCode = parent.parent.$('#bidPro').val() || '';
    const dateRange = $('#dateRange').val();
    const url = commonUrl + 'screen/largeScreen/dataAnalysis/getAirQuality';
    
    $.ajax({
        url: url,
        type: 'GET',
        headers: {
            decrypt: 'decrypt',
            Authorization: token
        },
        data: {
            bidCode: bidCode,
            dateRange: dateRange
        },
        success: function(res) {
            if (res.code === 200 && res.data) {
                updateAirQualityChart(res.data);
            }
        },
        error: function(err) {
            console.error('获取空气质量数据失败:', err);
        }
    });
}

// 更新空气质量图表
function updateAirQualityChart(data) {
    if (!airQualityChart) return;
    
    const times = data.map(item => item.time);
    const pm25 = data.map(item => item.pm25);
    const pm10 = data.map(item => item.pm10);
    
    airQualityChart.setOption({
        xAxis: {
            data: times
        },
        series: [
            {
                name: 'PM2.5',
                data: pm25
            },
            {
                name: 'PM10',
                data: pm10
            }
        ]
    });
}