var $startTime = $("#startTime");
var $endTime = $("#endTime");
var layerId = -1;
var height = $(window).height() - 30;
var oTable = null;
$("#interval").val("周");
$(function () {
    getHarmonicRate();
});

$('#query').click(function () {
    getHarmonicRate();
});

function getHarmonicRate() {
    layerId = SHOW_LOAD_LAYER(layer);

    var startTime = $startTime.eq(0).val();
    var endTime = $endTime.eq(0).val();
    var i;
    $.ajax({
        type: "POST",
        url: "/pqs9000/area/getHarmonicRate",
        data: {
            startTime: startTime,
            endTime: endTime
        },
        beforeSend: function () {
            i = ityzl_SHOW_LOAD_LAYER();
        },
        dataType: "json",
        success: function (info) {
            if (info.code === 500) {
                drawPic([]);
                drawTable([]);
            } else {
                drawTable(info.body);
                drawPic(info.body);
            }
            //***********关闭loading
            ityzl_CLOSE_LOAD_LAYER(i);
        }
    });
}

function drawTable(data) {
    var tableData = '';
    var offset = 0;

    while (offset < data.length) {
        tableData += '["","' + data[offset].gdName + '","'
            + data[offset].bdName + '","'
            + data[offset].pointName + '","'
            + data[offset].voltage + '","'
            + data[offset].ip + '","'
            + (data[offset].harmonicRate == -1 ? '(暂无数据)' : data[offset].harmonicRate) +
            '"],';

        offset++;
    }

    tableData = tableData.substring(0, tableData.lastIndexOf(','));
    tableData = eval('[' + tableData + ']');
    oTable = $("#harmonicrate")
        .DataTable({
            scrollX: true,
            scrollY: height * 0.3,
            columns: [
                {"width": "5%"},
                {"width": "6%"},
                {"width": "8%"},
                {
                    "width": "9%", render: function (data, type, full, meta) {
                        var value = data;
                        if (data.length > 15) {
                            value = data.substring(0, 14) + "...";
                            value = "<span title=" + data + ">" + value + "</span>";
                        }
                        return value;
                    }
                },
                {"width": "6%"},
                {"width": "9%"},
                {"width": "7%"}
            ],
            data: tableData,
            lengthChange: false,
            info: false,
            "paging": false, // 禁止分页
            bDestroy: true,
            'searching': true,
            dom: 'lrt<<"myStyle"i><"myStyle"p>>',
            ordering: true,
            scrollCollapse: false,
            language: {
                url: '/pqs9000/json/chine.json'
            }
        });

    oTable.on('draw.dt', function () {
        oTable.column(0, {
            draw: 'applied',
        }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).draw();
}

$("#pic").css("height", height * 0.6);

function drawPic(data) {
    var length = data.length > 20 ? 20 : data.length;
    var xData = [];
    var name = [];
    var max = 1;

    if (data != []) {
        max = data[0].harmonicRate == -1 ? 1 : Math.ceil(data[0].harmonicRate);
    }

    for (var i = 0; i < length; i++) {
        var color = {};
        var dd = {};
        name.push(data[i].pointName);

        if (data[i].harmonicRate == -1) {
            color.value = max > 1 ? data[0].harmonicRate * 0.03 : 0.03;
            dd.color = noData;
            color.itemStyle = dd;
            xData.push(color);
        } else {
            color.value = (data[i].harmonicRate == 0 ? (max > 1 ? data[0].harmonicRate * 0.03 : 0.03) : data[i].harmonicRate);
            dd.color = orange;
            color.b = data[i].harmonicRate == 0 ? 1 : 0;
            color.itemStyle = dd;
            xData.push(color);
        }
    }

    var pic = echarts.init(document.getElementById("pic"));

    var option = {
        backgroundColor: canvasBG,// 背景色,
        title: {
            text: '总谐波畸变率(前20条数据)',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (params) {
                var tips = "";
                tips += params[0].seriesName + ":" + (params[0].data.itemStyle.color == noData ? '(暂无数据)' : params[0].data.b == 1 ? 0 : params[0].value)
                    + "<br/>";

                return tips;
            }
        },
        color: [orange],
        legend: {
            data: ['总谐波畸变率'],
            x: 'left'
        },
        grid: {
            left: '3%',
            bottom: '10%',
            right: '7%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: name,
            name: '(监测点名称)',
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 0,
                formatter: function (value) {
                    return (value.length > 3 ? (value.slice(0, 3) + "...") : value)
                }
            }, triggerEvent: true
        }],
        yAxis: [{
            type: 'value',
            name: '(%)',
            max: max /*function (value) {
                if (value.max == 0.03) {
                    return 1;
                }

                return value.max;
            }*/,
            splitLine: {
                show: false
            }
        }],
        series: [{
            name: '总谐波畸变率',
            type: 'bar',
            barMaxWidth: 30,
            data: xData
        }]
    };

    pic.setOption(option);

    pic.on('mouseover', function (params) {
        if (params.componentType == 'xAxis') {
            var tt = $('#tip');
            tt.html(params.value);
            tt.css("left", params.event.event.clientX + document.documentElement.scrollLeft + 10 + "px");
            tt.css("top", params.event.event.clientY + document.documentElement.scrollTop + 10 + "px");
            tt.css("display", "block");
        }
    });

    pic.on('mouseout', function (params) {
        $('#tip').hide();
    });

}

function searchResult(value) {
    oTable.search(value).draw();
}