let table, layer, form, laydate;
let myChart = null, myChart2 = null;
layui.use(['layer', 'table', 'form', 'laydate'], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;
    laydate = layui.laydate;
    laydate.render({
        elem: "#ID-laydate-rangeLinked",
        range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
        rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    });

    // 工程安全分析-一本账
    initTable();
    // 工程安全分析-球机列表
    getBallSelect()

    initTable2();

});

function initTable(startTime, endTime) {
    const url = commonUrl + "screen/proSafety/selectProSafetyLedger";
    table.render({
        elem: '#demo1',
        url: url,
        id: 'demo1',
        skin: 'line',
        page: true,
        height: 'full-505',
        headers: {
            "decrypt": "decrypt",
            "Authorization": token
        },
        where: {
            startTime: startTime,
            endTime: endTime
        },
        cols: [[
            {type: 'numbers', title: '序号', width: '10%'}, // 添加序号列
            {field: 'riskCode', title: '风险编号', align: 'center', width: '15%'},
            {field: 'riskSite', title: '作业部位', align: 'center', width: '15%'},
            {field: 'riskLevel', title: '风险等级', align: 'center', width: '15%'},
            {field: 'controller', title: '预控措施', align: 'center', width: '15%'},
            {field: 'riskController', title: '风险控制关键因素', align: 'center', width: '20%'},
            {field: 'startTime', title: '开始日期', align: 'center', width: '10%'},
        ]],
        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) {

        }
    })
}

function query() {
    let startTime = "";
    let endTime = "";
    if ($("#ID-laydate-start-date-1").val() != "") {
        startTime = $("#ID-laydate-start-date-1").val();
        endTime = $("#ID-laydate-end-date-1").val();
    } else {
        startTime = "";
        endTime = "";
    }
    initTable(startTime, endTime);
}

function getBallSelect() {

    const url = commonUrl + "screen/proSafety/selectBallSelect"
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {
        },
        function (result) {
            if (result.code === 200) {
                setData(result.data);
            } else if (result.code === 500) {
                console.error("实时监测" + result.msg);
                setData(null);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            errorFn(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );

    /* 实时检测赋值 */
    function setData(data) {
        if (data) {
            console.log(data)
            const dynamicList = document.getElementById('dynamic-list');
            dynamicList.innerHTML = ''; // 清空现有内容

            data.forEach((item, index) => {
                const listItem = document.createElement('li');
                listItem.className = index === 0 ? 'layout check' : 'layout nocheck';
                listItem.textContent = item.ballName;
                listItem.onclick = function() {
                    changeDynamicData(this, index);
                };
                dynamicList.appendChild(listItem);
            });
        }
    }

    function changeDynamicData(element, index){
        // 移除所有选中状态
        const dynamicItems = document.querySelectorAll('#dynamic-list .layout');
        dynamicItems.forEach(item => {
            item.className = 'layout nocheck';
        });

        // 设置当前选中项
        element.className = 'layout check';

        // 显示选中项信息
        const selectedItem = responseData.data[index];
        const display = document.getElementById('selected-data');

        let displayHTML = `
                <div class="data-item"><strong>选中项:</strong> ${selectedItem.ballName}</div>
                <div class="data-item"><strong>索引:</strong> ${index}</div>
            `;

        // 添加其他非空字段
        Object.keys(selectedItem).forEach(key => {
            if (selectedItem[key] !== null && key !== 'ballName') {
                displayHTML += `<div class="data-item"><strong>${key}:</strong> ${selectedItem[key]}</div>`;
            }
        });
        display.innerHTML = displayHTML;
    }
    // 页面加载完成后初始化
    window.onload = function() {
        // 默认选中第一个动态项
        const firstDynamicItem = document.querySelector('#dynamic-list .layout');
        if (firstDynamicItem) {
            changeDynamicData(firstDynamicItem, 0);
        }
    };


}

function initTable2(startTime, endTime,ballName) {
    const url = commonUrl + "screen/proSafety/selectProSafetyVideo";
    // 获取数据
    $.ajax({
        url: url,
        type: "get",
        headers: {
            "decrypt": "decrypt",
            "Authorization": token
        },
        data: {
            startTime:'2025-10-12',
            endTime:'2025-10-17',
            ballName:'测试球机',
            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 = data.name;
                    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.createTime;

                    const statusSpan = document.createElement('span');
                    statusSpan.textContent = data.name;

                    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/proSafety/selectProSafetyVideo",
                                    type: "get",
                                    headers: {
                                        "decrypt": "decrypt",
                                        "Authorization": token
                                    },
                                    data: {
                                        startTime:startTime,
                                        endTime:endTime,
                                        ballName:ballName,
                                        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);
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    });
                });
            }
        }
    });
}