let element, layer, table, util, dtree, form;
$(function () {
    layui.extend({
        dtree: '{/}../../js/dtree/dtree',
    }).use(['element', 'layer', 'table', 'code', 'util', 'dtree', 'form'], function () {
        element = layui.element;
        layer = layui.layer;
        table = layui.table;
        util = layui.util;
        dtree = layui.dtree;
        form = layui.form;
        dtree.on("node(demoTree)", function (obj) {
            // layer.msg(JSON.stringify(obj.param));
            generatePortal(obj.param.nodeId);
        })
    });
    getTree();
    generatePortal("1");
    deviceStatus();

});

/**
 * 获取设备树
 */
function getTree() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'conditioning/getAirTreeData',
        data: "",
        dataType: 'json',
        success: function (res) {
            console.log(res);
            const DTree = dtree.render({
                elem: "#demoTree",
                data: res.obj,
                dataFormat: "list",
                // url: "please input your url"
                nodeIconArray: {"3": {"open": "dtree-icon-jian1", "close": "dtree-icon-jia1"}},
                ficon: ["1", "-1"],
                iconfont: ["dtreefont", "layui-icon"],
                iconfontStyle: [
                    {
                        snode: {
                            node: {
                                open: "",
                                close: ""
                            },
                            leaf: "dtree-icon-xinxipilu"  //叶子节点
                        },
                    }
                ],
            });
        }
    })
}

/**
 * 设备状态
 */
function deviceStatus() {
    $.ajax({
        type: 'GET',
        url: dataUrl + 'conditioning/getAirStatus',
        data: "",
        dataType: 'json',
        success: function (res) {
            $("#totalNum").text(res.obj.totalNum);
            $("#online").text(res.obj.online);
            $("#offline").text(res.obj.offline);
        }
    });
}

/**
 年度用电情况
 */
//年度用电情况接口数据获取
function yearElect() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'electricity/yearElect',
        data: "",
        dataType: 'json',
        success: function (res) {
            yearElects(res.obj.yearElect)
        }
    });
}

//年度用电情况ECharts
function yearElects(data) {
    let yearChart = echarts.init(document.getElementById('year-chart'));
    const payload = {
        id: 'liquid-fill-5',
        color: ['#1791ff', '#1791ff'],
        data: {data: Number(data[0].totalElectricity)}
    };
    let yearElectData = payload.data.data;
    const color = payload.color

    yearOption = {
        backgroundColor: 'transparent',
        series: [
            {
                name: '水球图',
                type: 'liquidFill',
                radius: '95%',
                center: ['50%', '50%'],
                waveAnimation: 10, // 动画时长
                amplitude: 5, // 振幅
                // 注释上面2行, 并开启下面三行, 则关闭动画
                // waveAnimation: false,
                // animationDuration: 0,
                // animationDurationUpdate: 0,
                data: [0.55, 0.45],
                itemStyle: {
                    //渐变色设置
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: color[0]
                        },
                        {
                            offset: 1,
                            color: color[1]
                        }
                    ])
                },
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 1,
                            color: color[0]
                        },
                        {
                            offset: 0,
                            color: color[1]
                        }
                    ],
                    globalCoord: false
                },
                outline: {
                    show: true,
                    borderDistance: 0,
                    itemStyle: {
                        borderWidth: 0,
                    }
                },
                backgroundStyle: {
                    color: '#001c22'
                },
                label: {
                    color: '#ffffff',
                    insideColor: '#ffffff',
                    fontSize: 18,
                    lineHeight: 30,
                    formatter: params => {
                        var reg = new RegExp(/^\d+(?:\.\d{0,2})?/)
                        return '' + data[0].totalElectricity.match(reg) + '\n' + '空调高负荷'
                    }
                }
            }
        ]
    }
    yearChart.setOption(yearOption);
}

function generatePortal(floor) {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'conditioning/getNodeDevice',
        data: {
            floor: floor
        },
        dataType: 'json',
        success: function (res) {
            generateContent(res.obj)
        }
    });
}

//动态生成空调状态
function generateContent(data) {
    $(".right>.right-down").empty();
    const totalItems = data.length;  // 假设 data 是一个 JSON 数组
    const container = document.getElementById('container');
    const itemsPerContent = 5;  // 每个内容块显示的项数
    const totalContents = Math.ceil(totalItems / itemsPerContent);

    // 遍历总内容块
    for (let contentIndex = 0; contentIndex < totalContents; contentIndex++) {
        const contentDiv = document.createElement('div');
        contentDiv.className = 'content';

        // 遍历每个内容块里的项
        for (let itemIndex = 0; itemIndex < itemsPerContent; itemIndex++) {
            const itemNumber = contentIndex * itemsPerContent + itemIndex;
            if (itemNumber >= totalItems) break; // 如果已经到达数据末尾，则停止

            const device = data[itemNumber];  // 获取对应的设备数据

            const contentOnDiv = document.createElement('div');
            contentOnDiv.className = 'content-on';

            // 创建标题上部分
            const titleUpDiv = document.createElement('div');
            titleUpDiv.classList.add('title', 'title-up');
            if (device.status === '1') {
                titleUpDiv.style.backgroundImage = 'url(../../img/air/greenBar.png)';
            } else {
                titleUpDiv.style.backgroundImage = 'url(../../img/air/yellowBar.png)';
            }
            titleUpDiv.innerHTML = `
                <span id="item-${itemIndex * 6 + 1}" style="margin-left: 12%;">${device.name}</span>
                <div id="${device.id}-${device.status}" class="icon-button icon-1" style="margin-left: 33%;" onclick="control(event)"></div>
                <div class="icon-button icon-2" style="margin-left: 5%;" onclick="toggleVisibility(event)"></div>
            `;

            // 创建标题下部分
            const titleDownDiv = document.createElement('div');
            titleDownDiv.classList.add('title', 'title-down');
            if (device.status === '1') {
                titleDownDiv.style.backgroundImage = 'url(../../img/air/greenFrame.png)';
            } else {
                titleDownDiv.style.backgroundImage = 'url(../../img/air/yellowFrame.png)';
            }
            titleDownDiv.innerHTML = `
                <div class="distance">当前模式：<span id="item-${itemIndex * 6 + 2}">${device.controlMode}</span></div>
                <div class="distance">运行温度：<span id="item-${itemIndex * 6 + 3}">${device.temp}℃</span></div>
                <div class="distance">夏季阈值：<span id="item-${itemIndex * 6 + 4}">${device.summerThreshold}</span></div>
                <div class="distance">冬季阈值：<span id="item-${itemIndex * 6 + 5}">${device.winterThreshold}</span></div>
                <div class="distance">设备类型：<span id="item-${itemIndex * 6 + 6}">${device.type}</span></div>
            `;

            // 将上下部分的内容添加到 `contentOnDiv` 中
            contentOnDiv.appendChild(titleUpDiv);
            contentOnDiv.appendChild(titleDownDiv);

            // 将每个 `contentOnDiv` 添加到 `contentDiv` 中
            contentDiv.appendChild(contentOnDiv);
        }

        // 将每个 `contentDiv` 添加到容器中
        container.appendChild(contentDiv);
    }
}

function toggleVisibility(event) {
    const contentOnDiv = event.target.closest('.content-on');
    const titleDownDiv = contentOnDiv.querySelector('.title-down');
    titleDownDiv.style.display = titleDownDiv.style.display === 'none' ? 'block' : 'none';
    const iconButton = event.target;
    if (iconButton.classList.contains('icon-2')) {
        iconButton.classList.remove('icon-2');
        iconButton.classList.add('icon-3');
    } else {
        iconButton.classList.remove('icon-3');
        iconButton.classList.add('icon-2');
    }
}

function control(event) {
    const styleId = event.target.id;
    const [id, deviceStatus] = styleId.split('-');
    // 点击事件处理逻辑
    if (deviceStatus === '1'){
        localStorage.setItem("id", id);
        var index = layer.open({
            title: ['设备控制', 'color: #fff; cursor: move;background: transparent;float: left;'],
            type: 2,
            closeBtn: 2,
            content: '../../page/airConditioner/airForm.html',
            area: ["50%", "70%"],
            maxmin: false
        });
    }else{
        layer.msg("设备已关闭，无法进行操作！");
    }
}

function thresholdValueClick() {
    var index = layer.open({
        title: ['阈值设定', 'color: #fff; cursor: move;background: transparent;float: left;'],
        type: 2,
        closeBtn: 2,
        content: '../../page/airConditioner/airThresholdValueForm.html',
        area: ["50%", "70%"],
        maxmin: false
    });
}

function statisticsClick() {
    window.parent.jump('', 15);
}