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, "");

    initTable2(bidCode, "");

});


function initTable(bidCode, name) {
    const url = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list";
    table.render({
        elem: '#demo1',
        url: url,
        id: 'demo1',
        skin: 'line',
        page: true,
        height: 'full-505',
        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);
}

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", // 边框颜色（如果按钮有边框）
                });
        },
    });
}

function initTable2(bidCode, name) {
    const url = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list";

    // 获取数据
    $.ajax({
        url: url,
        type: "get",
        headers: {
            "decrypt": "decrypt",
            "Authorization": token
        },
        data: {
            bidCode: bidCode,
            name: name,
            page: '1',
            limit: '10'
        },
        success: function (data) {
            const container = document.getElementById('demo2-container');
            container.innerHTML = ''; // 清空容器

            if (data.data && data.data.length > 0) {
                data.data.forEach(item => {
                    const card = document.createElement('div');
                    card.className = 'card';
                    card.style.cssText = `        width: calc(20% - 10px);
        height: 150px;
        background-color: #1a3a4c;
        border: none;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
       
    `;


                    // 创建图片区域
                    const imgDiv = document.createElement('div');
                    imgDiv.style.cssText = `        flex: 1;
        background-color: #2a4a5c;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    `;
                    imgDiv.textContent = '未带安全帽';
                    card.appendChild(imgDiv);
                    // 创建信息区域
                    const infoDiv = document.createElement('div');
                    infoDiv.style.cssText = `        padding: 5px;
        background-color: #1a3a4c;
        color: #fff;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    `;

                    const dateSpan = document.createElement('span');
                    dateSpan.textContent = item.date || 'XXX-XX-XX';

                    const statusSpan = document.createElement('span');
                    statusSpan.textContent = '未带安全帽';

                    infoDiv.appendChild(dateSpan);
                    infoDiv.appendChild(statusSpan);
                    card.appendChild(infoDiv);

                    container.appendChild(card);
                });

                // 添加 Layui 分页
                layui.use('laypage', function(){
                    var laypage = layui.laypage;

                    laypage.render({
                        elem: 'demo2-pagination', // 分页容器ID
                        count: data.data.length, // 总条数
                        limit: 10, // 每页显示条数
                        curr: 1, // 当前页
                        layout: ['prev','page','next', 'skip',   'count', 'limit'], // 布局
                        prev: '<i class="layui-icon layui-icon-left"></i>', // 上一页图标
                        next: '<i class="layui-icon layui-icon-right"></i>',  // 下一页图标
                        theme: '#3ACAB8', // 主题色
                        jump: function(obj, first){
                            if(!first){ // 非首次触发
                                // 获取当前页码和每页条数
                                const currentPage = obj.curr;
                                const pageSize = obj.limit;

                                // 计算起始索引和结束索引
                                const startIndex = (currentPage - 1) * pageSize;
                                const endIndex = startIndex + pageSize;

                                // 重新获取数据（这里需要根据实际API调整）
                                $.ajax({
                                    url: commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list",
                                    type: "get",
                                    headers: {
                                        "decrypt": "decrypt",
                                        "Authorization": token
                                    },
                                    data: {
                                        bidCode: bidCode,
                                        name: name,
                                        page: currentPage,
                                        limit: pageSize
                                    },
                                    success: function (data) {
                                        // 清空容器
                                        const container = document.getElementById('demo2-container');
                                        container.innerHTML = '';

                                        // 渲染当前页的数据
                                        if (data.data && data.data.length > 0) {
                                            const pageData = data.data.slice(startIndex, endIndex);

                                            pageData.forEach(item => {
                                                const card = document.createElement('div');
                                                card.className = 'card';
                                                card.style.cssText = `                            width: calc(20% - 10px);
                            height: 150px;
                            background-color: #1a3a4c;
                            border: none;
                            border-radius: 8px;
                            display: flex;
                            flex-direction: column;
                            overflow: hidden;
                        `;

                                                // 创建图片区域
                                                const imgDiv = document.createElement('div');
                                                imgDiv.style.cssText = `                            flex: 1;
                            background-color: #2a4a5c;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #fff;
                            font-size: 12px;
                        `;
                                                imgDiv.textContent = '未带安全帽';
                                                card.appendChild(imgDiv);

                                                // 创建信息区域
                                                const infoDiv = document.createElement('div');
                                                infoDiv.style.cssText = `                            padding: 5px;
                            background-color: #1a3a4c;
                            color: #fff;
                            font-size: 12px;
                            display: flex;
                            justify-content: space-between;
                        `;

                                                const dateSpan = document.createElement('span');
                                                dateSpan.textContent = item.date || 'XXX-XX-XX';

                                                const statusSpan = document.createElement('span');
                                                statusSpan.textContent = '未带安全帽';

                                                infoDiv.appendChild(dateSpan);
                                                infoDiv.appendChild(statusSpan);
                                                card.appendChild(infoDiv);

                                                container.appendChild(card);
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    });
                });
            }
        }
    });
}