let table, layer, form, laydate;
let ballMachineData = [] // 存储球机列表数据
let selectedBallName = "" // 当前选中的球机名称
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()
});

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);
    initTable2(startTime, endTime,selectedBallName);
}

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 && data.length > 0) {
            ballMachineData = 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)
            })

            if (data.length > 0) {
                selectedBallName = data[0].ballName
                // 获取当前时间范围
                const startTime = $("#ID-laydate-start-date-1").val() || ""
                const endTime = $("#ID-laydate-end-date-1").val() || ""
                // 加载第一个球机的视频数据
                initTable2(startTime, endTime, selectedBallName)
            }
        }
    }

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

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

        selectedBallName = ballMachineData[index].ballName

        // 获取当前时间范围
        const startTime = $("#ID-laydate-start-date-1").val() || ""
        const endTime = $("#ID-laydate-end-date-1").val() || ""
        // 重新加载视频数据
        initTable2(startTime, endTime, selectedBallName)
    }
}

function initTable2(startTime, endTime,ballName) {
    const url = commonUrl + "screen/proSafety/selectProSafetyVideo";
    // 获取数据
    $.ajax({
        url: url,
        type: "get",
        headers: {
            "decrypt": "decrypt",
            "Authorization": token
        },
        data: {
            startTime:startTime,
            endTime:endTime,
            ballName:ballName,
            page: '1',
            limit: '10'
        },
        success: (response) => {
            const container = document.getElementById("demo2-container")
            container.innerHTML = "" // 清空容器

            if (response.code === 0 && response.data && response.data.length > 0) {
                response.data.forEach((item) => {
                    const card = document.createElement("div")
                    card.className = "card"
                    card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`

                    // 创建图片区域
                    const imgDiv = document.createElement("div")
                    imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`

                    // 显示实际图片
                    if (item.imagePath) {
                        const img = document.createElement("img")
                        img.src = commonUrl + item.imagePath // 拼接完整图片路径
                        img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
                        img.onerror = function () {
                            // 图片加载失败时显示文字
                            this.style.display = "none"
                            imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
                        }
                        imgDiv.appendChild(img)
                    } else {
                        imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
                    }

                    card.appendChild(imgDiv)

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

                    const dateSpan = document.createElement("span")
                    dateSpan.textContent = item.createTime || "XXX-XX-XX"

                    const statusSpan = document.createElement("span")
                    statusSpan.textContent = item.name || "未知"

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

                    container.appendChild(card)
                })

                // 添加 Layui 分页
                layui.use("laypage", () => {
                    var laypage = layui.laypage
                    laypage.render({
                        elem: "demo2-pagination",
                        count: response.total || response.data.length, // 使用total字段
                        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: (obj, first) => {
                            if (!first) {
                                const currentPage = obj.curr
                                const pageSize = obj.limit

                                // 重新获取数据
                                $.ajax({
                                    url: url,
                                    type: "get",
                                    headers: {
                                        decrypt: "decrypt",
                                        Authorization: token,
                                    },
                                    data: {
                                        startTime: startTime,
                                        endTime: endTime,
                                        ballName: ballName,
                                        page: currentPage,
                                        limit: pageSize,
                                    },
                                    success: (pageResponse) => {
                                        const container = document.getElementById("demo2-container")
                                        container.innerHTML = ""

                                        if (pageResponse.code === 0 && pageResponse.data && pageResponse.data.length > 0) {
                                            pageResponse.data.forEach((item) => {
                                                const card = document.createElement("div")
                                                card.className = "card"
                                                card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`

                                                const imgDiv = document.createElement("div")
                                                imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`

                                                if (item.imagePath) {
                                                    const img = document.createElement("img")
                                                    img.src = commonUrl + item.imagePath
                                                    img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
                                                    img.onerror = function () {
                                                        this.style.display = "none"
                                                        imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
                                                    }
                                                    imgDiv.appendChild(img)
                                                } else {
                                                    imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
                                                }

                                                card.appendChild(imgDiv)

                                                const infoDiv = document.createElement("div")
                                                infoDiv.style.cssText = `padding: 5px;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`

                                                const dateSpan = document.createElement("span")
                                                dateSpan.textContent = item.createTime || "XXX-XX-XX"

                                                const statusSpan = document.createElement("span")
                                                statusSpan.textContent = item.name || "未知"

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

                                                container.appendChild(card)
                                            })
                                        }
                                    },
                                })
                            }
                        },
                    })
                })
            } else {
                // 没有数据时显示提示
                container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">暂无数据</div>'
            }
        },
        error: (xhr, status, error) => {
            console.error("视频数据加载失败:", error)
            const container = document.getElementById("demo2-container")
            container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">数据加载失败</div>'
        },
    });
}