var layer ;

var lincChart1;
var lincChart2;
var lincChart3;
var lincChart4;

var intervalCircle1;
var intervalCircle2;
var intervalCircle3;
var intervalCircle4;
var intervalCircleNum = 1 * 1000;
//定义变量
var screenName = "";
var screenSlogan = "";
var sysStart;

//设备信息列表
var deviceList = [];

var indexTag = "1";
var passNum = "2";

$(function () {

    layui.use(['layer'], function () {
        layer = layui.layer;

        //初始化背景动效
        initBg();
        //头部，右上角时间初始化
        renderNavbar();

        var date = new Date();
        $(".m-box" + indexTag).show();
        if(indexTag == 1){
            lincChart1 = initChartLine1("box"+indexTag+"-server1");
            renderChartLine(date,lincChart1,passNum);
        }else if(indexTag == 2){
            lincChart1 = initChartLine1("box"+indexTag+"-server1");
            lincChart2 = initChartLine1("box"+indexTag+"-server2");
            renderChartLine(date,lincChart1,passNum);
            renderChartLine(date,lincChart2,passNum);
        }else if(indexTag == 3){
            lincChart1 = initChartLine1("box"+indexTag+"-server1");
            lincChart2 = initChartLine1("box"+indexTag+"-server2");
            lincChart3 = initChartLine1("box"+indexTag+"-server3");
            renderChartLine(date,lincChart1,passNum);
            renderChartLine(date,lincChart2,passNum);
            renderChartLine(date,lincChart3,passNum);
        }else if(indexTag == 4){
            lincChart1 = initChartLine1("box"+indexTag+"-server1");
            lincChart2 = initChartLine1("box"+indexTag+"-server2");
            lincChart3 = initChartLine1("box"+indexTag+"-server3");
            lincChart4 = initChartLine1("box"+indexTag+"-server4");
            renderChartLine(date,lincChart1,passNum);
            renderChartLine(date,lincChart2,passNum);
            renderChartLine(date,lincChart3,passNum);
            renderChartLine(date,lincChart4,passNum);
        }

    });
});

/* ------------------ 折线图数据渲染-start ------------------- */
function renderChartLine(date,lincChart,passNum) {
    var legendData = [];
    var name = "";
    var series = [];
    var xaxisData = getXaxisData(date);
    for(var i=0;i<passNum;i++){
        name = '温度'+i;
        legendData.push(name);
        var seriesParam = {
            name: name,
            type: 'line',
            left: ['50%', '50%'],
            symbolSize: 3
        };
        var data = [];
        for(var j=0;j<xaxisData.length;j++){
            data.push(null);
        }
        seriesParam.data = data;
        series.push(seriesParam);
    }

    lincChart.option.legend.data = legendData;
    lincChart.option.series = series;
    lincChart.option.xAxis.data = xaxisData;
    lincChart.chart.setOption(lincChart.option, true);

    reLoadChartLineCircule(lincChart);

}

function getXaxisData(date) {
    var xaxisData = [];
    var xaxis = "";
    var hours = date.getHours()
    var min = date.getMinutes();
    var seconds = date.getSeconds();
    // while (xaxisData.length < 120){
    //     xaxis = (hours<10?"0"+hours:hours)+":"+(min<10?"0"+min:min);
    //     xaxisData.push(xaxis);
    //     min--;
    //     if(min<0){
    //         min = 59;
    //         hours--;
    //         hours = hours<0?23:hours;
    //     }
    // }

    //测试
    while (xaxisData.length < 120){
        xaxis = (min<10?"0"+min:min)+":"+(seconds<10?"0"+seconds:seconds);
        xaxisData.push(xaxis);
        seconds--;
        if(seconds<0){
            seconds = 59;
            min--;
            min = hours<0?59:min;
        }
    }
    xaxisData.reverse();
    return xaxisData;
}

// 循环执行页面数据的刷新
function reLoadChartLineCircule(lincChart) {
    var series = lincChart.option.series;
    // 首先停止执行原有的循环
    // if (intervalCircle1) clearInterval(intervalCircle1);
    intervalCircle1 = setInterval(function () {
        var date = new Date();
        var xaxisData = getXaxisData(date);
        for(var i=0;i<series.length;i++){
            var data = series[i].data;
            if(!data){
                data = [];
            }
            if(data.length < xaxisData.length){
                data.push(Math.floor(Math.random()*(100-1)+1));
            }else{
                data.shift();
                data.push(Math.floor(Math.random()*(100-1)+1));
            }
            // data.unshift(Math.floor(Math.random()*(100-1)+1));

            series[i].data = data;
        }
        lincChart.option.series = series;
        lincChart.option.xAxis.data = xaxisData;
        lincChart.chart.setOption(lincChart.option, true);
    }, intervalCircleNum);
};

/* ------------------ 折线图数据渲染-end ------------------- */

//时间格式处理，20210226101010-----2021-02-26 10:10:10
function strTime(time) {
    return time.substring(0, 4) + "-" + time.substring(4, 6) + "-" + time.substring(6, 8) + " " + time.substring(8, 10) + ":" + time.substring(10, 12) + ":" + time.substring(12, 14)
}

//返回月日的时间格式，如02-25
function timeStr(date) {
    var arr = date.toLocaleDateString().split("/");
    if (arr[1].length < 2) {
        arr[1] = "0" + arr[1];
    }
    if (arr[2].length < 2) {
        arr[2] = "0" + arr[2];
    }
    return arr[1] + "-" + arr[2];
}

//时间格式处理
function timeHandle(date, tag) {
    var arr = date.toLocaleDateString().split("/");
    if (arr[1].length < 2) {
        arr[1] = "0" + arr[1];
    }
    if (arr[2].length < 2) {
        arr[2] = "0" + arr[2];
    }
    var time = arr[0] + arr[1] + arr[2];
    if (tag == "end") {
        return time + '235959';
    } else {
        return time + '000000';
    }
}

/* ------------------ 页面头部信息渲染-start ------------------- */

//获取系统参数配置信息
function querySysSetInfo() {
    $.get("./cgi-bin/sys-set/query-info", function (data, status) {
        if ("success" == status) {
            renderSysSetInfo(data);
        } else {
            window.parent.parent.notify("数据查询出错，请重新操作！！msg=" + data.msg);
        }
    }, "json");
}
//渲染系统参数配置信息
function renderSysSetInfo(data) {
    screenName = data.screenName;
    screenSlogan = data.screenSlogan;
    sysStart = data.usedTime;
    sysStart = sysStart.substring(0, 4) + "-" + sysStart.substring(4, 6) + "-" + sysStart.substring(6, 8) + " 00:00:00";

    // 设置主界面的标题screenName
    $("#main-title").text(screenName);
    // 设置主界面的标语screenSlogan
    $("#main-slogan").text(screenSlogan);
    // 初始化运行天数
    initRunDay();
}

//头部，右上角时间
function renderNavbar() {
    showRealTime();
    window.setInterval(function (){
        showRealTime();
    },1000);
}

function showRealTime(){
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var date = d.getDate();
    var days = new Array("日","一","二","三","四","五","六");
    var day = d.getDay();
    var hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
    var min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
    var sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
    var now = year + "年" + month + "月" + date + "日 周" + days[day] + "  " + hour + ":" + min + ":" + sec;
    document.getElementById("dayTime").innerHTML = now;
}


/* ------------------ 页面头部信息渲染-end ------------------- */

/**
 * 格式化数字保留一位小数
 * @param numStr
 * @returns {string}
 */
function formatNumber(numStr){
    return numStr ? parseFloat(numStr).toFixed(1):"0.0";
}


/* ------------------ 折线图初始化-start ------------------- */
function initChartLine1(id) {
    var option = {
        tooltip: {
            trigger: 'axis',
            hideDelay: '300'
        },
        legend: {
            data: ['CPU(%)'],
            textStyle:{
                color: "#4FCCFF",
                fontSize: 16
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'],
            axisLabel: {show: true, textStyle: {color: '#4FCCFF'}},
            axisLine: {lineStyle: {color: '#162B5F', width: 1}},
            axisTick: {
                inside: true,
                alignWithLabel: true
            }
        },
        yAxis: {
            minInterval: 1,
            type: 'value',
            position: 'right',
            axisLabel: {show: true, textStyle: {color: '#4FCCFF'}},
            axisLine: {lineStyle: {color: '#162B5F', width: 2}},
            splitLine: {lineStyle: {width: 1, color: ['#162B5F']}},
            axisTick: {
                inside: true
            },
            scale: true
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                name: 'CPU(%)',
                type: 'line',
                left: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        color: '#4fccff', // 背景渐变色
                        lineStyle: {width: 2, type: 'solid', color: '#43effe'}
                    },
                    emphasis: {color: '#43effe', lineStyle: {width: 2, type: 'dotted', background: '#43effe'}}
                },
                symbolSize: 6
            }
        ]
    }
    var myChart = echarts.init(document.getElementById(id), "light");
    myChart.setOption(option, true);
    return {
        "chart": myChart,
        "option": option
    };
};

/* ------------------ 折线图初始化-end ------------------- */


/**
 * 背景粒子效果
 */
function initBg() {
    //背景粒子效果
    particlesJS('particles-js',
        {
            "particles": {
                "number": {
                    "value": 160,//数量
                    "density": {
                        "enable": true, //启用粒子的稀密程度
                        "value_area": 800 //区域散布密度大小
                    }
                },
                "color": {
                    "value": "#0089f4" //原子的颜色
                },
                "shape": {
                    "type": "star", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]
                    "stroke": {
                        "width": 0, //原子的宽度
                        "color": "#0089f4" //原子颜色
                    },
                    "polygon": {
                        "nb_sides": 5 // 原子的多边形边数
                    },
                    "image": {
                        "src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
                        "width": 100, //图片宽度
                        "height": 100 //图片高度
                    }
                },
                "opacity": {
                    "value": 1, //不透明度
                    "random": true, //随机不透明度
                    "anim": {
                        "enable": true, //渐变动画
                        "speed": 1, // 渐变动画速度
                        "opacity_min": 0, //渐变动画不透明度
                        "sync": true
                    }
                },
                "size": {
                    "value": 3, //原子大小
                    "random": true, // 原子大小随机
                    "anim": {
                        "enable": false, // 原子渐变
                        "speed": 4, //原子渐变速度
                        "size_min": 0.3,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": false, //连接线
                    "distance": 150, //连接线距离
                    "color": "#ffffff", //连接线颜色
                    "opacity": 0.4, //连接线不透明度
                    "width": 1 //连接线的宽度
                },
                "move": {
                    "enable": true, //原子移动
                    "speed": 1, //原子移动速度
                    "direction": "none", //原子移动方向   "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"
                    "random": true, //移动随机方向
                    "straight": false, //直接移动
                    "out_mode": "out", //是否移动出画布
                    "bounce": false, //是否跳动移动
                    "attract": {
                        "enable": false, // 原子之间吸引
                        "rotateX": 600, //原子之间吸引X水平距离
                        "rotateY": 600  //原子之间吸引Y水平距离
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas", //原子之间互动检测 "canvas", "window"
                "events": {
                    "onhover": {
                        "enable": true, //悬停
                        "mode": "bubble" //悬停模式      "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]
                    },
                    "onclick": {
                        "enable": false,  //点击效果
                        "mode": "repulse"  //点击效果模式   "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]
                    },
                    "resize": true // 互动事件调整
                },
                "modes": {
                    "grab": {
                        "distance": 100, //原子互动抓取距离
                        "line_linked": {
                            "opacity": 1  //原子互动抓取距离连线不透明度
                        }
                    },
                    "bubble": {
                        "distance": 250, //原子抓取泡沫效果之间的距离
                        "size": 2, // 原子抓取泡沫效果之间的大小
                        "duration": 2, //原子抓取泡沫效果之间的持续事件
                        "opacity": 1, //原子抓取泡沫效果透明度
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 400, //击退效果距离
                        "duration": 0.4 //击退效果持续事件
                    },
                    "push": {
                        "particles_nb": 4 //粒子推出的数量
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        }
    );
}

function requestFullScreen(element) {
    // 判断各种浏览器，找到正确的方法
    var requestMethod = element.requestFullScreen || // W3C
        element.webkitRequestFullScreen || // FireFox
        element.mozRequestFullScreen || // Chrome等
        element.msRequestFullScreen; // IE11
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // for
        // Internet
        // Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}