$(function () {
    //获取人员概况数据,进出场数据
    getBasicData();

    //接口数量
    interfaceStatus();
})

layui.use(function () {
    var layer = layui.layer;
    var util = layui.util;
    util.on('lay-on', {
        'test-skin-btn1': function () {
            openVideo(1, "车辆道闸进口");
            // layer.alert('请确认是否开启车辆道闸进口?', {
            //     skin: 'layui-layer-molv' // 样式类名
            // }, function () {
            //     openAlarm(1);
            // });
        },
        'test-skin-btn2': function () {
            openVideo(2, "车辆道闸出口");
            //     layer.alert('请确认是否开启车辆道闸出口?', {
            //         skin: 'layui-layer-molv' // 样式类名
            //     }, function () {
            //         openAlarm(2);
            //     });
        },
        'test-skin-btn3': function () {
            openVideo(3, "人员道闸进口");
            // layer.alert('请确认是否开启人员道闸进口?', {
            //     skin: 'layui-layer-molv' // 样式类名
            // }, function () {
            //     openAlarm(3);
            // });
        },
        'test-skin-btn4': function () {
            openVideo(4, "人员道闸出口");
            // layer.alert('请确认是否开启人员道闸出口?', {
            //     skin: 'layui-layer-molv' // 样式类名
            // }, function () {
            //     openAlarm(4);
            // });
        },
    })
});

function openVideo(type, name) {
    localStorage.setItem("alarmType", type);
    var index = layer.open({
        title: [name + '视频', 'color: #fff; cursor: move;background: transparent;float: left;'],
        type: 2,
        closeBtn: 2,
        content: "./alarmVideo.html",
        area: ["1169px", "780px"],
        maxmin: false
    });
}

function getBasicData() {
    $.ajax({
        type: 'POST',
        async: false, // 默认异步true,false表示同步
        url: dataUrl + 'index/getBarrierData', // 请求地址
        dataType: 'json', // 服务器返回数据类型
        data: {}, //获取提交的表单字段
        success: function (data) {
            var resMsg = data.resMsg;
            if ("数据获取成功" == resMsg) {
                let personNum = data.obj.allPersonNumbers;
                let alarmBean = data.obj.alarmBean;

                document.getElementById('personNum').innerText = parseInt(personNum);
                document.getElementById('personEnterExitNum').innerText = parseInt(alarmBean.personEnterExitNum);
                document.getElementById('personEnterNum').innerText = `(出入：${parseInt(alarmBean.personExitNum)}/${parseInt(alarmBean.personEnterNum)})`;
                document.getElementById('carNum').innerText = ("NaN" === parseInt(data.obj.carNum) ? 0 : parseInt(data.obj.carNum));
                document.getElementById('carEnterExitNum').innerText = parseInt(alarmBean.carEnterExitNum);
                document.getElementById('carEnterNum').innerText = `(出入：${parseInt(alarmBean.carExitNum)}/${parseInt(alarmBean.carEnterNum)})`;

                document.getElementById('counts').innerText = data.obj.currentCounts;
                document.getElementById('month').innerText = data.obj.monthNum;
                document.getElementById('currentCounts').innerText = data.obj.counts;



                setTimeout(function () {
                    setEnterExitChart(alarmBean);
                    setCarEnterExitChart(alarmBean);
                    setPersonChart(data.obj);
                    setCarChart(data.obj);
                    deviceWarnList(data.obj);
                }, 200)
            }
        },
        error: function (XMLHttpRequest, textStatus, e) {
            // layer.close(loadingMsg);
            layer.msg('数据请求发生异常,请稍后重试', {
                icon: 16,
                scrollbar: false
            });
        }
    });
}


function deviceWarnList(data) {
    var html = ""
    for (var i = 0; i < 6; i++) {
        html += "<div style='font-size: 12px'>"
        html += "<span  style='width: 100px'>" + (i + 1) + "</span>"
        html += "<span>" + data.alarmList[i].deviceName + "</span>"
        html += "<span>" + data.alarmList[i].alarmContent + "</span>"
        html += "<span>" + data.alarmList[i].currentDay + "</span>"
        html += "</div>"
    }
    $(".deviceWarn>.table").append(html)
}

function setPersonChart(obj) {
    const dayList = obj.fiveDay;
    const personData = obj.personList.map(num => parseInt(num));
    //场内总人数
    var myChart = echarts.init(document.getElementById('chart'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            right: '4%',
            left: '13%',
            bottom: '10%'
        },
        yAxis: [{
            type: 'category',
            data: dayList,
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            },
            axisLabel: {
                margin: 10,
                color: '#e2e9ff',
                textStyle: {
                    fontSize: 10
                },
            },
            axisTick: {
                show: false
            }
        }],
        xAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: '#e2e9ff',
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(0,186,255,.6)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)',
                    type: 'dashed'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: personData,
            barWidth: '15px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            },
            label: {
                normal: {
                    show: true,
                    lineHeight: 50,
                    formatter: '{c}',
                    position: 'right',
                    textStyle: {
                        color: '#00D6F9',
                        fontSize: 15
                    }

                }
            }
        }]
    };
    myChart.setOption(option);
}

let sumValue = 0;

//日均时间段出入人次
function setEnterExitChart(alarmBean) {
    let series = [];
    let pieDatas = [
        {
            "value": parseInt(alarmBean.personZeroNum),
            "name": "00:00-08:00"
        },
        {
            "value": parseInt(alarmBean.personTwentyNum),
            "name": "20:00-24:00"
        },
        {
            "value": parseInt(alarmBean.personEighteenNum),
            "name": "18:00-20:00"
        },
        {
            "value": parseInt(alarmBean.personEightNum),
            "name": "08:00-12:00"
        },
        {
            "value": parseInt(alarmBean.personTwelveNum),
            "name": "12:00-18:00"
        }
    ];
    let maxRadius = 90,
        barWidth = 5,
        barGap = 5;
    let showValue = true, showPercent = true;
    pieDatas.map(item => {
        sumValue += item.value;
    })
    let barColor = [
        {
            "color1": "#00dec8",
            "color2": ""
        },
        {
            "color1": "#f9da4f",
            "color2": ""

        },
        {
            "color1": "#ff6460",
            "color2": ""
        },
        {
            "color1": "#7d5afb",
            "color2": ""
        },
        {
            "color1": "#3145ff",
            "color2": ""
        }
    ];

    let legendOption = {
        top: "center",
        orient: 'vertical',
        icon: "circle",
        itemWidth: 12,
        itemGap: 13,
        textStyle: {
            fontSize: 14,
            color: "#e1dddd",
            padding: [5, 0, 0, 0],
            rich: {
                name: {
                    color: "#e1dddd",
                    padding: [10, 5, 30, 5]
                },
                percent: {
                    color: '#18DB9F',
                    fontSize: 18,
                    padding: [0, 5, 0, 5]
                }
            }
        },

    };
    pieDatas.map((item, i) => {
        series.push({
            type: 'pie',
            clockWise: true, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
            center: ["50%", "50%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: item.value,
                name: item.name,
                itemStyle: {
                    color: barColor[i] && barColor[i].color1 || 'rgba(68,165,255,1)'
                }
            }, {
                value: sumValue - item.value,
                name: '',
                itemStyle: {
                    color: "transparent",
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        })
        series.push({
            name: 'blank',
            type: 'pie',
            silent: true,
            z: 0,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
            center: ["50%", "50%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: 1,
                itemStyle: {
                    color: "rgba(255, 255, 255,.13)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
    })

    var myCharts = echarts.init(document.getElementById('charts'));
    options = {
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
        },
        tooltip: {
            show: true,
            trigger: "item",
        },
        legend: [{
            left: 20,
            data: ['00:00-08:00', '20:00-24:00', '18:00-20:00'],
            align: 'right',
            ...legendOption

        }, {
            right: 20,
            data: ['08:00-12:00', '12:00-18:00'],
            align: 'left',
            ...legendOption

        }],
        graphic: [{
            type: 'text',
            left: parseInt(sumValue) > 100 ? '46%' : '48%',
            top: '47%',
            style: {
                text: sumValue, // 替换为实际的总值
                textAlign: 'center',
                fill: '#fff',
                fontSize: 24,
                fontWeight: 'bold'
            }
        }],
        series: series,
    };
    myCharts.setOption(options);

}

function setCarChart(obj) {
    const dayList = obj.fiveDay;
    const carList = obj.carList.map(num => parseInt(num));
    //场内车辆数
    var myNonprofit = echarts.init(document.getElementById('nonprofit'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            right: '3%',
            left: '12%',
            bottom: '10%'
        },
        yAxis: [{
            type: 'category',
            data: dayList,
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            },
            axisLabel: {
                margin: 10,
                color: '#e2e9ff',
                textStyle: {
                    fontSize: 10
                },
            },
            axisTick: {
                show: false
            }
        }],
        xAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: '#e2e9ff',
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(0,186,255,.6)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)',
                    type: 'dashed'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: carList,
            barWidth: '15px',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                }
            },
            label: {
                normal: {
                    show: true,
                    lineHeight: 50,
                    formatter: '{c}',
                    position: 'right',
                    textStyle: {
                        color: '#00D6F9',
                        fontSize: 15
                    }

                }
            }
        }]
    };
    myNonprofit.setOption(option);

}

function setCarEnterExitChart(alarmBean) {
    //日均时间段出入车次
    let newSeriesData = [];
    let newPieData = [
        {"value": parseInt(alarmBean.carZeroNum), "name": "00:00-08:00"},
        {"value": parseInt(alarmBean.carTwentyNum), "name": "20:00-24:00"},
        {"value": parseInt(alarmBean.carEighteenNum), "name": "18:00-20:00"},
        {"value": parseInt(alarmBean.carEightNum), "name": "08:00-12:00"},
        {"value": parseInt(alarmBean.carTwelveNum), "name": "12:00-18:00"}
    ];
    let newMaxRadius = 90;
    let newBarWidth = 5;
    let newBarGap = 5;
    let newSumValue = 0;
    let newShowValue = true;
    let newShowPercent = true;

    newPieData.map(item => {
        newSumValue += item.value;
    });

    let newBarColors = [
        {"color1": "rgba(222, 125, 255, 1)", "color2": ""},
        {"color1": "rgba(250, 118, 121, 1)", "color2": ""},
        {"color1": "rgba(53, 198, 215, 1)", "color2": ""},
        {"color1": "rgba(101, 223, 138, 1)", "color2": ""},
        {"color1": "rgba(253, 161, 79, 1)", "color2": ""}
    ];

    let newLegendOption = {
        top: "center",
        orient: "vertical",
        icon: "circle",
        itemWidth: 12,
        itemGap: 13,
        textStyle: {
            fontSize: 14,
            color: "#e1dddd",
            rich: {
                name: {color: "#333333", padding: [10, 5, 30, 5]},
                percent: {color: "#18DB9F", fontSize: 18, padding: [0, 5, 0, 5]}
            }
        }
    };

    newPieData.map((item, i) => {
        newSeriesData.push({
            type: "pie",
            clockwise: true,
            hoverAnimation: false,
            radius: [
                (newMaxRadius - i * (newBarGap + newBarWidth)) + "%",
                (newMaxRadius - (i + 1) * newBarWidth - i * newBarGap) + "%"
            ],
            center: ["50%", "50%"],
            label: {show: false},
            itemStyle: {
                label: {show: false},
                labelLine: {show: false},
                borderWidth: 5
            },
            data: [
                {
                    value: item.value,
                    name: item.name,
                    itemStyle: {color: newBarColors[i]?.color1 || "rgba(68, 165, 255, 1)"}
                },
                {
                    value: newSumValue - item.value,
                    name: "",
                    itemStyle: {color: "transparent"},
                    tooltip: {show: false},
                    hoverAnimation: false
                }
            ]
        });

        newSeriesData.push({
            name: "blank",
            type: "pie",
            silent: true,
            z: 0,
            clockwise: false,
            hoverAnimation: false,
            radius: [
                (newMaxRadius - i * (newBarGap + newBarWidth)) + "%",
                (newMaxRadius - (i + 1) * newBarWidth - i * newBarGap) + "%"
            ],
            center: ["50%", "50%"],
            label: {show: false},
            itemStyle: {
                label: {show: false},
                labelLine: {show: false},
                borderWidth: 5
            },
            data: [
                {
                    value: 1,
                    itemStyle: {color: "rgba(255, 255, 255, .13)", borderWidth: 0},
                    tooltip: {show: false},
                    hoverAnimation: false
                }
            ]
        });
    });

    var myUptime = echarts.init(document.getElementById("uptime"));

    var options = {
        grid: {left: 0, right: 0, top: 0, bottom: 0},
        tooltip: {show: true, trigger: "item"},
        legend: [
            {
                left: 50,
                data: ['00:00-08:00', '20:00-24:00', '18:00-20:00'],
                align: "right",
                ...newLegendOption
            },
            {
                right: 50,
                data: ['08:00-12:00', '12:00-18:00'],
                align: "left",
                ...newLegendOption
            }
        ],
        graphic: [{
            type: 'text',
            left: parseInt(newSumValue) > 100 ? '46%' : '48%',
            top: '47%',
            style: {
                text: newSumValue, // 替换为实际的总值
                textAlign: 'center',
                fill: '#fff',
                fontSize: 24,
                fontWeight: 'bold'
            }
        }],
        series: newSeriesData
    };

    myUptime.setOption(options);
}


/**
 * 道闸管理-接口状态数量
 */
function interfaceStatus() {
    $.ajax({
        type: 'POST',
        url: dataUrl + 'electricity/interfaceStatus',
        data: "type=3",
        dataType: 'json',
        success: function(res) {
            let interface = res.obj.electricityBean;
            document.getElementById('requestNum').innerText = parseInt(interface.requestNum);
            document.getElementById('successNum').innerText = parseInt(interface.successNum);
            document.getElementById('errorNum').innerText = parseInt(interface.errorNum);
        }
    });
}

//接口状态点击
function interfaceStateClick(){
    var index = layer.open({
        title: ['接口状态', 'color: #fff; cursor: move;background: transparent;float: left;'],
        type: 2,
        closeBtn: 2,
        content: '../../page/management/managementFrom.html',
        area: ["1169px", "780px"],
        maxmin: false
        /*btn: ['确定', '关闭'],
        success: function (layero, index) {
//	        	localStorage.setItem("subName",params.name);
            //var myIframe = window[layero.find('iframe')[0]['name']];
            //var fnc = myIframe.setData(params.name); //aaa()为子页面的方法
        },
        yes: function (index, layero) {
            // 获取弹出层中的form表单元素
//          var formSubmit = layer.getChildFrame('form', index);
//          var submited = formSubmit.find('button')[0];
//          // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
//          submited.click();
        },*/
    });
}

//道闸报警详情
function managementClick(){
    var index = layer.open({
        title: ['设备告警', 'color: #fff; cursor: move;background: transparent;float: left;'],
        type: 2,
        closeBtn: 2,
        content: '../../page/management/managementList.html',
        area: ["70%", "97%"],
        maxmin: false
    });
}

function handleClick(param) {
    var url = '../../page/management/gateSubpage.html';
    let text
    switch (param) {
        case 'content1':
            url += '?type=content1';
            text = '人员信息';
            break;

        case 'content2':
            url += '?type=content2';
            text = '人员出入信息';
            break;

        case 'content3':
            url += '?type=content3';
            break;

        case 'other':
            url += '?type=other';
            text = '车辆出入信息';
            break;
    }

    var index = layer.open({
        title: [text, 'color: #fff; cursor: move;background: transparent;float: left;'],
        type: 2,
        closeBtn: 2,
        content: url,
        area: ["1169px", "780px"],
        maxmin: false
    });
}