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


function initTable(bidCode,name) {
    const url = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list";
    table.render({
        elem: '#demo2',
        url: url,
        id: 'demo2',
        skin: 'line',
        page: true,
        height: 'full-410',
        headers: {
            "decrypt": "decrypt",
            "Authorization": token
        },
        where: {
            bidCode: bidCode,
            name:name
        },
        cols: [[
            { type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
            { field: 'proName', title: '工程名称', align: 'center', width: '10%' },
            { field: 'workLocation', title: '作业地点', align: 'center', width: '10%' },
            { field: 'monitoringPointId', title: '监测点编号', align: 'center', width: '10%' },
            { field: 'name', title: '监测点名称', align: 'center', width: '10%' },
            { field: 'temperature', title: '温度', align: 'center', width: '8%' },
            { field: 'humidity', title: '湿度', align: 'center', width: '8%' },
            { field: 'windSpeed', title: '风速', align: 'center', width: '8%' },
            { field: 'gasValue', title: '气体值', align: 'center', width: '10%' },
            {
                field: 'rateLevel', title: '隐患', align: 'center', width: '8%',
                templet: function (d) {
                    let color = '';
                    // if (d.level == "一般隐患") {
                    //     color = 'green';
                    // } else if (d.level == '较大隐患') {
                    //     color = 'yellow';
                    // } else if (d.level == '重大隐患') {
                    //     color = 'red';
                    // }
                    return '<p >存在隐患</p>';
                }
            },
            {
                title: "操作",
                align: "center",
                width: '8%',
                templet: function (row) {
                    return `<span onclick="handlDetails('${row.analysisReason}')" style="background-color: #16BAAA;border: 2px solid #16BAAA;cursor:pointer; "> 分析与改进</span>`
                },
            }
        ]],
        initComplete: function () {
            // 在表格渲染完成后，重新渲染序号列
            var that = this.elem.next();
            var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
            tool.find("tr").each(function (index, item) {
                $(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
            });
        },
        done: function (res, curr, count, origin) {
            // console.log(res);
        }
    })
}

function query(type) {
    let name = $('#name').val();
    let bidCode = parent.parent.$('#bidPro').val()
    initTable(bidCode,name);
}

// 初始化 echarts
function initEcharts(bidCode) {
    if(myChart && myChart2){
        myChart.dispose();
        myChart2.dispose();
    }
    myChart = echarts.init(document.getElementById("environmentChart"));
    myChart2 = echarts.init(document.getElementById("riskChart"));

    // let oneList = oneDataList.filter(item => {
    //     return item.bidCode === bidCode;
    // });

    const url =  commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/environmental";
    $.ajax({
        url: url,
        type: "get",
        headers: {
            authorization: sessionStorage.getItem("zhgd_token"),
        },
        data: {
            bidCode: bidCode,
        },
        success: function (data) {
            console.log(data, "图表数据1===折线图");

            if (data.rows && data.rows.length > 0) {
                console.log(data.rows)
                initEchartsOne(data.rows);
            }
        },
    });

    const url2 =  commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/hazards";
    $.ajax({
        url: url2,
        type: "get",
        headers: {
            authorization: sessionStorage.getItem("zhgd_token"),
        },
        data: {
            bidCode: bidCode,
        },
        success: function (data) {
            console.log(data, "图表数据2===折线图");
            if (data.rows && data.rows.length > 0) {
                initEchartsTwo(data.rows);
            }
        },
    });
}

function initEchartsOne(data) {

    const dates = data.map(item => item.date);
    const temperatures = data.map(item => item.temperature);
    const humidities = data.map(item => item.humidity);
    const windSpeeds = data.map(item => item.windSpeed);

    const environmentOption = {
        animation: false,
        tooltip: {
            trigger: 'axis'
        },
        title: {
            text: '异常检测', // 标题文本
            left: 'left', // 标题位置，可以是 'left', 'right', 'center'
            textStyle: {
                color: '#fff', // 标题颜色
                fontSize: 18, // 字体大小
            },
        },
        legend: {
            data: ['温度', '湿度', '风速'],
            textStyle: {
                color: "#fff", // 图例文本白色
            },
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLabel: {
                color: "#fff", // X轴标签白色
                formatter: function(value) {
                    // 假设 value 是 "2025-07-24" 格式的字符串
                    // 你可以根据需要进行格式化，例如换行显示
                    return value.split('-').join('\n'); // 将日期字符串按 "-" 分割，并用换行符连接
                }
            },
            axisLine: {
                lineStyle: {
                    color: "#444", // X轴线颜色
                },
            },
            splitLine: {
                show: false, // 不显示X轴网格线
            },
        },
        yAxis: [
            {
                type: 'value',
                name: '温度/湿度',
                nameTextStyle: {
                    color: "#fff", // Y轴名称白色
                },
                min: 0,
                max: 100,
                axisLabel: {
                    color: "#fff", // Y轴标签白色
                },
                axisLine: {
                    lineStyle: {
                        color: "#444", // Y轴线颜色
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "#333", // Y轴网格线颜色
                        type: "dashed", // 网格线样式
                    },
                },
            },
            {
                type: 'value',
                name: '风速 m/s',
                nameTextStyle: {
                    color: "#fff", // Y轴名称白色
                },
                min: 0,
                max: 20,
                axisLabel: {
                    color: "#fff", // 第二Y轴标签白色
                },
                axisLine: {
                    lineStyle: {
                        color: "#444", // 第二Y轴线颜色
                    },
                },
                splitLine: {
                    show: false, // 不显示第二Y轴网格线
                },
            }
        ],
        series: [
            {
                name: '温度',
                type: 'line',
                data: temperatures,
                itemStyle: {
                    color: "#4A90E2", // 蓝色
                },
                lineStyle: {
                    width: 2,
                },
                symbol: "circle", // 数据点为圆形
                symbolSize: 8, // 数据点大小
            },
            {
                name: '湿度',
                type: 'line',
                data: humidities,
                itemStyle: {
                    color: "#50E3C2", // 绿色
                },
                lineStyle: {
                    width: 2,
                },
                symbol: "circle",
                symbolSize: 8,
            },
            {
                name: '风速',
                type: 'line',
                yAxisIndex: 1,
                data: windSpeeds,
                itemStyle: {
                    color: "#F5A623", // 橙黄色
                },
                lineStyle: {
                    width: 2,
                },
                symbol: "circle",
                symbolSize: 8,
            }
        ]
    };
    myChart.setOption(environmentOption, true);

    // 添加点击事件监听器
    myChart.on('click', function (params) {
        if (params.componentType === 'series') {
           environmentalReadings()
        }
    });

    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function environmentalReadings() {
    layer.open({
        type: 2,
        title: "监测点",
        content: "environmentalReadings.html",
        area: ["80%", "80%"],
        shade: 0.3, // 遮罩透明度
        skin: "custom-layer-style", // 自定义皮肤
        success: function (layero, index) {
            // 修改弹框背景颜色
            $(layero).css(
                "background",
                "rgba(13, 34, 37, 0.9)"
            ); // 半透明黑色背景
            $(layero).find(".layui-layer-title").css({
                color: "#fff", // 标题文字颜色
                background: "transparent", // 标题背景透明
                "border-bottom":
                    "1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
            });
            $(layero).find(".layui-layer-content").css({
                background: "transparent", // 内容区域透明
            });

            $(layero)
                .find(".layui-layer-setwin .layui-layer-close")
                .css({
                    color: "#fff", // 文字颜色
                    "border-color": "#fff", // 边框颜色（如果按钮有边框）
                });
        },
    });
}

function initEchartsTwo(data) {


    const seriesData = data.map(item => ({
        name: item.level,
        value: parseInt(item.count, 10),
        itemStyle: {
            color: getColorByLevel(item.level)
        }
    }));

    function getColorByLevel(level) {
        switch (level) {
            case '一般隐患': return "#4A90E2";
            case '较大隐患': return "#50E3C2";
            case '重大隐患': return "#F5A623";
            default: return "#ccc";
        }
    }

    const riskOption = {
        animation: false,
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
                color: "#fff", // 图例文本白色
            },
        },
        series: [
            {
                name: '隐患分布',
                type: 'pie',
                radius: '50%',
                data: seriesData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    }
    myChart2.setOption(riskOption, true)

    // 添加点击事件监听器
    myChart2.on('click', function (params) {
        if (params.componentType === 'series') {
            hiddenDanger()
        }
    });
}

function hiddenDanger() {
    layer.open({
        type: 2,
        title: "监测点",
        content: "hiddenDanger.html",
        area: ["80%", "80%"],
        shade: 0.3, // 遮罩透明度
        skin: "custom-layer-style", // 自定义皮肤
        success: function (layero, index) {
            // 修改弹框背景颜色
            $(layero).css(
                "background",
                "rgba(13, 34, 37, 0.9)"
            ); // 半透明黑色背景
            $(layero).find(".layui-layer-title").css({
                color: "#fff", // 标题文字颜色
                background: "transparent", // 标题背景透明
                "border-bottom":
                    "1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
            });
            $(layero).find(".layui-layer-content").css({
                background: "transparent", // 内容区域透明
            });

            $(layero)
                .find(".layui-layer-setwin .layui-layer-close")
                .css({
                    color: "#fff", // 文字颜色
                    "border-color": "#fff", // 边框颜色（如果按钮有边框）
                });
            // 获取弹出层内容区域的高度
            var contentHeight = $(layero).find('.layui-layer-content').height();
            // 设置表格的高度
            $('#dangerTable').css('height', contentHeight + 'px');
        },
    });
}

function handlDetails(analysisReason){
    // 分离原因分析和改进措施
    const [reason, measure] = analysisReason.match(/分析原因：(.*)。改进措施：(.*)/).slice(1);

    // 创建一个包含分析原因及改进措施的HTML结构
    const content = `
        <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
            <div style="flex: 1; padding: 20px; background: transparent; border-radius: 8px; margin-bottom: 20px;">
                <h3 style="margin-bottom: 10px; color: #fff;">分析原因及改进措施</h3>
                <div style="display: flex; flex-direction: column;">
                    <div style="margin-bottom: 10px;">
                        <span style="font-weight: bold; color: #CFD3D4;">分析原因：</span>
                        <span style="color: #fff;">${reason}</span>
                    </div>
                    <div>
                        <span style="font-weight: bold; color: #CFD3D4;">改进措施：</span>
                        <span style="color: #fff;">${measure}</span>
                    </div>
                </div>
            </div>
            <div id='oneEcharts' style='width: 100%; height: 400px;'></div>
        </div>
    `;
    layer.open({
        type: 1,
        title: "分析原因及改进措施",
        content: content,
        area: ["400px", "300px"],
        shade: 0.3, // 遮罩透明度
        skin: "custom-layer-style", // 自定义皮肤
        success: function (layero, index) {
            // 修改弹框背景颜色
            $(layero).css(
                "background",
                "rgba(13, 34, 37, 0.9)"
            ); // 半透明黑色背景
            $(layero).find(".layui-layer-title").css({
                color: "#fff", // 标题文字颜色
                background: "transparent", // 标题背景透明
                "border-bottom":
                    "1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
            });
            $(layero).find(".layui-layer-content").css({
                background: "transparent", // 内容区域透明
            });

            $(layero)
                .find(".layui-layer-setwin .layui-layer-close")
                .css({
                    color: "#fff", // 文字颜色
                    "border-color": "#fff", // 边框颜色（如果按钮有边框）
                });
        },
    });
}