$(function () {
    Interface();
    //告警详情
    // deviceWarnClick();
})

//接口
function Interface(){
    $.ajax({
        type: 'POST',
        url: dataUrl + "securityPrevent/getFireAlarm",
        data: "",
        dataType: 'json',
        // async:false,
        success: function(res) {
            let data = res.obj;
            document.getElementById('Total').innerText = data.totalDevices;
            document.getElementById('year').innerText = data.fireNum;
            document.getElementById('month').innerText = data.monthNum;
            document.getElementById('Today').innerText = data.todayNum;
            document.getElementById('alarmEquipNum').innerText = data.alarmEquipNum;
            //设备占比
            Proportion(data);
            //近十二个月警告
            deviceWarnData(data);
            //消防数量
            fireNum(data);
            //今日告警表格
            WarningList(data);
        },
    });
}

//设备占比
function Proportion(data){
    var myChart = echarts.init(document.getElementById('equipment'));
    // 复制代码
    // const chartData = [
    //     {
    //         value: 38,
    //         name: "点型烟感",
    //     },
    //     {
    //         value: 145,
    //         name: "消防栓",
    //     },
    //     {
    //         value: 45,
    //         name: "火灾显示盘",
    //     },
    //     {
    //         value: 21,
    //         name: "消防广播",
    //     },
    //     {
    //         value: 51,
    //         name: "讯响器",
    //     },
    //     {
    //         value: 9,
    //         name: "其他",
    //     },
    // ];
    const chartData = data.equipInfo;
    const colorList = ['#fba75a', '#00d1c8', '#23be72', '#f9da4f', '#7d5afb', '#5aaefb'];
    const sum = chartData.reduce((per, cur) => per + cur.value, 0);
    const gap = (1 * sum) / 100;
    const pieData1 = [];
    const pieData2 = [];
    const gapData = {
        name: "",
        value: gap,
        itemStyle: {
            color: "transparent",
        },
    };

    //图标位置显示
    let lefts = ["10%", "10%", "10%", "74%", "74%", "74%"];
    let tops = ["24%", "40%", "58%", "24%", "40%", "58%"];
    let legendData = [];
    let total = 0;
    chartData.forEach((item) => {
        total += item.value;
    });

    for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
            ...chartData[i],
            itemStyle: {
                borderRadius: 10,
            },
        });
        pieData1.push(gapData);

        // 第二圈数据
        pieData2.push({
            ...chartData[i],
            itemStyle: {
                color: colorList[i],
                opacity: 0.21,
            },
        });
        pieData2.push(gapData);

        //  分散图例
        let bfb = parseInt((chartData[i].value / total) * 100) + "%";
        legendData.push({
            show: true,
            icon: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            left: lefts[i],
            top: tops[i],
            itemStyle: {
                color: colorList[i],
            },
            formatter:
                `{aa| ` + chartData[i].name + ` }` + `\n\n` + `{bb| ` + bfb + `}`, // 也可以是个函数return
            x: "left",
            textStyle: {
                // color: "#BAFF7F",
                rich: {
                    aa: {
                        color: "#ffffff",
                        fontSize: 16,
                    },
                    bb: {
                        color: colorList[i],
                        fontSize: 16,
                    },
                },
            },
            data: [chartData[i].name],
        });
    }
    // console.log("pieData2---------", pieData2);

    option = {
        backgroundColor: 'transparent',
        title: {
            text: "设备占比",
            left: '5%',
            top: 'top',
            // itemGap:15,
            textStyle: {
                color: "#f5f5f6",
                fontSize: 15,
                fontWeight: "bold",
            },
        },

        // backgroundColor: "#0F141B",
        tooltip: {
            show: true,
            backgroundColor: "rgba(0, 0, 0,.8)",
            textStyle: {
                color: "#fff",
            },
        },
        legend: legendData,
        grid: {
            top: 30,
            right: 20,
            bottom: 10,
            left: 10,
        },
        color: colorList,
        graphic: [
            {
                type: 'image', // 图片元素
                left: '2%', // 左对齐
                top: 'top', // 垂直居中
                style: {
                    image: '../../img/googlealarm/Group.png', // 设置图标路径
                    width: 20, // 图标宽度
                    height: 20, // 图标高度
                },
            },
            {
                type: 'text', // 文本元素
                left: '44.5%', // 水平居中
                top: 'middle', // 垂直居中
                style: {
                    text: sum, // 显示的文本内容为80
                    fill: '#f5f5f6', // 文本颜色
                    fontSize: 50, // 文本字号
                    fontWeight: 'bold', // 文本粗细
                },
            },
        ],
        series: [
            {
                name: '',
                type: 'pie',
                roundCap: true,
                radius: ['76%', '80%'],
                center: ['50%', '50%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: pieData1
            },
            {
                type: 'pie',
                radius: ['76%', '70%'],
                center: ['50%', '50%'],
                gap: 1.71,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                silent: true,
                data: pieData2
            },
            {
                type: 'gauge',
                zlevel: 2,
                splitNumber: 90,
                radius: '60%',
                center: ['50%', '50%'],
                startAngle: 90,
                endAngle: -269.9999,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    length: 7,
                    lineStyle: {
                        width: 4,
                        color: 'rgb(33,85,130)',
                    },
                },
                pointer: {
                    show: 0,
                },
                detail: {
                    show: 0,
                },
            },
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: [0, '45.6%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: 'rgba(75, 126, 203,.1)'
                },
                silent: true,
                data: [
                    {
                        value: 100,
                        name: ''
                    }
                ]
            }
        ],
    };

    myChart.setOption(option);

}

//近十二个月警告
function deviceWarnData(data){
    var myChart = echarts.init(document.getElementById('december'));
    const currentDate = new Date();

    // 存放最近12个月日期的数组
    let myData1 = [];
    let count1 = [];
    let count3 = [];
    const eclice = data.fireAlarm;
    // 逐个生成并添加最近12个月的日期到数组
    for (let i = 11; i >= 0; i--) {
        let year = currentDate.getFullYear();
        let month = currentDate.getMonth() - i;
        if (month < 0) {
            year -= 1;
            month += 12;
        }
        myData1.unshift(new Date(year, month, 1));
    }

    function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        return `${year}-${month}`;
    }
    // 将日期格式化成字符串，方便后面的比较
    const myData1String = myData1.map(date => formatDate(date));
    // 初始化 count1 和 count3 数组
    count1 = Array.from({length: 12}, () => 0);
    count3 = Array.from({length: 12}, () => 0);

    // 遍历最近12个月的日期数组
    for (let i = 0; i < myData1String.length; i++) {
        const dateStr = myData1String[i];
        // 查找 eclice 中是否有对应的数据
        const ecliceDataIndex = eclice.findIndex(item => item.month === dateStr);
        if (ecliceDataIndex !== -1) {
            count1[i] = eclice[ecliceDataIndex].count1;
            count3[i] = eclice[ecliceDataIndex].count3;
        }

    }
    // count1.push(count1.shift());
    // count3.push(count3.shift());
    function shiftArray(arr) {
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr.push(arr[i]);
        }
        return newArr;
    }

    option = {
        backgroundColor: 'transparent',
        title: {
            text: "近十二个月警告",
            left: '5%',
            top: 'top',
            // itemGap:15,
            textStyle: {
                color: "#f5f5f6",
                fontSize: 15,
                fontWeight: "bold",
            },
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0, 255, 233,0)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, {
                            offset: 1,
                            color: 'rgba(0, 255, 233,0)'
                        }],
                        global: false
                    }
                },
            },
            borderColor: "rgba(18, 57, 60, .8)",
            // formatter: "{b}人员类别统计<br>{c}人"
            formatter: function(params, ticket, callback) {
                var htmlStr = '';
                for (var i = 0; i < params.length; i++) {
                    var param = params[i];
                    var xName = param.name + '的告警数量'; //x轴的名称
                    var seriesName = param.seriesName; //图例名称
                    var value = param.value; //y轴值
                    var color = param.color; //图例颜色
                    if (i === 0) {
                        htmlStr += xName + '<br/>'; //x轴的名称
                    }
                    htmlStr += '<div>';
                    htmlStr +=
                        '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                        color + ';"></span>'; //一个点
                    htmlStr += seriesName + '：' + value + '人'; //圆点后面显示的文本
                    htmlStr += '</div>';
                }
                return htmlStr;
            }
        },
        color: ['#1ed6ff', '#36f097',],
        legend: {
            // icon: 'circle',
            // itemWidth: 10,
            itemGap: 4,
            x: 'right',
            top: '3%',
            textStyle: {
                color: '#fff',
                fontSize: 13,
                // padding:[0, 6, 0, 6],
            }
        },
        grid: {
            top: '18%',
            left: '1%',
            right: '4%',
            bottom: '2%',
            containLabel: true,
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#36f097'
                }
            },
            axisLabel: {
                interval: 0,
                align: 'center',
                rotate: '40',
                margin: '25',
                textStyle: {
                    fontSize: 13,
                    color: '#fff'
                }
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            boundaryGap: false,
            data: shiftArray(myData1String) , //this.$moment(data.times).format("HH-mm") ,
        }, ],

        yAxis: [{
            type: 'value',
            // min: 0,
            // max: 600,
            splitNumber: 6,
            axisLine: {
                lineStyle: {
                    color: '#36f097'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(28, 130, 197, .3)',
                    type: 'solid'
                },
            },
            axisLabel: {
                color: '#DEEBFF',
                textStyle: {
                    fontSize: 12
                }
            },
            axisTick: {
                show: false
            }
        }, ],
        graphic: [
            {
                type: 'image', // 图片元素
                left: '2%', // 左对齐
                top: 'top', // 垂直居中
                style: {
                    image: '../../img/googlealarm/Group.png', // 设置图标路径
                    width: 20, // 图标宽度
                    height: 20, // 图标高度
                },
            },
            ],
        series: [{
            name: '一号楼',
            type: 'line',
            showSymbol: true,
            symbolSize: 8,
            lineStyle: {
                normal: {
                    color: '#1ed6ff',
                },
            },
            itemStyle: {
                color: '#1ed6ff',
                borderColor: '#1ed6ff',
                borderWidth: 2,
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                            offset: 0,
                            color: 'rgb(30, 214, 255)',
                        },
                            {
                                offset: 1,
                                color: 'rgba(9, 246, 255, .2)',
                            },
                        ],
                        false
                    ),
                },
            },
            data: shiftArray(count1) , //data.values
        },
            {
                name: '三号楼',
                type: 'line',
                showSymbol: true,
                symbolSize: 8,
                lineStyle: {
                    normal: {
                        color: '#36f097',
                    },
                },
                itemStyle: {
                    color: '#36f097',
                    borderColor: '#36f097',
                    borderWidth: 2,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [{
                                offset: 0,
                                color: 'rgb(54, 240 ,151)',
                            },
                                {
                                    offset: 1,
                                    color: 'rgba(62, 80, 251, .2)',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: shiftArray(count3) , //data.values
            }
        ],
    };
    myChart.setOption(option);

}

//消防数量
function fireNum(data){
    const myChart = echarts.init(document.getElementById('number-type'));
    // var datas = [
    //     {
    //         value: 100,
    //         name: '典型烟感',
    //     },
    //     {
    //         value: 96,
    //         name: '手动按钮',
    //     },
    //     {
    //         value: 89,
    //         name: '紧急照明',
    //     },
    //     {
    //         value: 75,
    //         name: '照明配电',
    //     },
    //     {
    //         value: 56,
    //         name: '消火栓',
    //     },
    //     {
    //         value: 29,
    //         name: '讯响器',
    //     },
    //     {
    //         value: 29,
    //         name: '消防广播 ',
    //     },
    // ];
    var datas = data.equipInfo;
    var maxArr = new Array(datas.length).fill(100);
    option = {
        backgroundColor: 'transparent',
        grid: {
            left: 10,
            right:10,
            bottom: 0,
            top:0,
            containLabel: true,
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'none',
            },
            formatter: function (params) {
                return params.data.name + ' : ' + params.data.value;
            },
        },
        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 value +'个'
                    },
                },
                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: datas,
            },
        ],
    };

    myChart.setOption(option);
}

const idMap = new Map([
    ["1", "火警"],
    ["2", "故障"],
    ["3", "动作"],
    ["4", ""],
    ["5", "启动"],
    ["6", "停动"],
    ["7", "隔离"],
    ["8", "释放"],
    ["9", "主电备电恢复"]
])

//今日告警表格
function WarningList(data){
    let equipNum = 6;
    if(data.equipList.length < equipNum){
        equipNum = data.equipList.length;
    }
    let html = ""
    for (var i = 0; i < equipNum; i++) {
        html += "<div style='font-size: 12px'>"
        html += "<span>" + (i + 1) + "</span>"
        html += "<span>" +data.equipList[i].deviceType+ "</span>"
        html += "<span>" +data.equipList[i].deviceAddress+ "</span>"
        html += "<span>" + idMap.get(data.equipList[i].equipType) + "</span>"
        html += "<span>" +data.equipList[i].alarmTime+ "</span>"
        html += "</div>"
    }
    $(".down>.up-down").append(html)
}


//告警详情
function deviceWarnClick(){
    var index = layer.open({
        title: ['告警详情', 'color: #fff; cursor: move;background: transparent;float: left;'],
        type: 2,
        closeBtn: 2,
        content: '../../page/googlealarm/googlealarmFrom.html',
        area: ["70%", "96%"],
        maxmin: false
    });
}