let element, layer, table;
const bidCode = parent.$('#bidPro').val();
var alarmTableIns;
let weatherArray = [];
let weatherIconArray = [];
let temperatureArray = [];
let timeArray = [];
layui.use(['layer', 'element', 'table'], function () {
    element = layui.element;
    layer = layui.layer;
    table = layui.table;

    //边坡位移监测列表
    DaylightDisplacementList('');
    DaylightDisplacementApi();
    //和风天气API调用
   // zephyrineWeather();
    //有限空间
    LimitedSpaceApi();
    //GPS安装检测
    GPSInstallationApi();
    //实时监测
    realTimeMonitoring();
});

//实时监测
function realTimeMonitoring(){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/RealTimeMonitoring";
    const params = {
        "bidCode": bidCode,
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId
    }
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(url, "POST", encryptStr, 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) {
        error(xhr, status, error)
        setData(null);
    }, "application/json", aqEnnable);

    /* 实时检测赋值 */
    function setData(data) {
        if (data && data.length > 0) {
            $.each(data, function (index, item) {
                var itemHtml = ''
                if(item.isWarn=='0'){
                    itemHtml = `<div class="monitor-item">
                                    <p><span id="wd">${item.val}</span><span>${item.unit}</span></p>
                                    <p>${item.dataType}</p>
                                    <div class="item-icon"></div>
                                </div>`
                }else if(item.isWarn=='1'){
                    itemHtml = `<div class="monitor-item">
                                    <p><span id="wd" class="redColor">${item.val}</span><span class="redColor">${item.unit}</span></p>
                                    <p class="redColor">${item.dataType}</p>
                                    <div class="item-icon"></div>
                                </div>`
                }

                $("#flex-Box").append(itemHtml)
            })
        }
    }
}

//边坡位移监测列表
function DaylightDisplacementList(deviceId){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/getSlopeDisplacementList";

    alarmTableIns = table.render({
        elem: '#demo',
        url: url,
        skin: 'line',
        headers:{
            decrypt:"decrypt",
            "Authorization":token
        },
        where: {
            roleCode: roleCode,
            orgId: orgId,
            userId: userId,
            bidCode: bidCode,
            deviceId: deviceId
        },
        cols: [[
            {field: 'number', width:80,title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
            // {field: 'areaName', title: '区域'},
            {field: 'deviceName', title: '设备名称'},
            {field: 'moduleName', title: '检测类型'},
            {field: 'val', title: '检测值'},
            //  {field: 'sourceData', title: '原数据'},
            {field: 'changeVal', title: '变化值'},
            {field: 'createTime', title: '检测时间'},
            {field: 'isWarn', title: '状态', templet: function (d) {
                    if (d.isWarn == 1) {
                        return '<span style="color: #FF5722;">告警</span>';
                    } else if (d.isWarn == 0) {
                        return '<span style="color: #5FB878;">正常</span>';
                    }else{
                        return '<span style="color: #5FB878;">正常</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);
        },
        page: true, //开启分页
        loading: true, //数据加载中。。。
        limits: [5, 10, 20, 100],
        limit: 7
    })

}

function DaylightDisplacementApi(){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/SlopeDisplacement";
    const params = {
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId,
        "bidCode": bidCode,
        "deviceType":1908
    }
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(url, "POST", encryptStr, true, function () {
    }, function (result) {
        console.log(result);
        if (result.code === 200) {
            DaylightDisplacement(result.data);
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }else if(result.code === 401){
            loginout(1)
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, "application/json",aqEnnable);
}

function DaylightDisplacement(environmentData) {
// 获取存放设备的父元素
    var environmentContainer = document.querySelector('.right-down-left');
    var beforeIds = "-1";
// 遍历数据，生成设备元素并添加到页面中
    for (var i = 0; i < environmentData.length; i += 2) {
        // 创建一个新的 div 作为一组设备信息的容器
        var groupElement = document.createElement('div');
        groupElement.style.width = '100%';
        groupElement.style.height = '25%';
        groupElement.style.display = 'flex';
        console.log(environmentData)
        // 将每组四个设备信息添加到容器中
        for (var j = i; j < i + 2 && j < environmentData.length; j++) {
            var deviceElement = document.createElement('div');
            deviceElement.className = 'environment-equipment';
            // 设置设备名称和状态等信息
            deviceElement.textContent = environmentData[j].deviceName;
            let deviceId = environmentData[j].deviceId; //设备id
            // 赋值id
            deviceElement.id = "devices" + j;
            deviceElement.setAttribute("dev-id",deviceId);
            deviceElement.addEventListener('click', function (obj) {
                // 切换设备图片
                $("#"+obj.target.id).css("background-image", "url('../../img/operEnvironment/daylightDisplacement-normal.png')");
                if (beforeIds !== "-1" && beforeIds !== obj.target.id){
                    // 恢复上一个设备的图片
                    $("#" + beforeIds).css("background-image", "url('../../img/operEnvironment/daylightDisplacement-abnormal.png')");
                }
                // 上一个设备的id
                beforeIds = obj.target.id;
                DaylightDisplacementList(obj.target.getAttribute("dev-id"));
            });
            groupElement.appendChild(deviceElement);
        }
        // 将每组设备信息容器添加到父元素中
        environmentContainer.appendChild(groupElement);
    }


}


//和风天气API调用
function zephyrineWeather() {
    // if (navigator.geolocation) {
    //     navigator.geolocation.getCurrentPosition(function (position) {
    //         let latitude = position.coords.latitude;
    //         let longitude = position.coords.longitude;

    let latitude = '34.007143';
    let longitude = '116.884782';
    console.log("经度：" + longitude + ", 纬度：" + latitude);
    let latLon = '116.747321,33.934215';

    // 百度地图API
    // 创建一个点坐标
    var point = new BMap.Point(longitude, latitude);

    // 根据坐标点获取位置信息
    var geoc = new BMap.Geocoder();
    geoc.getLocation(point, function(rs){
        var addComp = rs.addressComponents;
        var city = addComp.city;
        var urban = addComp.city + ", " + addComp.district;
        $("#city").text(city);
        $("#urban").text(urban);
    });

    const apiUrl = `https://devapi.qweather.com/v7/weather/now?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            const dailyWeather = data.now;
            $("#temp").text(dailyWeather.temp + "°");
            $("#environment").text(dailyWeather.text);
            if (dailyWeather.text === "晴") {
                $("#weather_icon").css("background-image", "url('../../img/operEnvironment/clearWeather2.png')");
            } else if (dailyWeather.text === "多云") {
                $("#weather_icon").css("background-image", "url('../../img/operEnvironment/cloudy.png')");
            } else if (dailyWeather.text === "阴") {
                $("#weather_icon").css("background-image", "url('../../img/operEnvironment/cloudy_sm.png')");
            } else if (dailyWeather.text === "中雨" || dailyWeather.text === "大雨" || dailyWeather.text === "雨" || dailyWeather.text === "小雨") {
                $("#weather_icon").css("background-image", "url('../../img/operEnvironment/cloudy_sm.png')");
            }
        })
        .catch(error => {
            console.error('Error fetching weather data:', error);
        });

    const apiUrls = `https://devapi.qweather.com/v7/weather/3d?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
    fetch(apiUrls)
        .then(response => response.json())
        .then(data => {
            // 获取每日天气数据
            const dailyWeather = data.daily;
            if (dailyWeather && Array.isArray(dailyWeather)) {
                dailyWeather.forEach((day, index) => {
                    const dayIndex = index + 1;
                    const dateId = `#date${dayIndex}`;
                    const tempsId = `#temps${dayIndex}`;
                    const airId = `#air${dayIndex}`;
                    const iconId = `#weather_small_icon${dayIndex}`;

                    // 更新HTML元素内容
                    $(dateId).text(day.fxDate);
                    $(tempsId).text(day.tempMin + '°~' + day.tempMax + '°');
                    $(airId).text(day.textDay);

                    // 根据天气情况更新背景图片
                    const weatherIcon = getWeatherIcon(day.textDay);
                    $(iconId).css('backgroundImage', `url('../../img/operEnvironment/${weatherIcon}')`);
                });
            } else {
                console.log('未能获取有效的天气数据');
            }
        })
        .catch(error => {
            console.error('Error fetching weather data:', error);
        });

    const apiUrlss = `https://devapi.qweather.com/v7/weather/24h?location=${latLon}&key=b353808cee6649dba8ea4c6838319ea4`;
    fetch(apiUrlss)
        .then(response => response.json())
        .then(data => {
            // 获取每小时天气数据
            const dailyWeather = data.hourly;
            if (dailyWeather && Array.isArray(dailyWeather) && dailyWeather.length >= 7) {

                dailyWeather.slice(0, 7).map(hourlyData => {
                    const weather = hourlyData.text; // 天气
                    const temperature = hourlyData.temp; // 温度
                    const time = new Date(hourlyData.fxTime); // 获取时间日期对象
                    let weatherIcon = getWeatherIcon(weather);
                    weatherArray.push(weather);
                    weatherIconArray.push(`../../img/operEnvironment/${weatherIcon}`);
                    temperatureArray.push(temperature);
                    timeArray.push(`${time.getHours()}:${time.getMinutes()}`); // 将小时和分钟以字符串形式存入数组
                });
                console.log('天气数组:', weatherArray);
                console.log('天气图标数组:', weatherIconArray);
                console.log('温度数组:', temperatureArray);
                console.log('时间数组:', timeArray);
                //天气echarts图表
                connect2();

            } else {
                console.log('未能获取有效的天气数据或数据不足7组');
            }
        })
        .catch(error => {
            console.error('获取天气数据时发生错误:', error);
        });

    // });
    // } else {
    //     console.log("浏览器不支持 Geolocation API");
    // }
}

function getWeatherIcon(weatherText) {
    switch (weatherText) {
        case '晴':
            return 'clearWeather2.png';
        case '多云':
            return 'cloudy.png';
        case '阴':
            return 'cloudy_sm.png';
        case '雨':
        case '小雨':
        case '中雨':
        case '大雨':
            return 'cloudy_sm.png';
        default:
            return 'default.png';
    }
}

//天气echarts图表
function connect2() {
    var myChart = echarts.init(document.getElementById('weather_time'));
    var rich = {
        b: {
            color: 'white',
            fontSize: 12,
            lineHeight: 30,
            height: 20
        }
    };

    for (var i = 0; i < weatherIconArray.length; i++) {
        rich[i] = {
            backgroundColor: {
                image: weatherIconArray[i]
            },
            height: 30,
            width: 30
        };
    }
    var option = {
        grid: {
            show: true,
            backgroundColor: 'transparent',
            opacity: 0.3,
            borderWidth: '0',
            top: '150',
            bottom: '0'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            show: false
        },
        xAxis: [
            // 日期
            {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 100,
                zlevel: 100,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    formatter: [
                        '{a|{value}}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: 'white',
                            fontSize: 11
                        }
                    }
                },
                nameTextStyle: {},
                data: timeArray
            },
            // 天气图标
            {
                type: 'category',
                boundaryGap: false,
                position: 'top',
                offset: 20,
                zlevel: 100,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    formatter: function (value, index) {
                        return '{' + index + '| }\n{b|' + value + '}'
                    },
                    rich: rich
                },
                nameTextStyle: {
                    fontWeight: 'bold',
                    fontSize: 19
                },
                data: weatherArray
            }
        ],
        yAxis: {
            type: 'value',
            show: false,
            axisLabel: {
                formatter: '{value} °C',
                color: 'white'
            }
        },
        series: [
            {
                name: '最高气温',
                type: 'line',
                data: temperatureArray,
                symbol: 'emptyCircle',
                symbolSize: 10,
                showSymbol: true,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#C95843'
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    color: 'white',
                    formatter: '{c} °C'
                },
                lineStyle: {
                    width: 1,
                    // shadowOffsetY: -10,
                    // color: 'white'
                },
                areaStyle: {
                    opacity: 1,
                    // shadowOffsetY: -10,
                    color: 'transparent'
                }
            }
        ]
    }

    myChart.setOption(option);
}

//有限空间
function LimitedSpaceApi(){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/FiniteSpace";
    const params = {
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId,
        "bidCode": bidCode
    }
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(url, "POST", encryptStr, true, function () {
    }, function (result) {
        console.log(result);
        if (result.code === 200) {
            LimitedSpace(result.data);
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }else if(result.code === 401){
            loginout(1)
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, "application/json",aqEnnable);
}

function LimitedSpace(environmentData) {
    console.log(environmentData);
// 获取存放设备的父元素
    var environmentContainer = document.querySelector('.environment');
    var beforeId = "-1";

    if(environmentData!=null && environmentData!='' && environmentData.length>0){
        LimitedSpaceEnvironmentApi(environmentData[0].deviceId);
    }
// 遍历数据，生成设备元素并添加到页面中
    for (var i = 0; i < environmentData.length; i += 4) {
        // 创建一个新的 div 作为一组设备信息的容器
        var groupElement = document.createElement('div');
        groupElement.style.width = '100%';
        groupElement.style.height = '50%';
        groupElement.style.display = 'flex';
        // 将每组四个设备信息添加到容器中
        for (var j = i; j < i + 4 && j < environmentData.length; j++) {
            var deviceElement = document.createElement('div');
            deviceElement.className = 'environment-equipment';
            // 设置设备名称和状态等信息
            deviceElement.textContent = environmentData[j].deviceName;
            let deviceId = environmentData[j].deviceId; //设备id
            // 赋值id
            deviceElement.id = "device" + j;
            deviceElement.addEventListener('click', function (obj) {
                // 切换设备图片
                $("#"+obj.target.id).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-normal.png')");
                if (beforeId !== "-1" && beforeId !== obj.target.id){
                    // 恢复上一个设备的图片
                    $("#" + beforeId).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-abnormal.png')");
                }
                // 上一个设备的id
                beforeId = obj.target.id;
                LimitedSpaceEnvironmentApi(deviceId);
            });
            groupElement.appendChild(deviceElement);
        }
        // 将每组设备信息容器添加到父元素中
        environmentContainer.appendChild(groupElement);
    }


}

function LimitedSpaceEnvironmentApi(deviceId){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/getFiniteSpaceEnvironment";
    const params = {
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId,
        "bidCode": bidCode,
        "deviceId":deviceId
    }
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(url, "POST", encryptStr, true, function () {
    }, function (result) {
        console.log(result);
        if (result.code === 200) {
            const data = result.data;
            if (data && data.length > 0) {
                console.log(data);
                $("#yxkjId").empty();
                $.each(data, function (index, item) {
                    let  div="<div class=\" layout monitor-data \" ><p><span>" +
                        item.val+"</span><span>"+item.unit+"</span></p><p>" +
                        item.modeName+"</p><div id='logo' class=\"monitor-icon\"></div>";
                    $("#yxkjId").append(div);
                })
            }
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }else if(result.code === 401){
            loginout(1)
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, "application/json",aqEnnable);
}

//GPS安装检测
function GPSInstallationApi(){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/getGPSInstallation";
    const params = {
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId,
        "bidCode": bidCode,
        "deviceType":"1910"
    }
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(url, "POST", encryptStr, true, function () {
    }, function (result) {
        console.log(result);
        if (result.code === 200) {
            GPSInstallation(result.data);
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }else if(result.code === 401){
            loginout(1)
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, "application/json",aqEnnable);
}

function
GPSInstallation(environmentData) {
    console.log(environmentData);
    if(environmentData && environmentData.length>0){
        GPSInstallationEnvironmentApi(environmentData[0].deviceId);
    }
// 获取存放设备的父元素
    var environmentContainer = document.querySelector('.environments');
    var beforeIdss = "-1";
// 遍历数据，生成设备元素并添加到页面中
    for (var i = 0; i < environmentData.length; i += 4) {
        // 创建一个新的 div 作为一组设备信息的容器
        var groupElement = document.createElement('div');
        groupElement.style.width = '100%';
        groupElement.style.height = '50%';
        groupElement.style.display = 'flex';
        // 将每组四个设备信息添加到容器中
        for (var j = i; j < i + 4 && j < environmentData.length; j++) {
            var deviceElement = document.createElement('div');
            deviceElement.className = 'environment-equipment';
            // 设置设备名称和状态等信息
            deviceElement.textContent = environmentData[j].deviceName;
            let deviceId = environmentData[j].deviceId; //设备id
            // 赋值id
            deviceElement.id = "devicess" + j;
            deviceElement.addEventListener('click', function (obj) {
                // 切换设备图片
                $("#"+obj.target.id).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-normal.png')");
                if (beforeIdss !== "-1" && beforeIdss !== obj.target.id){
                    // 恢复上一个设备的图片
                    $("#" + beforeIdss).css("background-image", "url('../../img/operEnvironment/LimitedMonitoring-abnormal.png')");
                }
                // 上一个设备的id
                beforeIdss = obj.target.id;
                GPSInstallationEnvironmentApi(deviceId);
            });
            groupElement.appendChild(deviceElement);
        }
        // 将每组设备信息容器添加到父元素中
        environmentContainer.appendChild(groupElement);
    }


}

function GPSInstallationEnvironmentApi(deviceId){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/GPSInstallationEnvironment";
    const params = {
        "roleCode": roleCode,
        "orgId": orgId,
        "userId": userId,
        "bidCode": bidCode,
        "deviceId":deviceId
    }
    let encryptStr = encryptCBC(JSON.stringify(params));
    ajaxRequest(url, "POST", encryptStr, true, function () {
    }, function (result) {
        console.log(result);
        if (result.code === 200) {
            const data = result.data;
            $("#gisId").empty();
            if (data && data.length > 0) {
                $.each(data, function (index, item) {
                    let gisDiv=" <div class=\"layout monitor-data wd\"><p><span id=\"gis_wd\">"+item.val+
                        "</span><span>"+item.unit+"</span></p>"+" <p>"+item.modeName+"</p>"+
                        " <div id='logo' class=\"monitor-icon\"></div>";
                    $("#gisId").append(gisDiv);

                })
            }
        } else if (result.code === 500) {
            layer.msg(result.msg, { icon: 2 });
        }else if(result.code === 401){
            loginout(1)
        }
    }, function (xhr, status, error) {
        error(xhr, status, error)
    }, "application/json",aqEnnable);
}