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;

		// 响应成功后的拦截器
		$.ajaxSetup({
			beforeSend: function(xhr, options) {
				var originalSuccess = options.success
				options.success = function(data, textStatus, jqXhr) {
						data = modifyResponseData(data);
				// success(data,textStatus, jqXhr);
					originalSuccess.apply(this, arguments)
				}
			}
		})

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

//实时监测
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',
        height:"#right-down-right-10",
        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: 5
    })

}

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) {
    let html = '';
    $.each(environmentData, function (index, item) {
        html += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData(this)">' +
        '<img src="../../img/operEnvironment/daylightDisplacement-abnormal.png">' + 
        '<p>'+item.deviceName+'</p>' + 
        '</div>'; 
    })
    $('.right-down-left').empty().append(html);
}

function loadData(that){
    const devId = $(that).attr('dev-id');
    $('.right-down-left .item').each(function(){
        $(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png")
    })
    $(that).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-normal.png")
    DaylightDisplacementList(devId);
}

function backData(type){
    if(type === 1){
        $('.right-down-left .item').each(function(){
            $(this).find('img').attr('src',"../../img/operEnvironment/daylightDisplacement-abnormal.png")
        })
        DaylightDisplacementList('');
    }else if(type === 2){
        $('.environment .item').each(function(index, item){
            $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
            if(index === 0){
                const devId = $(this).attr('dev-id');
                LimitedSpaceEnvironmentApi(devId);
            }
        })
        
    }else if(type === 3){
        $('.environments .item').each(function(index,item){
            $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
            if(index === 0){
                const devId = $(this).attr('dev-id');
                LimitedSpaGPSInstallationEnvironmentApiceEnvironmentApi(devId);
            }
        })
    }
    
}

//和风天气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) {
    let html = '';
    $.each(environmentData, function (index, item) {
        if(index === 0){
            LimitedSpaceEnvironmentApi(item.deviceId);
        }
        html += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData2(this)">' +
        '<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' + 
        '<p>'+item.deviceName+'</p>' + 
        '</div>'; 
    })
    $('.environment').empty().append(html);
}

function loadData2(that){
    const devId = $(that).attr('dev-id');
    $('.environment .item').each(function(){
        $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
    })
    $(that).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-normal.png")
    LimitedSpaceEnvironmentApi(devId);
}

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) {
    let html = '';
    $.each(environmentData, function (index, item) {
        if(index === 0){
            GPSInstallationEnvironmentApi(item.deviceId);
        }
        html += '<div class="item layout" dev-id = "'+item.deviceId+'" onclick="loadData3(this)">' +
        '<img src="../../img/operEnvironment/LimitedMonitoring-abnormal.png">' + 
        '<p>'+item.deviceName+'</p>' + 
        '</div>'; 
    })
    $('.environments').empty().append(html);

}

function loadData3(that){
    const devId = $(that).attr('dev-id');
    $('.environments .item').each(function(){
        $(this).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-abnormal.png")
    })
    $(that).find('img').attr('src',"../../img/operEnvironment/LimitedMonitoring-normal.png")
    GPSInstallationEnvironmentApi(devId);
}

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);
}

/* 智慧手环-table */
function loadZhshTable(){
    const url = commonUrl + "screen/largeScreen/operatingEnvironment/getUserShList";
    alarmTableIns = table.render({
        elem: '#zhsh-table',
        url: url,
        height:"#zhsh-table-box-20",
        // skin: 'line',
        // height: 'full',
        headers:{
            decrypt:"decrypt",
            "Authorization":token
        },
        where: {
            roleCode: roleCode,
            orgId: orgId,
            userId: userId,
            bidCode: bidCode
        },
        cols: [[
            {field: 'number', width:'5%',title: '序号', align: 'center', type: 'numbers', fixed: 'left'},
            {field: 'deviceName', title: '设备名称',width:'25%'},
            {field: 'userName', title: '姓名',width:'20%'},
            {field: 'xl', title: '心率',width:'15%'},
            {field: 'xy', title: '血压',width:'20%'},
            {field: 'wd', title: '温度',width:'15%'}
        ]],
        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: 5
    })

}