<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>责任计算详细结果展示</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 5px;
        }
        #resContainer{
            overflow-x: hidden;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row" id="mainContainer">
        <ul class="nav nav-tabs mt10 col-sm-12" id="resTab"></ul>
        <div class="tab-content pdt5 col-sm-12">
            <div class="tab-pane active" id="resContainer">

            </div>
        </div>

    </div>
    <input type="hidden" value="${resIndex}" id="resIndex">
</div>
</body>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/plugin/highcharts/highstock.js"></script>
<script src="${ctx}/js/plugin/highcharts/exporting.js"></script>
<script src="${ctx}/js/plugin/highcharts/highchart-ZH.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    var $resIndex = $("#resIndex").eq(0);
    var $resTab = $("#resTab").eq(0);
    var $resContainer = $("#resContainer").eq(0);
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    //首先根据索引获取此处责任计算的详细数据
    $(function () {
        var resIndex = $resIndex.val();
        $.ajax({
            type: "post",
            url: "/pqs9000/responsibility/getResponsbilityData",
            data: {
                resIndex: resIndex
            },
            dataType: 'json',
            success: function (data) {
                $resTab.empty();
                var time = data.body.resTimes;
                if (data.code === 500) {
                    //异常获取用采列表或者用采列表为空
                    layer.msg('获取责任详细信息失败', {icon: 2, time: 2000});
                } else {
                    //拼接用采数据列表
                    var times = time.split(",");
                    $("#resTab").append("<li class='active'><a class='navtab' href='#resContainer' data-toggle='tab' id='" + times[0] + "次谐波'>" + times[0] + "次谐波</a></li>")
                    if (times.length > 1) {
                        for (var t = 1; t < times.length; t++) {
                            $("#resTab").append("<li><a class='navtab' href='#resContainer' data-toggle='tab' id='" + times[t] + "次谐波'>" + times[t] + "次谐波</a></li>")
                        }
                    }
                    var timeTemp = getTime();
                    //tab初始化好了，获取动态数据和责任数据开始页面填充
                    drawPic(timeTemp);
                }
            }
        })
    })

    //监听tab的切换，更新页面内容
    $("#mainContainer").on("click", ".navtab", function () {
        var time = $(this).text();
        time = time.replace("次谐波", "");
        time = time.replace(/(^\s*)|(\s*$)/g, '');
        drawPic(time);
    })

    //获取动态数据和责任数据进行页面填充
    function drawPic(time) {
        var resIndex = $resIndex.val();
        var historyLodingIndex;
        $.ajax({
            url: "/pqs9000/responsibility/displayHistoryData",
            type: "post",
            beforeSend: function () {
                historyLodingIndex = ityzl_SHOW_LOAD_LAYER();
            },
            dataType: "json",
            data: {
                time: time,
                resIndex: resIndex
            },
            success: function (data) {
                if (data.code === 200) {
                    //循环给内容框展示数据
                    displayHistoryData(data.body);
                } else {
                    layer.msg(data.message, {icon: 2, time: 2000});
                }
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(historyLodingIndex);
            }
        })
    }

    //获取当前导航栏次数
    function getTime() {
        var time = $("#mainContainer li[class='active'] a").text();
        time = time.replace("次谐波", "");
        time = time.replace(/(^\s*)|(\s*$)/g, '');
        return time;
    }

    //绘制内容模块内的各个数据
    function displayHistoryData(data) {
        //先清空原来的内容
        $resContainer.empty();
        for (var i = 0; i < data.length; i++) {
            var picID="pic"+i;
            var tableID="table"+i;
            var responsibilityResult = data[i];
            var div = "<div class='row'> <div class='col-sm-6' style='height: 250px' id='"+picID+"'></div> <div class='col-sm-6'> <table class='table table-striped table-bordered dataTable no-footer' id='"+tableID+"'> <thead> <tr> <th>用户名(用户号)</th> <th>责任数据(%)</th> </tr> </thead> </table> </div> </div>";
            $resContainer.append(div)
            //准备绘制波形图和表格
            var dynamicData=responsibilityResult.datas;
            var responsibilityData=responsibilityResult.responsibilities;
            var title ="时间："+responsibilityResult.limitSTime+"至"+responsibilityResult.limitETime+" 限值："+responsibilityResult.limitValue;
            var chart=initBasePic(title,picID);
            //根据后台返回的数据绘制波形图
            initDynamicPic(chart,dynamicData);
            //填充表格
            initTable(tableID,responsibilityData);
        }
    }

    //初始化动态责任图形基础信息
    function  initBasePic(title,picID) {
        var chartDynamic;
        //绘制瞬时波形图
        Highcharts.stockChart(picID, {
            chart: {
                type: 'spline',
            },
            title: {
                text: title,
                align: 'center',
            },
            tooltip: {
                borderColor: grey,
                backgroundColor: 'rgba(105,105,105,0.7)',
                style: {
                    color: 'white',
                    fontSize: "10px",
                    padding: 10,
                },
                formatter: function () {
                    var s = '<b>时刻：'
                        + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)
                        + '</b>';
                    //获取是电压 还是 电流，以及谐波次数作为提示
                    $.each(this.points, function () {
                        s += '<br/>' + this.series.name + ': ' +
                            this.y.toFixed(4);
                    });
                    return s;
                },
                shared: true
            },
            rangeSelector: {
                enabled: false,
            },
            //导航器各项属性设置
            navigator: {
                enabled: false
            },
            scrollbar: {
                enabled: false
            },
            exporting: false,
            credits: false,
            xAxis: {
                labels: {
                    step: 2
                },
                type: 'datetime',
                dateTimeLabelFormats: {
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%m-%d',
                    week: '%m-%d',
                    month: '%Y-%m',
                    year: '%Y'
                },
            },
            yAxis: {
                showLastLabel: true,//显示纵坐标最大值，highstock默认不显示最大值，即默认为false
                // allowDecimals: false,
                opposite: false
            },
            series: [],
            noData: {
                style: {
                    fontWeight: 'bold',
                    fontSize: '15px',
                    color: '#303030'
                }
            }
        }, function (c) {
            chartDynamic = c;
        });
        return chartDynamic;
    }

    //绘制动态相关责任图形
    function initDynamicPic(chart,dynamicData) {
        if(dynamicData!==null&dynamicData.length>1){
            for (var i=0;i<dynamicData.length;i++){
                var data=assembleData(dynamicData,i);
                var name=dynamicData[i].customerName;
                chart.addSeries({
                    name: name,
                    type: 'spline',
                    data: data
                }, false);
            }
            chart.redraw(); //刷新
        }
    }

    //根据索引返回指定动态责任数据
    function assembleData(data, i) {
        var picData = [];
        for (var j = 0; j < data[i].timeDatas.length; j++) {
            var value= data[i].valueDatas[j];
            if(value===0){
                value=0.0;
            }
            picData.push([data[i].timeDatas[j], value])
        }
        return picData;
    }

    //填充用户责任量化表格
    function initTable(tableID,responsibilityData) {
        $("#"+tableID).DataTable({
            data: responsibilityData,
            autoWidth: false,
            order: [[1,"desc"]],
            columnDefs: [
                {"width": "70%", "targets": 0},
                {"width": "30%", "targets": 1},
            ],
            paging: false,
            lengthChange: false,
            searching: false,
            destroy: true,
            scrollY: 210,
            info: false,
            pageLength: 100,
            language: {
                url: '/pqs9000/json/chine.json',
            },
            columns: [
                {data: 'customerName'},
                {data: 'responsibilityData'}
            ],
        })
    }



</script>
</html>
