$(function () {
    yearElect();
    // powerConsumptionRank();

    getDeviceMessage();
    getAllLampStatus();
    getSevenDayElectricity()
    getTwelveMonthElectricity()
    getElectricityOrderBy()

});
//控制管理
function control(){
	var index = layer.open({
	    title: ['媒体设定', 'color: #fff; cursor: move;background: transparent;float: left;'],
	    type: 2,
	    closeBtn: 2,
	    content: '../../page/light/videoLightSecondaryPage.html',
	    area: ["50%", "70%"],
	    maxmin: false
	});
	
  // window.open("http://192.168.0.110:81?user=LED001&pd=YTw4t2H9kHjpfzhokbZ%2BIT31th6xCBOyJtGWmgMxvsc3P%2BW4V7EikPFjaDMpoBTT0%2F%2BHxueI8KoJaLrwKsjO%2BNiWGGoGgb5VkD4hqMhczyUhNjVKr10L8Tcl9yw1U3CgGorKUdGyjB%2Fm8GZARuVNANd0LejaPmxrMTC%2BbGKNAf4%3D&path=/equipmentCorrelation");
}
function getDeviceMessage(){
    $.ajax({
        type: 'POST',
        url: dataUrl + 'lamp/getDeviceMessage',
        data: "",
        dataType: 'json',
        success: function (data) {
            dome(data.obj);
        }
    });
}
/**
 * 智慧路灯-七日用电量
 */
function getSevenDayElectricity() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'lamp/getElectricityFromWeek',
        data: "",
        dataType: 'json',
        success: function (data) {
            sevenDayElectricityEcharts(data.obj);
        }
    });
}

function sevenDayElectricityEcharts(data){
    let sevenDayChart = echarts.init(document.getElementById('sevenDayElectricity'));
    const xSevenArray = data.map(item => item.date+"日");
    const ySevenArray = data.map(item => parseFloat( item.electricityUse).toFixed(3));
    const maxEntity = data.reduce((max, entity) => {
        return (entity.electricityUse > max.electricityUse) ? entity : max;
    });
    let options = {
        backgroundColor: "transparent",
        tooltip: { // 配置弹窗
            trigger: 'axis', // 触发类型为坐标轴触发
            axisPointer: { // 轴指示器配置
                type: 'shadow', // 影子指示器
            },
            formatter: function(params) {
                const date = params[0].name; // 获取日期
                const electricityUse = params[0].value; // 获取电量
                return `${date}<br/>电量使用: ${electricityUse} KW\h`;
            },
        },
        xAxis: {
            data: xSevenArray,
            axisLine: {
                    color: "#0177d4",
            },
            axisLabel: {
            color: "#fff",
            fontSize: 14,
            // rotate: 45, // 旋转角度，帮助节省空间
            },

        },
        yAxis: {
            name: "单位：KW\\h",
            nameTextStyle: {
                color: "#fff",
                fontSize: 14,
            },
            axisLine: {
                lineStyle: {
                    color: "#0177d4",
                },
            },
            axisLabel: {
                color: "#fff",
                fontSize: 14,
            },
            splitLine: {
                show: true, // 显示分隔线
                lineStyle: {
                    color: "#ffffff",
                    type: 'dashed', // 设置为虚线
                },
            },
            //interval: 10,
            max:  Math.ceil(maxEntity.electricityUse),
        },
        series: [
            {
                type: "bar",
                barWidth: 18,
                itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#0eebe4",
                                },
                                {
                                    offset: 0.8,
                                    color: "#058fe7",
                                },
                            ],
                            false
                        ),
                },
                data: ySevenArray,
                label: {
                        show: true,
                        position: "top",
                        formatter: "{c}",
                        textStyle: {
                            color: "#fff",
                        },
                },
            },
        ],
    };
    sevenDayChart.setOption(options);
}

/**
 * 智慧路灯-月总和年总用电量
 */
//年度用电情况接口数据获取
function yearElect() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'lamp/getElectricityCount',
        data: "",
        dataType: 'json',
        success: function(res) {
            yearElects(res.obj)
            monthElects(res.obj)
        }
    });
}
function yearElects(data){
    let yearChart = echarts.init(document.getElementById('year-chart'));
    const payload = { id: 'liquid-fill-5', color: ['#1791ff', '#1791ff'], data: { data: Number(data.yearElectricity) } };
    const color = payload.color

    yearOption = {
        backgroundColor: 'transparent',
        series: [
            {
                name: '水球图',
                type: 'liquidFill',
                radius: '95%',
                center: ['50%', '50%'],
                waveAnimation: 10, // 动画时长
                amplitude: 5, // 振幅
                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 => {
                        
                        return parseFloat( data.yearElectricity).toFixed(3) + 'KW\\h' + '\n' + '年总用电量'
                    }
                }
            }
        ]
    }
    yearChart.setOption(yearOption);
}

function monthElects(data){
    let yearChart = echarts.init(document.getElementById('year-container'));
    const payload = { id: 'liquid-fill-5', color: ['#1791ff', '#1791ff'], data: { data: Number(data.monthElectricity) } };
    const color = payload.color

    monthOption = {
        backgroundColor: 'transparent',
        series: [
            {
                name: '水球图',
                type: 'liquidFill',
                radius: '85%',
                center: ['50%', '50%'],
                waveAnimation: 10, // 动画时长
                amplitude: 5, // 振幅
                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 => {
                        return parseFloat( data.monthElectricity).toFixed(3) + 'KW\\h' + '\n' + '月总用电量'
                    }
                }
            }
        ]
    }
    yearChart.setOption(monthOption);
}

/**
 * 智慧路灯-近十二个月用电量
 */
function getTwelveMonthElectricity() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'lamp/getElectricityFromMonth',
        data: "",
        dataType: 'json',
        success: function (data) {
            yearElectricityEcharts(data.obj);
        }
    });
}
/**
 * 智慧路灯-近十二个月用电量
 */
function yearElectricityEcharts(res){
    let yearChart = echarts.init(document.getElementById('yearElectricity'));

    const xMonthArray = res.map(item => item.date);
    const yMonthArray = res.map(item => parseFloat( item.electricityUse).toFixed(3));
    const maxEntity = res.reduce((max, entity) => {
        return (entity.electricityUse > max.electricityUse) ? entity : max;
    });
    let option = {
        backgroundColor: "transparent",
        tooltip: { // 配置弹窗
            trigger: 'axis', // 触发类型为坐标轴触发
            axisPointer: { // 轴指示器配置
                type: 'shadow', // 影子指示器
            },
            formatter: function(params) {
                const date = params[0].name; // 获取日期
                const electricityUse = params[0].value; // 获取电量
                return `${date}<br/>电量使用: ${electricityUse} KW\h`;
            },
        },
        xAxis: {
            data: xMonthArray ,
            axisLine: {
                lineStyle: {
                    color: "#0177d4",
                },
            },
            axisLabel: {
                color: "#fff",
                fontSize: 14,
                rotate: -45, // 旋转角度，帮助节省空间
                overflow: 'truncate', // 或者 'break'，根据需要选择
            },

        },
        yAxis: {
            name: "单位：KW\\h",
            nameTextStyle: {
                color: "#fff",
                fontSize: 14,
            },
            axisLine: {
                lineStyle: {
                    color: "#0177d4",
                },
            },
            axisLabel: {
                color: "#fff",
                fontSize: 14,

            },
            splitLine: {
                show: true, // 显示分隔线
                lineStyle: {
                    color: "#ffffff",
                    type: 'dashed', // 设置为虚线
                },
            },
            //interval: 1000,
            max:  Math.ceil(maxEntity.electricityUse),
        },
        series: [
            {
                type: "line",
                barWidth: 18,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#6b59f5",
                                },
                                {
                                    offset: 0.8,
                                    color: "#05bfb5",
                                },
                            ],
                            false
                        ),
                    },
                },
                data: yMonthArray,
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        formatter: "{c}",
                        textStyle: {
                            color: "#fff",
                        },
                    }
                }
            },
        ],
    };
    yearChart.setOption(option);
}

/**
 * 智慧路灯-昨日用电排名
 */
function getElectricityOrderBy() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'lamp/getElectricityOrderBy',
        data: "",
        dataType: 'json',
        success: function (res) {
            powerConsumptionRank(res.obj);
        }
    });
}

/**
 * 智慧路灯-昨日用电排名
 */
function powerConsumptionRank(data){
    const myChart = echarts.init(document.getElementById('powerConsumptionRanking'));
    data.sort((a, b) => b.value - a.value);
    var datas = data;
    option = {
        backgroundColor: 'transparent',
        grid: {
            left: 30,
            right:10,
            bottom: 0,
            top:0,
            containLabel: true,
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'none',
            },
            formatter: function (params) {
                return params.data.name + ' : ' + parseFloat(params.data.value).toFixed(3);
            },
        },
        xAxis: {
            show: false,
            type: 'value',
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: true,
                    align: 'right',
                    textStyle: {
                        fontSize: 18,
                        color: 'rgb(255,255,255)',
                        rich: {
                            name: {
                                padding: [0,10,0,20],
                                width:50,
                                borderWidth:1,
                                align: 'left',
                            },
                        },
                    },
                    formatter: (name) => {
                        var index = datas.map((item) => item.name).indexOf(name) + 1;
                        return [
                            '{' + 'index' + '|' +'NO.'+ index + '}',
                            '{name|' + name + '}',
                        ].join('');
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: datas.map((item) => item.name),
            },
            {
                type:'category',
                inverse: true,
                axisLabel:{
                    show:true,
                    margin:30,//右侧y轴数字的外边距
                    textStyle: {
                        fontSize: 16,
                        color: 'rgb(255,255,255)',
                    },
                    formatter: (value) => {
                        return parseFloat( value).toFixed(3) +'KW\\h'
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: datas.map((item) => {
                    return item.value
                }),

            }
        ],
        series: [
            {
                name: '值',
                type: 'bar',
                zlevel: 1,
                showBackground: true,
                // 柱状条上方的白色线条
                label: {
                    show: true,
                    position: 'right', // 位置
                    color: '#fff',
                    fontSize: 14,
                    fontWeight:'bold',
                    distance: -1, // 字与条形图bar 的距离
                    formatter: '|', // 这里是数据展示的时候显示的数据
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#3cf0f1',
                            },
                            {
                                offset: 1,
                                color: '#67b1f5',
                            },
                        ]),
                    },
                },
                barWidth: 14,
                data: data,
            },
        ],
    };

    myChart.setOption(option);
}

function dome(data){
    const container = document.getElementById('centerContainer');
    let row = document.createElement('div');
    row.className = 'center_title';

    data.forEach((item, index) => {
        if (index > 0 && index % 3 === 0) {
            container.appendChild(row);
            row = document.createElement('div');
            row.className = 'center_title';
        }

        const icon = document.createElement('div');
        icon.className = 'icon';
        if (item.type === '1') {
            icon.style.backgroundImage = `url(../../img/streeLamp/openButton.png)`;
        }else {
            icon.style.backgroundImage = `url(../../img/streeLamp/closeKey.png)`;
        }
        icon.onclick = () => {
			localStorage.setItem("id", item.id);
			var index = layer.open({
			    title: ['设备', 'color: #fff; cursor: move;background: transparent;float: left;'],
			    type: 2,
			    closeBtn: 2,
			    content: '../../page/light/streetLightSecondaryPage.html',
			    area: ["50%", "70%"],
			    maxmin: false
			});
           // window.parent.jump('', 17);
        };
        const nameSpan = document.createElement('span');
        nameSpan.className = 'icon_top';
        nameSpan.id = `streetLightName${item.id}`;
        nameSpan.textContent = item.lightName;

        const typeSpan = document.createElement('span');
        typeSpan.className = 'icon_top1';
        typeSpan.id = `streetLightType${item.id}`;
        typeSpan.textContent = item.type ==='1'?"开启":"关闭";

        icon.appendChild(nameSpan);
        icon.appendChild(typeSpan);
        row.appendChild(icon);
    });

    container.appendChild(row);

}

function getAllLampStatus() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'lamp/getAllLampStatus',
        data: "",
        dataType: 'json',
        success: function(res) {
            $("#online").text(res.obj.online);
            $("#offline").text(res.obj.offline);
            $("#total").text(res.obj.deviceTotal);

        }
    });
}