var laypage;
var layer;
var laydate;
var page = 1;  //页面，默认第1页
var LIST_DEVICE;
var recordData;
var dataMap = [];

$(function(){
    layui.use(['laypage', 'layer', 'laydate'], function () {
        laypage = layui.laypage;
        layer = layui.layer;
        laydate = layui.laydate;
        //开始时间
        laydate.render({
            elem: '#start'
            , type: 'date'
            , trigger: 'click'
            , theme: 'custom'
        });
        //截止时间
        laydate.render({
            elem: '#end'
            , type: 'date'
            , trigger: 'click'
            , theme: 'custom'
        });

        if(TEST_TAG){
            initData();

        }else{
            //请求设备列表
            queryDevice();

            //提示用户选择设备进行查询
            layer.msg("请先选择设备再进行查询！");

            //获取历史数据并渲染
            //queryRecord(page);
        }

        //提示用户选择设备进行查询
        layer.msg("请先选择设备再进行查询！");
        //请求设备列表
        // queryDevice();
    });
});

function initData() {
    var record = {};
    var data = new Array();

    var maxI = 7;
    var maxJ = 4;

    for(var i=1;i<=maxI;i++){
        var param = {};
        param.id = "设备id"+i;
        param.name = "设备名称";
        param.time = "20220217101523";
        var value = "";
        value += "[";
        if(i == 1){
            for(var j=1;j<=3;j++){
                value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
                if(j < 3){
                    value += ",";
                }
            }
        }else if(i == 2){
            for(var j=1;j<=4;j++){
                value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
                if(j < 4){
                    value += ",";
                }
            }
        }else if(i == 3){
            for(var j=1;j<=1;j++){
                value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
                if(j < 1){
                    value += ",";
                }
            }
        }else{
            for(var j=1;j<=maxJ;j++){
                value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
                if(j < maxJ){
                    value += ",";
                }
            }
        }

        value += "]";
        param.value = value;
        data.push(param);
    }

    record.total = 10;
    record.data = data;

    renderRecordInfo(record.data);
}

//请求获取设备列表
function queryDevice() {
    $.get("./cgi-bin/device/query-all", function (data, status) {
        if ("success" == status) {
            LIST_DEVICE = data;
            renderDeviceInfo();
        }
    }, "json");
}

//渲染设备下拉框
function renderDeviceInfo() {
    var html = '';
    html += '<option value="" selected>所有设备</option>';
    if (LIST_DEVICE != null && LIST_DEVICE.length > 0) {
        $.each(LIST_DEVICE, function (index, item) {
            html += '<option value="' + item.id + '">' + item.name + '</option>';
        });
    }
    $("#deviceId").html(html);
}

//请求获取历史数据
function queryRecord(page) {
    var request = {};
    request.id = $("#deviceId").val();
    if(!request.id)
    {
        request.id = '0';
        layer.msg("请选择设备进行查询！");
        return ;
    }

    request.beginTime = $("#start").val().replace('-', '').replace('-', '');
    if (request.beginTime) {
        request.beginTime += '000000';
    }

    request.endTime = $("#end").val().replace('-', '').replace('-', '');
    if (request.endTime) {
        request.endTime += '235959';
    }

    request.page = page;
    console.log(request);
    $.post("./cgi-bin/record-his/query", JSON.stringify(request), function (data, status) {
        if ("success" == status) {
            recordData = data;
            //渲染历史数据列表
            renderRecordInfo(recordData.data);
            //渲染页码
            renderPageInfo(page,recordData.total);
        }else {
            window.parent.notify("数据查询出错，请重新操作！");
        }
    }, "json");
}

//渲染历史数据列表
function renderRecordInfo(data) {

    var div_body_x = false;
    var thead = "";
    thead += "<tr><th style='width: 100px'>ID</th>";
    thead += "<th style='width: 180px'>设备名称</th>";
    thead += "<th style='width: 180px'>时间</th>";
    var tbody = '';
    var theadData = [];

    if (data != null && data.length > 0) {
        // $.each(data, function (index, item) {
        //     html += "<tr><td>" + item.id + "</td>";
        //     html += "<td>" + item.name + "</td>";
        //     html += "<td>" + timeStr(item.time) + "</td>";
        //     var tempData = eval(item.value);
        //     var temp = '';
        //     for (var i = 0; i < tempData.length; i++) {
        //         if (i != 0) {
        //             temp += "，";
        //         }
        //         temp += tempData[i].name + "=" + tempData[i].value;
        //     }
        //     html += "</tr>";
        // });


        //获取表头
        $.each(data, function (index, item) {
            var tempData = eval(item.value);
            if(theadData.length < tempData.length){
                theadData = tempData;
            }
        });
        // console.log(theadData);
        for(var i=0;i<theadData.length;i++){
            if(i >= 5){
                break;
            }
            thead += "<th style='width: 150px'>"+ theadData[i].name +"</th>";
        }
        thead += "<th style='width: 150px'>详情</th>";
        thead += "</tr>";

        $.each(data, function (index, item) {
            tbody += "<tr><td>" + item.id + "</td>";
            tbody += "<td>" + item.name + "</td>";
            tbody += "<td>" + timeStr(item.time) + "</td>";
            var tempData = eval(item.value);
            for (var i = 0; i < theadData.length; i++) {
                if(i >= 5){
                    break;
                }
                if(i < tempData.length){
                    tbody += "<td>"+ tempData[i].value +"</td>";
                }else {
                    tbody += "<td></td>";
                }
            }
            var key = item.id + item.time;
            tbody += "<td><button class='layui-btn layui-btn-normal' onclick='detail(\""+key+"\");'>详情</button></td>";
            tbody += "</tr>";
            dataMap[key] = tempData;
        });
    } else {
        thead += "<th style='width: 150px'>数据</th></tr>";
        tbody += '<tr><td colspan="4">暂未查到数据</td></tr>';
    }
    $("#div-body").attr("style","height: 615px;");
    $("#thead").html(thead);
    $("#recordList").html(tbody);
}

//页码渲染
function renderPageInfo(page, total) {
    laypage.render({
        elem: 'pdgxq-page',
        count: total,
        theme: '#e45163',
        layout: ['prev', 'page', 'next', 'skip'],
        curr: page,
        limit: 10,
        jump: function (obj, first) {
            if (!first) {
                page = obj.curr;
                queryRecord(page);
            }
        }
    });
}

//时间格式处理，20210226101010-----2021-02-26 10:10:10
function timeStr(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)
}

/*------------------ tableToExcel导出模块-start ----------------- */

//导出Excel点击事件
function generateClick(){
    // var tableId = "record-his-list";
    var request = {};
    request.id = $("#deviceId").val();
    if(!request.id)
    {
        request.id = '0';
        layer.msg("请选择设备进行查询！");
        return ;
    }

    request.beginTime = $("#start").val().replace('-', '').replace('-', '');
    if (request.beginTime) {
        request.beginTime += '000000';
    }

    request.endTime = $("#end").val().replace('-', '').replace('-', '');
    if (request.endTime) {
        request.endTime += '235959';
    }

    request.page = page;
    console.log(request);

    var html = queryAllRecord(request);

    // var record = {};
    // var data = new Array();
    //
    // var maxI = 5;
    // var maxJ = 9;
    //
    // for(var i=1;i<=maxI;i++){
    //     var param = {};
    //     param.id = "设备id";
    //     param.name = "设备名称";
    //     param.time = "20220217101523";
    //     var value = "";
    //     value += "[";
    //     if(i == 1){
    //         for(var j=1;j<=4;j++){
    //             value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
    //             if(j < 4){
    //                 value += ",";
    //             }
    //         }
    //     }else if(i == 3){
    //         for(var j=1;j<=15;j++){
    //             value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
    //             if(j < 15){
    //                 value += ",";
    //             }
    //         }
    //     }else if(i == 2){
    //         for(var j=1;j<=18;j++){
    //             value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
    //             if(j < 18){
    //                 value += ",";
    //             }
    //         }
    //     }else if(i == 4){
    //         for(var j=1;j<=7;j++){
    //             value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
    //             if(j < 7){
    //                 value += ",";
    //             }
    //         }
    //     }else{
    //         for(var j=1;j<=maxJ;j++){
    //             value += "{'name':'名称" + j +"','value':'数据" + i + "" + j + "'}";
    //             if(j < maxJ){
    //                 value += ",";
    //             }
    //         }
    //     }
    //
    //     value += "]";
    //     param.value = value;
    //     data.push(param);
    // }
    //
    // record.total = 10;
    // record.data = data;
    // // console.log(record);
    // var html = getTable(record.data);
    // tableToExcel(html);
}

function queryAllRecord(request){
    var html = "";
    $.ajaxSettings.async = false;
    $.post("./cgi-bin/record-his/excel-his", JSON.stringify(request), function (data, status) {
        if ("success" == status) {
            console.log(data.data);
            //渲染历史数据列表
            var html = getTable(data.data);
            tableToExcel(html);
        }else {
            window.parent.notify("数据查询出错，请重新操作！");
        }
    }, "json");
    return html;
}

function getTable(data) {
    var thead = "";
    thead += "<tr><th style='width: 100px'>ID</th>";
    thead += "<th style='width: 180px'>设备名称</th>";
    thead += "<th style='width: 180px'>时间</th>";
    var tbody = '';
    var theadData = [];

    if (data != null && data.length > 0) {
        //获取表头
        $.each(data, function (index, item) {
            var tempData = eval(item.value);
            if(theadData.length < tempData.length){
                theadData = tempData;
            }
        });
        console.log(theadData);
        for(var i=0;i<theadData.length;i++){
            thead += "<th style='width: 150px'>"+ theadData[i].name +"</th>";
        }
        thead += "</tr>";

        $.each(data, function (index, item) {

            tbody += "<tr><td>" + item.id + "</td>";
            tbody += "<td>" + item.name + "</td>";
            tbody += "<td>" + timeStr(item.time) + "</td>";
            var tempData = eval(item.value);

            for (var i = 0; i < theadData.length; i++) {
                if(i < tempData.length){
                    tbody += "<td>"+ tempData[i].value +"</td>";
                }else {
                    tbody += "<td></td>";
                }
                // tbody += "<td>"+ tempData[i].value +"</td>";
            }
            tbody += "</tr>";
        });
    } else {
        thead += "<th style='width: 150px'>数据</th></tr>";
        tbody += '<tr><td colspan="4">暂未查到数据</td></tr>';
    }

    var html = thead + tbody;
    // console.log(html);
    return html;
}

function tableToExcel(html) {
    var name = "历史记录";
    var uri = 'data:application/vnd.ms-excel;base64,';
    var template = '<html><head><meta charset="UTF-8"></head><body><table border="1">{table}</table></body></html>';

    if(!html){
        layer.msg("没有获取到要导出的内容！");
    }

    var ctx = {worksheet: name || 'Worksheet', table: html};
    window.location.href = uri + base64(format(template, ctx))
}

function format(s, c) {
    return s.replace(/{(\w+)}/g,function(m, p) { return c[p]; });
}

function base64(s) {
    return window.btoa(unescape(encodeURIComponent(s)))
};

/*------------------ tableToExcel导出模块-end ----------------- */

function detail(key) {
    var items = dataMap[key];
    var html = "";

    $.each(items, function (index, item) {
        html +="<tr><td>"+item.name+"</td><td>"+item.value+"</td></tr>";
    });

    $("#tbody").html(html);
    layer.open({
        skin: 'mypop',
        type: 1,
        title: false,
        area: ['40%', '65%'],
        closeBtn: 0,
        shade: 0,
        scrollbar: false,
        content: $('#editWarnDom')
    });
}

function closepopBtn(){
    layer.closeAll();
    $("#tbody").html("");
}