/**
 * 日期格式化
 * @param     fmt   "YYYY-mm-dd HH:MM"
 * @param     date
 * @returns   {*}
 */
function formatDate(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };

    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
    }
    return fmt;
}

/**
 * 饼图加载
 * @param obj
 */
function pieChartLoad( obj ) {
    var pieChart = echarts.init( $( obj.id )[0]);

    var option = {
        series: [
            // 环
            {
                name: '',
                type: 'pie',
                radius: ['48%', '70%'],
                avoidLabelOverlap: false,
                zlevel:2,
                z: 3,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0.2)'
                    }
                },
                labelLine: {
                    show: false
                },
                silent: true,
                data: obj.data,
            },
            // 饼
            {
                name: '',
                type: 'pie',
                radius: [ '48%' , '100%'],
                avoidLabelOverlap: false,
                silent: true,
                label: {
                    show: false,
                    position: 'center',
                },
                itemStyle: {
                    normal: {
                        color: function(colors) {
                            var colorList = obj.colors;
                            return colorList[colors.dataIndex]
                        },
                        borderWidth: 6,
                        borderColor: '#001f20'
                    }
                },
                labelLine: {
                    show: false
                },
                data:  obj.data,
            },
        ]
    };

    pieChart.setOption( option );
}

/**
 * 饼图图例加载
 * @param obj
 */
function pieChartLegendLoad( obj ) {
    var str = '';
    var colorList = obj.colors;
    var allVal = 0;

    for( let i=0; i<obj.data.length; i++ ) {
        allVal += obj.data[i].value;
    }

    for( let i=0; i<obj.data.length; i++ ) {
        str += `
            <div class="chart-legend-item">
                <span class="item-circle" style="background-color: ${ colorList[i] }"></span>
                <span class="item-label">${ obj.data[i].name }</span>
                <span class="item-stats">${ ( obj.data[i].value / allVal * 100 ).toFixed( 0 ) }%</span>
            </div>
        `;
    }

    $( obj.id ).html( str );
}

/**
 * 空气指数图表加载
 */
function kqzsChartLoad( num, max ) {
    var chart = echarts.init( $( '#kqzsChart' )[0]);

    var option = {
        series: [
            {
                type: 'gauge',
                radius: '96%',
                center: ['50%', '55%'],
                splitNumber: 0, //刻度数量
                startAngle: 230,
                endAngle: -50,
                axisLine: {
                    show: true,
                    // roundCap: true,
                    lineStyle: {
                        width: 6,
                        color: [
                            [
                                num/max, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                    offset: 0,
                                    color: '#1f91a0'
                                },
                                    {
                                        offset: 1,
                                        color: '#33d8cf'
                                    }
                                ]
                            )
                            ],
                            [
                                1, '#084267'
                            ]
                        ]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                pointer: {
                    show: false
                },
                title: {
                    show: true,
                    offsetCenter: [0, '-23%'], // x, y，单位px
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, '26%'],
                    color: '#ffffff',
                    formatter: function(params) {
                        return params
                    },
                    textStyle: {
                        fontSize: 24,
                        fontFamily: 'DINCond-Bold',
                    }
                },
                data: [
                    {
                        name: "空气指数",
                        value: num
                    },
                ]
            }
        ]
    };

    chart.setOption( option );
}

/**
 * 折线图加载
 */
function lineChartLoad( obj ) {
    var chart = echarts.init( $(obj.id)[0] );

    var option = {
        grid: {
            left: '24px',
            right: '15px',
            bottom:  '24px',
            top:  '50px',
            containLabel: true,
        },
        legend: {
            orient: 'horizontal',
            right: '15px',
            top: 15,
            // icon: 'diamond',
            borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
            padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
            itemGap: 25,               // 各个item之间的间隔，单位px，默认为10，
            itemWidth: 17,             // 图例图形宽度
            itemHeight: 10,            // 图例图形高度
            textStyle: {
                color: '#ffffff',         // 图例文字颜色
                fontSize: 12,
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'line',        // 默认为直线，可选为：'line' | 'shadow'
                lineStyle: {
                    color: '#2CA09C',
                }
            },
            extraCssText: `padding:7px 10px;background:#00243b;color:#D9DEED;box-shadow:0px 0px 6px #86dbff inset;border-radius: 2px;font-size: 12px;`,
            formatter( params ) {
                var str = `<div style="font-size: 12px;color: #ffffff;line-height: 20px;">${ params[0] ? params[0].name : '' }</div>`;

                for( var i=0, lens=params.length; i<lens; i++ ) {

                    if( params[i].value ) {
                        str += `<div style="line-height: 22px">
                                    <span style="display: inline-block;
                                                 width: 12px;
                                                 height: 12px;
                                                 border-radius: 50%;
                                                 background-color: ${ params[i].color};
                                                 margin-right: 4px;
                                                 vertical-align: middle"
                                    ></span>
                                    <span style="display:inline-block;min-width: 70px;font-size: 12px;">${ params[i].seriesName }</span>
                                    <span style="font-size: 12px;">${ params[i].value }</span>
                        `;

                    }
                }

                return str;
            },
        },
        xAxis: {
            data: obj.xAxis,
            axisLine: {            // 坐标轴线
                show: true,        // 默认显示，属性show控制显示与否
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'rgba(15,144,202,0.4)',
                    width: 2,
                    type: 'solid'
                },
                onZero: false,
            },
            axisTick: {            // 坐标轴小标记
                show: false,       // 属性show控制显示与否，默认不显示
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                show: true,
                interval: 'auto',
                rotate: 0,
                margin: 14,
                // formatter: null,
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#ffffff',
                    fontSize: 14,
                }
            },
            splitLine: {           // 分隔线
                show: false,        // 默认显示，属性show控制显示与否
            },
        },
        yAxis: [
            {
                name: obj.unit,
                nameTextStyle: {
                    color: '#10a5eb',
                    fontSize: 14,
                },
                axisLine: {            // 坐标轴线
                    show: false,        // 默认显示，属性show控制显示与否
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'rgba(42,184,192,0.6)',
                        width: 1,
                        type: 'solid'
                    },
                },
                axisTick: {            // 坐标轴小标记
                    show: false,
                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    show: true,
                    interval: 0,
                    rotate: 0,
                    margin: 15,
                    // formatter: null,
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#ffffff',
                        fontSize: 14,
                    }
                },
                splitLine: {           // 分隔线
                    show: true,        // 默认显示，属性show控制显示与否
                    // onGap: null,
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: ['rgba(15,144,202,0.4)'],
                        width: 1,
                        type: 'solid'
                    }
                },
            },
        ],
        series: [
            {
                name: '名称A',
                data: obj.data[0],
                type: 'line',
                smooth: true,
                symbol: 'none',
                color: ['#ffb335'],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#ffb335',
                            lineStyle: {
                                width: 1,
                            },
                        }
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(255,179,53,0.31)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255,179,53,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }
            },
            {
                name: '名称B',
                data: obj.data[1],
                type: 'line',
                smooth: true,
                symbol: 'none',
                color: ['#13b4f9'],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#13b4f9',
                            lineStyle: {
                                width: 1,
                            },
                        }
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(19,180,249,0.3)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(19,180,249,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }
            },
            {
                name: '名称C',
                data: obj.data[2],
                type: 'line',
                smooth: true,
                symbol: 'none',
                color: ['#36b994'],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#36b994',
                            lineStyle: {
                                width: 1,
                            },
                        }
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(54,185,148,0.31)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(54,185,148,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }
            },
            {
                name: '名称D',
                data: obj.data[3],
                type: 'line',
                smooth: true,
                symbol: 'none',
                color: ['#fc4351'],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#fc4351',
                            lineStyle: {
                                width: 1,
                            },
                        }
                    }
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(252,67,81,0.31)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(252,67,81,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }
            },
        ],
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0],
                filterMode: 'none',
                start: 0,
                end: 100
            }
        ],
    };

    chart.setOption( option );
}

window.onload = function () {
    /*图表加载*/
    var jglxqkChartData = [
        {value: 60, name: '温湿度警告',},
        {value: 40, name: 'pm2.5警告',},
    ];
    pieChartLoad(
        {
            id: '#jglxqkChart',
            colors: ['#10a6ec', '#33d8cf'],
            data: jglxqkChartData,
        }
    );
    pieChartLegendLoad(
        {
            id: '#jglxqkChartLegend',
            colors: ['#10a6ec', '#33d8cf'],
            data: jglxqkChartData,
        }
    );

    var jgclqkChartData = [
        {value: 60, name: '已处理',},
        {value: 20, name: '未处理',},
        {value: 10, name: '超时',},
        {value: 10, name: '延期',},
    ];
    pieChartLoad(
        {
            id: '#jgclqkChart',
            colors: ['#00a0e9', '#33d8cf', '#ffb335', '#6369f2',],
            data: jgclqkChartData,
        }
    );
    pieChartLegendLoad(
        {
            id: '#jgclqkChartLegend',
            colors: ['#00a0e9', '#33d8cf', '#ffb335', '#6369f2',],
            data: jgclqkChartData,
        }
    );
    kqzsChartLoad( 32, 100 );

    lineChartLoad(
        {
            id: '#jksjsnChart',
            unit: '室内(单位)',
            xAxis: [
                '00:00', '00:15', '00:30', '00:45',
                '01:00', '01:15', '01:30', '01:45',
                '02:00', '02:15', '02:30', '02:45',
                '03:00', '03:15', '03:30', '03:45',
                '04:00', '04:15', '04:30', '04:45',
                '05:00', '05:15', '05:30', '05:45',
                '06:00', '06:15', '06:30', '06:45',
                '07:00', '07:15', '07:30', '07:45',
                '08:00', '08:15', '08:30', '08:45',
                '09:00', '09:15', '09:30', '09:45',
                '10:00', '10:15', '10:30', '10:45',
                '11:00', '11:15', '11:30', '11:45',
                '12:00', '12:15', '12:30', '12:45',
                '13:00', '13:15', '13:30', '13:45',
                '14:00', '14:15', '14:30', '14:45',
                '15:00', '15:15', '15:30', '15:45',
                '16:00', '16:15', '16:30', '16:45',
                '17:00', '17:15', '17:30', '17:45',
                '18:00', '18:15', '18:30', '18:45',
                '19:00', '19:15', '19:30', '19:45',
                '20:00', '20:15', '20:30', '20:45',
                '21:00', '21:15', '21:30', '21:45',
                '22:00', '22:15', '22:30', '22:45',
                '23:00', '23:15', '23:30', '23:45',
            ],
            data: [
                [
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                ],
                [
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                ],
                [
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                ],
                [
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                ],
            ]
        }
    );

    lineChartLoad(
        {
            id: '#jksjswChart',
            unit: '室外(单位)',
            xAxis: [
                '00:00', '00:15', '00:30', '00:45',
                '01:00', '01:15', '01:30', '01:45',
                '02:00', '02:15', '02:30', '02:45',
                '03:00', '03:15', '03:30', '03:45',
                '04:00', '04:15', '04:30', '04:45',
                '05:00', '05:15', '05:30', '05:45',
                '06:00', '06:15', '06:30', '06:45',
                '07:00', '07:15', '07:30', '07:45',
                '08:00', '08:15', '08:30', '08:45',
                '09:00', '09:15', '09:30', '09:45',
                '10:00', '10:15', '10:30', '10:45',
                '11:00', '11:15', '11:30', '11:45',
                '12:00', '12:15', '12:30', '12:45',
                '13:00', '13:15', '13:30', '13:45',
                '14:00', '14:15', '14:30', '14:45',
                '15:00', '15:15', '15:30', '15:45',
                '16:00', '16:15', '16:30', '16:45',
                '17:00', '17:15', '17:30', '17:45',
                '18:00', '18:15', '18:30', '18:45',
                '19:00', '19:15', '19:30', '19:45',
                '20:00', '20:15', '20:30', '20:45',
                '21:00', '21:15', '21:30', '21:45',
                '22:00', '22:15', '22:30', '22:45',
                '23:00', '23:15', '23:30', '23:45',
            ],
            data: [
                [
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                    1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934, 1290, 1330, 1320,1820, 1932, 1901, 1820, 1932, 1901, 1934,
                ],
                [
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                    2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734, 1590, 1830, 1920,1220, 1432, 1701,2120, 2132, 2201, 1734,
                ],
                [
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                    7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3, 8, 10, 12, 16, 10, 13,7, 8, 5, 3,
                ],
                [
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                    1120, 1132, 1201, 1234, 590, 830, 920, 220, 432, 701,1120, 1132, 1201, 734, 590, 830, 920, 220, 432, 701, 1120, 1132, 1201, 734,
                ],
            ]
        }
    );

    $('.tab-box-1 .tab-item').on('click', (e)=>{
        $('.tab-box-1 .tab-item').removeClass('is_act');
        $(e.target).addClass('is_act');
        var id = e.target.id;
        if(id == "box-1"){
            $("#stats-group-1 .stats-item").hide();
            $("#stats-group-1 #name1").text("温度");
            $("#stats-group-1 #name2").text("湿度");
            $("#stats-group-1 #name1").parent().show();
            $("#stats-group-1 #name2").parent().show();
        }
        if(id == "box-2"){
            $("#stats-group-1 .stats-item").hide();
            $("#stats-group-1 #name1").text("有毒气体");
            $("#stats-group-1 #name2").text("可燃气体");
            $("#stats-group-1 #name1").parent().show();
            $("#stats-group-1 #name2").parent().show();
        }
        if(id == "box-3"){

            $("#stats-group-1 #name1").text("温度");
            $("#stats-group-1 #name2").text("湿度");
            $("#stats-group-1 .stats-item").show();
        }
    });
    $('.tab-box-2 .tab-item').on('click', (e)=>{
        console.log(e.target);
        $('.tab-box-2 .tab-item').removeClass('is_act');
        $(e.target).addClass('is_act');
    });

    /*时间加载*/
    var dateTime = $('#dateTime');

    dateTime.html( formatDate( 'YYYY-mm-dd HH:MM:SS', new Date() ) );

    setInterval(()=> {
        dateTime.html( formatDate( 'YYYY-mm-dd HH:MM:SS', new Date() ) );
    }, 1000);

    // $('.item-info-panel-num').counterUp({
    //     delay: 20,//每个数字动画的延迟时间，单位毫秒。
    //     time: 1500//计数动画总的持续时间。
    // });

};