$(document).ready(function () {

    //智慧用水-雨水回收量统计
    // rainwaterRecovery();
    // 智慧用水-年用水量统计
    waterYearUse();
    // 智慧用水-近十二个月回收用水量
    getPortStatusNum();
    // 智慧用水-设备状态
    // switchStatus();
    // 智慧用水-告警表格
    waterAlarmInformation();
    // 智慧用水-近12月用水量折线图
    monthlyData();
    // 智慧用水-近7日用水量折线图
    weeklyData();
    // 智慧用水-今日用水排名
    waterRanking();
    // 智慧用水-今日时间段用水
    timePeriodWaterUse();
    //初始渲染页面
    init();
    // 定时任务(每1分钟执行)
    setInterval(() => {
    init();
    }, 1000*60);
})
function init(){
    // changeStore(localStorage.setstoreLJYL)
    document.getElementById('onlineCount').innerText = localStorage.getItem('countOnline');
    document.getElementById('offlineCount').innerText = localStorage.getItem('countOffline');
    document.getElementById('total').innerText = 9;
    console.log('每隔60秒执行');
}

/**
 * 智慧用水-雨水回收量统计
 */

function rainwaterRecovery() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'water/rainwaterRecovery',
        data: "",
        dataType: 'json',
        success: function (res) {
            changeStore(res.obj.yearRecovery);
        }
    });
}


    function changeStore(done) {
        console.log(done)
        const domeString = done.toString();
        const doneArray = domeString.split('').reverse();
        console.log(doneArray)
        for (let i = 0; i < doneArray.length; i++) {
            document.getElementById('recycle' + i).innerText = doneArray[i];
        }
    }

/**
 * 智慧用水-年用水量统计
 */
function waterYearUse() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'water/waterYearUse',
        data: "",
        dataType: 'json',
        success: function (res) {
            changeUse(res.obj.waterUse);
        }
    });
}

function changeUse(done) {
    const domeString = done.toString();
    const doneArray = domeString.split('').reverse();
    console.log(doneArray)
    for (let i = 0; i < doneArray.length; i++) {
        document.getElementById('yearUse' + i).innerText = doneArray[i];
    }
}

/**
 * 智慧用水-设备状态
 */
function switchStatus() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'electricity/switchStatus',
        data: "",
        dataType: 'json',
        success: function (res) {
            let offline = res.obj.switchStatus[0];
            document.getElementById('onlineCount').innerText = offline.onlineCount;
            document.getElementById('offlineCount').innerText = offline.offlineCount;
            document.getElementById('total').innerText = offline.total;
        }
    });
}

/**
 * 智慧用水-进十二个月回收用水量
 */
function getPortStatusNum() {
    $.ajax({
        type: 'POST',
        // async: false,
        url: dataUrl + 'water/waterStoreInDecember', // 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            var resMsg = data.resMsg;
            console.log(data.obj)
            if ("数据获取成功" === resMsg) {
                setTimeout(function () {
                    //用电统计
                    powerStatChart(data.obj);
                    let done = data.obj.reduce((sum, item) => sum + parseFloat(item.waterStore), 0);
                    done = parseFloat(done.toString().slice(0, 6));
                    console.log("done", done)
                    changeStore(done)
                }, 200)

            }
        },
        error: function (XMLHttpRequest, textStatus, e) {
            layer.msg('数据请求发生异常,请稍后重试', {
                icon: 16,
                scrollbar: false
            });
        }
    });
}

function powerStatChart(data) {
    echarts.init(document.getElementById('reclaimedWater')).dispose(); // 销毁实例
    const myChart = echarts.init(document.getElementById('reclaimedWater'));

    const lastTwelveMonths = data.map(item => item.yearMonth);
    const yWeeklyValueArr = data.map(item => item.waterStore);

    let monthlyOption = {
        title: {
            subtext: '单位 : m³',
            subtextStyle: {
                fontSize: 14,
                color: '#fff'
            }
        },
        tooltip: {
            trigger: "axis",
        },
        grid: {
            left: '0%',
            right: '5%',
            top: '20%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#fff',
                    interval: 1,

                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#397cbc'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#195384'
                    }
                },
                data: lastTwelveMonths,
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#27b4c2'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#e7e9ea'
                    },
                },
            }],
        series: [
            {
                name: '月回收水量',
                type: 'line',
                stack: '总量',

                symbolSize: 0,
                itemStyle: {
                    normal: {
                        color: '#0092f6',
                        lineStyle: {
                            color: "#0092f6",
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(0,146,246,0.9)'
                            }]),
                        }
                    }
                },
                markPoint: {
                    itemStyle: {
                        normal: {
                            color: 'red'
                        }
                    }
                },
                data: yWeeklyValueArr,
            }
        ]
    };
    myChart.setOption(monthlyOption);
}

/**
 * 智慧用水-报警表格
 */
function waterAlarmInformation() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'water/warnInfos',
        data: "",
        dataType: 'json',
        success: function (res) {
            waterAlarmList(res.obj);
        },
    });
}

function waterAlarmList(data) {
    let equipNum = 5;
    if (data.equipInfo.length < equipNum) {
        equipNum = data.equipInfo.length;
    }
    let html = ""
    for (let i = 0; i < equipNum; i++) {
        html += "<div style='font-size: 12px'>"
        html += "<span>" + data.equipInfo[i].waterName + "</span>"
        html += "<span>" + data.equipInfo[i].waterLocation + "</span>"
        html += "<span>" + data.equipInfo[i].alarmType + "</span>"
        html += "<span>" + data.equipInfo[i].alarmTime + "</span>"
        html += "</div>"
    }
    $(".readLine>.table").append(html)
}

/**
 * 智慧用水-近12月用水量折线图
 */
function monthlyData() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'water/waterUseInDecember',
        data: "",
        dataType: 'json',
        success: function (res) {
            monthlyECharts(res.obj)
        }
    });
}

function monthlyECharts(data) {
    let monthlyChart = echarts.init(document.getElementById('monthly-water'));
    const lastTwelveMonths = data.map(item => item.yearMonth);
    const yWeeklyValueArr = data.map(item => item.waterUse);

    let monthlyOption = {
        title: {
            subtext: '单位 : m³',
            subtextStyle: {
                fontSize: 14,
                color: '#fff'
            }
        },
        tooltip: {
            trigger: "axis",
        },
        grid: {
            left: '0%',
            right: '5%',
            top: '20%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#fff',
                    interval: 1,
                    // rotate: -45
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#397cbc'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#195384'
                    }
                },
                data: lastTwelveMonths,
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#27b4c2'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#e7e9ea'
                    },
                },
            }],
        series: [
            {
                name: '月总用水量',
                type: 'line',
                stack: '总量',

                symbolSize: 0,
                itemStyle: {
                    normal: {
                        color: '#0092f6',
                        lineStyle: {
                            color: "#0092f6",
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: 'rgba(7,44,90,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(0,146,246,0.9)'
                            }]),
                        }
                    }
                },
                markPoint: {
                    itemStyle: {
                        normal: {
                            color: 'red'
                        }
                    }
                },
                data: yWeeklyValueArr,
            }
        ]
    };
    monthlyChart.setOption(monthlyOption);
}

/**
 * 智慧用水-近7日用水量折线图
 */
function weeklyData() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'water/waterForNearly7Days',
        data: "",
        dataType: 'json',
        success: function (res) {
            weeklyECharts(res.obj)
        }
    });
}

function weeklyECharts(data) {
    let weeklyChart = echarts.init(document.getElementById('weekly-chart'));
    const yWeeklyValueArr5 = data.map(item => item.waterUse);
    const reversedArray = yWeeklyValueArr5.slice().reverse();

    function getPastSevenDays() {
        const dates = [];
        for (let i = 6; i >= 0; i--) {
            const currentDate = new Date();
            currentDate.setDate(currentDate.getDate() - i);
            const formattedDate = formatDate(currentDate);
            dates.push(formattedDate);
        }
        return dates;
    }

    function formatDate(dateString) {
        let date = new Date(dateString);
        let day = date.getDate();
        let month = date.getMonth() + 1;
        let year = date.getFullYear();
        if (day === 1) {
            return month + '月' + day + '日';
        } else {
            return day + '日';
        }
    }

    const xWeeklyNameArr = getPastSevenDays();
    let weeklyOption = {
        title: {
            subtext: '单位 : m³',
            subtextStyle: {
                fontSize: 14,
                color: '#fff'
            }
        },
        grid: {
            left: '0%',
            right: '5%',
            top: '20%',
            bottom: '5%',
            containLabel: true
        },
        tooltip: {
            trigger: "axis",
        },
        // legend: {
        //     show: true,
        //     x: '55%',
        //     top: '0',
        //     y: '35',
        //     icon: 'stack',
        //     itemWidth: 10,
        //     itemHeight: 10,
        //     textStyle: {
        //         color: '#1bb4f6'
        //     },
        //     data: ['4#配电柜']
        // },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#fff',
                    interval: 0,
                    // rotate: -45
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#397cbc'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#195384'
                    }
                },
                data: xWeeklyNameArr,
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#27b4c2'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#e7e9ea'
                    },
                },
            }],
        series: [
            {
                name: '日总用水量',
                type: 'line',
                stack: '总量',

                symbolSize: 0,
                itemStyle: {
                    normal: {
                        color: '#f6cf83',
                        lineStyle: {
                            color: "#f6cf83",
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: '#ffb014'
                            }, {
                                offset: 1,
                                color: '#f6cf83'
                            }]),
                        }
                    }
                },
                markPoint: {
                    itemStyle: {
                        normal: {
                            color: 'red'
                        }
                    }
                },
                data: reversedArray,
            }
        ]
    };
    weeklyChart.setOption(weeklyOption);
}


/**
 * 智慧用水-今日用水排名
 */
function waterRanking() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'water/waterUseRanking',
        data: "",
        dataType: 'json',
        success: function (res) {
            waterRankingEcharts(res.obj);
        }
    });
}

function waterRankingEcharts(obj) {
    echarts.init(document.getElementById('waterToday')).dispose(); // 销毁实例
    const myChart = echarts.init(document.getElementById('waterToday'));

    let data = obj.sort(function(a, b) {
        return parseFloat(a.value) - parseFloat(b.value); // 降序
    });
    console.log(data)

    const ydata = [];
    for (var i = 0; i < data.length; i++) {
        ydata.push(data[i].name);
    }
    console.log(ydata)

    const datalength = [];
    for (var i = 0; i < data.length; i++) {
        datalength.push(0);
    }
    console.log(datalength)

    const databg = [];
    for (var i = 0; i < data.length; i++) {
        databg.push(data[0].value);
    }
    console.log(databg)


    let option = {
        backgroundColor: 'transparent',
        grid: {
            left: '4%',
            top: '2%',
            right: '8%',
            bottom: '2%',
            containLabel: true
        },
        xAxis: [{
            show: false,
        }],
        yAxis: [{
            axisTick: 'none',
            axisLine: 'none',
            offset: '10',
            axisLabel: {
                textStyle: {
                    color: '#ccd1d2',
                    fontSize: '14',
                }
            },
            data: ydata,
        }, {
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
                textStyle: {
                    color: '#ccd1d2',
                    fontSize: '16',
                }
            },
            data: data
        }, {
            axisLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [],
        }],
        series: [{
            name: '条',
            type: 'bar',
            stack: '圆',
            yAxisIndex: 0,
            data: data,
            barWidth: 8,
            itemStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#bae7ff', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#1890ff', // 100% 处的颜色
                            },
                        ],
                    },
                    barBorderRadius: 5,
                }
            },
            z: 2
        }, {
            name: '内圆',
            type: 'scatter',
            stack: '圆',
            yAxisIndex: 0,
            data: datalength,
            label: false,
            symbolSize: 8,
            itemStyle: {
                normal: {
                    borderColor: '#409eff',
                    borderWidth: 4,
                    color: '#fff',
                    opacity: 1,
                }
            },
            z: 2
        }, {
            name: '白框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: databg,
            barWidth: 6,
            itemStyle: {
                normal: {
                    color: '#e4effe',
                    barBorderRadius: 5,
                }
            },
            z: 0
        }]
    };
    myChart.setOption(option);
}

/**
 * 智慧用水-今日时间段用水
 */
function timePeriodWaterUse() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'water/timeOfDay',
        data: "",
        dataType: 'json',
        success: function (res) {
            timePeriodWaterUseEcharts(res.obj);
        }
    });
}

function timePeriodWaterUseEcharts(data) {
    echarts.init(document.getElementById('timePeriodWaterUse')).dispose(); // 销毁实例
    const myChart = echarts.init(document.getElementById('timePeriodWaterUse'));
    var scale = 1;
    var echartData = [
        {
            value: data[0].timePeriodWaterUse,
            name: "00:00-07:59",
        },
        {
            value: data[1].timePeriodWaterUse-data[0].timePeriodWaterUse,
            name: "08:00-11:59",
        },
        {
            value: data[2].timePeriodWaterUse-data[1].timePeriodWaterUse,
            name: "12:00-15:59",
        },
        {
            value: data[3].timePeriodWaterUse-data[2].timePeriodWaterUse,
            name: "16:00-23:59",
        }
    ];
    var rich = {
        yellow: {
            color: "#66ffff",
            fontSize: 25 * scale,
            padding: [5, 4],
            align: "center",
        },
        total: {
            color: "#ffc72b",
            fontSize: 30 * scale,
            align: "center",
        },
        white: {
            color: "#fff",
            align: "center",
            fontSize: 14 * scale,
            padding: [10, 0],
        },
        blue: {
            color: "#49dff0",
            fontSize: 16 * scale,
            align: "center",
        },
        hr: {
            borderColor: "#0b5263",
            width: "100%",
            borderWidth: 1,
            height: 0,
        },
    };
    option = {
        backgroundColor: "transparent",
        title: {
            text: "昨日用水量",
            left: "center",
            top: "53%",
            padding: [24, 0],
            textStyle: {
                color: "#fff",
                fontSize: 18 * scale,
                align: "center",
            },
        },
        legend: {
            selectedMode: false,
            formatter: function (name) {
                var total = 0; //各科正确率总和
                var averagePercent; //综合正确率
                echartData.forEach(function (value, index, array) {
                    total += value.value;
                });
                return "{total|" + total.toFixed(2) +"m³"+ "}";
            },
            data: [echartData[0].name],
            left: "center",
            top: "center",
            icon: "none",
            align: "center",
            textStyle: {
                color: "#fff",
                fontSize: 16 * scale,
                rich: rich,
            },
        },
        series: [
            {
                name: "总用水量",
                type: "pie",
                radius: ["42%", "50%"],
                hoverAnimation: false,
                color: ["#c487ee", "#deb140", "#49dff0", "#034079"],
                label: {
                    normal: {
                        formatter: function (params, ticket, callback) {
                            var total = 0; //考生总数量
                            var percent = 0; //考生占比
                            echartData.forEach(function (value, index, array) {
                                total += value.value;
                            });
                            percent = ((params.value / total) * 100).toFixed(1);
                            return (
                                "{white|" +
                                params.name +
                                "}\n{hr|}\n{yellow|" +
                                (params.value).toFixed(2) +"m³"+
                                "}\n{blue|" +
                                percent +
                                "%}"
                            );
                        },
                        rich: rich,
                    },
                },
                labelLine: {
                    normal: {
                        length: 55 * scale,
                        length2: 0,
                        lineStyle: {
                            color: "#0b5263",
                        },
                    },
                },
                data: echartData,
            },
        ],
    };

    myChart.setOption(option);
}