// 获取时间
// 单位数字补零
function figureAdd0(e) {
    e = e + "";
    if (e.length == 1) return "0" + e;
    return e;
}

// 实时更新时间
setInterval(function () {
    let vWeek, nowDate, year, month, day, hours, minutes, seconds, nowTime;
    vWeek = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Aug", "Jul", "Sep", "Oct", "Nov", "Dec"];
    let date = new Date();
    year = date.getFullYear(); //得到年份
    month = figureAdd0(date.getMonth() + 1); //得到月份
    day = figureAdd0(date.getDate()); //得到日期
    hours = figureAdd0(date.getHours()); //得到小时数
    minutes = figureAdd0(date.getMinutes()); //得到分钟数
    seconds = figureAdd0(date.getSeconds()); //得到秒数
    vWeek = vWeek[date.getMonth()];
    nowDate = year + "." + month + "." + day;
    nowTime = hours + ":" + minutes + ":" + seconds;
    $(".top-right-timeBox .time").text(nowTime)
    $(".top-right-timeBox .month").text(vWeek)
    $(".top-right-timeBox .date").text(nowDate)
}, 1000);

var date = new Date();
var hours = date.getHours(); //得到小时数
var nowHoursList = []
for (let i = 0; i < 7; i++) {
    let nowHours = figureAdd0(indexMinus(hours, i * 2, 24)) + ":00"
    // console.log(nowHours);
    nowHoursList.unshift(nowHours)
}

// 渲染进度条点
for (let i = 1; i <= 47; i++) {
    if (i <= 32) {
        $(".bar-right").append(`<div class="dot select"></div>`)
    } else {
        $(".bar-right").append(`<div class="dot"></div>`)
    }
}

// trend 稼动率趋势 初始化
var trend = document.getElementById('trend');
var option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            color: '#ddd'
        },
        axisTick: {
            show: false // 不显示坐标轴刻度线
        },
        data: nowHoursList
    },
    yAxis: {
        type: 'value',
        max: 100,
        splitLine: {
            lineStyle: {
                type: 'dashed',//虚线
                color: "rgba(1,130,255,.2)"
            },
        }
    },
    series: [
        {
            data: [70, 64, 52, 42, 35, 68, 56],
            type: 'line',
            color: '#0171E3',
            // 鼠标移上显示折点
            showSymbol: false,
            areaStyle: {
                normal: {
                    color: "rgba(1,130,255,.3)"
                }
            }
        }
    ]
};
// trend 渲染
var trend = echarts.init(trend);
trend.setOption(option);

// electricityTrend 用电量趋势 初始化
var electricityTrend = document.getElementById('electricityTrend');
var option = {
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data: ['当日', '昨日'],
        left: 20,
        top: 25,
        itemHeight: 10, //图标大小
        itemWidth: 10,
        icon: 'rect',
        textStyle: {
            color: '#fff'
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            color: '#ddd'
        },
        axisTick: {
            show: false // 不显示坐标轴刻度线
        },
        data: nowHoursList
    },
    yAxis: {
        type: 'value',
        max: 100,
        splitLine: {
            lineStyle: {
                type: 'dashed',//虚线
                color: "rgba(1,130,255,.2)"
            },
        }
    },
    series: [
        {
            name: '当日',
            data: [70, 64, 52, 42, 35, 68, 56],
            type: 'line',
            smooth: true,
            color: '#0171E3',
            showSymbol: false,
        },
        {
            name: '昨日',
            data: [48, 51, 45, 69, 77, 68, 32],
            type: 'line',
            smooth: true,
            color: '#00E9ED',
            // 鼠标移上显示折点
            showSymbol: false,
        }
    ]
};
// trend 渲染
var electricityTrend = echarts.init(electricityTrend);
electricityTrend.setOption(option);

// count-circle 数据统计 初始化
var electricityTrend = document.getElementById('count-circle');
option = {
    title: {
        text: '',
        left: 'center',
        top: 'center',
        textStyle: {
            // 主标题样式
            fontSize: 35
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            color: ['rgb(247,205,112)', 'rgb(235,87,7)', 'rgb(170,170,170)', 'rgb(0,128,255)',],
            itemStyle: {
                // borderRadius: 20,
                borderColor: 'rgba(0,11,47,1)',
                borderWidth: 10,
            },
            label: {
                show: false,
                position: 'center',
                emphasis: {
                    // show: true
                }
            },
            labelLine: {
                show: false
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            data: [{ value: 35 }, { value: 30 }, { value: 90 }, { value: 78 }]
        }
    ]
};
// count-circle 渲染
var electricityTrend = echarts.init(electricityTrend);
electricityTrend.setOption(option);

//定制数据看板的切换
let isShowAppointFront = true;
var appointItemRollId = 0;
function createBoardImgList(dataList) {
    $(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[0].img}.png) no-repeat`, "background-size": "100% 100%" })
    $(`.appointBox .appoint-img`).click(function () {
        window.open(dataList[0].url, "_blank");
    })
    $(`.appoint-data .title`).text(dataList[0].title)
    $(`.appoint-data .text`).text(dataList[0].text)


    if (dataList.length <= 1) {
        $(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div>`)
    } else {
        $(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div><div class="point"></div>`)

        function appointCutData() {
            $(`.appointBox`).animate({ 'opacity': 0 }, 300, function () {
                if (isShowAppointFront) {
                    //去除绑定的跳转方法
                    $(`.appointBox .appoint-img`).unbind("click");
                    $(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[1].img}.png) no-repeat`, "background-size": "100% 100%" })
                    $(`.appointBox .appoint-img`).click(function () {
                        window.open(dataList[1].url, "_blank");
                    })
                    $(`.appoint-data .title`).text(dataList[1].title)
                    $(`.appoint-data .text`).text(dataList[1].text)
                    $(`.appoint-data-board .appoint-point`).html(`</div><div class="point"></div><div class="point select">`)
                } else {
                    //去除绑定的跳转方法
                    $(`.appointBox .appoint-img`).unbind("click");
                    $(`.appointBox .appoint-img`).css({ "background": `url(./sc/${dataList[0].img}.png) no-repeat`, "background-size": "100% 100%" })
                    $(`.appointBox .appoint-img`).click(function () {
                        window.open(dataList[0].url, "_blank");
                    })
                    $(`.appoint-data .title`).text(dataList[0].title)
                    $(`.appoint-data .text`).text(dataList[0].text)
                    $(`.appoint-data-board .appoint-point`).html(`<div class="point select"></div><div class="point"></div>`)
                }
                isShowAppointFront = !isShowAppointFront;
                $(`.appointBox , .appoint-point`).animate({ 'opacity': 1 }, 300);
            });
        }

        appointItemRollId = setInterval(function () {
            appointCutData();
        }, 5000)
    }

}
let appointDataList = [{
    img: "八环看板2",
    title: "八环集中供水数字化看板",
    text: "对八环全厂的水电气全面进行数字化改造，实现水电气的数据实时采集和上发。通过看板全面直观了解整体能源使用状况。",
    url: "https://www.taizhouyunzao.com/lantingNewB//admin/views/boardManagement/bhBoard1.html?61977339C173AA06DACC56F4BFF8A1FA"
}, {
    img: "八环看板",
    title: "八环企业专题看板",
    text: "为八环打造的专题宣传看板。",
    url: "http://36.134.182.98:8081/board/er/index.html"
}];
createBoardImgList(appointDataList);

// 减计算方法
function indexMinus(nowIndex, size, max) {
    let num = nowIndex - size;
    if (num <= -1) {
        if (max == null) {
            num = citys.length + (nowIndex - size);
        } else {
            num = max + (nowIndex - size);
        }
    }
    return num;
}