<%@ 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>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>终端更改日志列表</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/animate/animate.min.css">
    <link rel="stylesheet"
          href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/iconfont/iconfont.css">
    <link rel="stylesheet"
          href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet"
          href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .tr {
            text-align: center;
        }

        .td {
            text-align: center;
            line-height: 48px
        }

        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        #downloadWave {
            margin-top: -25px;
        }

        body {
            overflow: hidden;
        }
    </style>
</head>
<body class="bg-white">
<div class="container-fluid">
    <div class="row ">
        <div class="form-inline header mt10 ml15">
            <%@include file="../../include/time.jsp" %>
            <button id="query" type="button" class="btn themeBGColor">
                <i class="glyphicon glyphicon-search"></i>
            </button>
            <div class="form-group  mr10 mt5 fr" id="fliteData">
                <label>筛选数据：</label>
                <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
            </div>
        </div>

        <div class="col-sm-12">
            <table id="terminallogid" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr role="row">
                    <th class="text-center">序号</th>
                    <th class="text-center">名称</th>
                    <th class="text-center">更改人员</th>
                    <th class="text-center">更改时间</th>
                    <th class="text-center">描述</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<%--当前会话的用户名--%>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.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.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/common.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script>
    $("#interval").val("月份");
    let devId = getQueryString("devIndex")



    /**
     * 终端更改日志
     */
    var dataTable = null;
    var resultData = null;

    $(document).ready(function () {
        load();
    });
    $("#query").click(function () {
        load();
    });


    function load() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var i;
        $.ajax({
            type: "get",
            url: "/pqs9900/device/getDevRunFlagLogs",
            data: {
                startTime:startTime,
                endTime:endTime,
                devId:devId
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            error: function (data) {
                layer.msg("暂无数据", {
                    icon: 5,
                    time: 3000
                });
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            },
            success: function (data) {
                if (data.code == 500) {
                    resultData = null;
                    //没有数据
                    initTable(null);
                } else {

                    if (data.body.length == 0) {
                        resultData = null;
                        //没有数据
                        initTable(null);
                    } else {
                        resultData = data.body;
                        initTable(resultData);
                    }
                }
                startQuery();
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

    function initTable(data) {
        var height = $(window).height() - 160;
        var length = Math.floor(height / 28);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#terminallogid").DataTable();
        dataTable.clear().draw();
        dataTable = $('#terminallogid').DataTable({
            // order: [[10, 'asc']],
            columnDefs: [
                {
                    orderable: false,
                    targets: [2, 3]
                }
            ],
            columns: [
                {"width": "4%",data: null,"targets": 0},
                {"width": "15%",data:"objIndex"},
                {"width": "8%",data:"userIndex"},
                {"width": "11%",data:"updateTime",render:function (data) {
                        return formatTime(data,1)
                    }},
                {"width": "42%",data:"terminalDescribe"}
            ],
            autoWidth: false,
            serverSide: false,
            destroy: true,
            data: data,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            pageLength: length,
            language: {
                url: '/pqs9900/json/chine.json'
            },
            "createdRow": function (row, data, index) {

                if (data.length > 70) {
                    var realValue = data;
                    var s = data.substr(0, 65) + '...'
                    $('td', row).eq(5).prevObject[5].innerHTML = "<span title='" + realValue + "'>" + s + "</span>";
                }
            },
            fnDrawCallback: function (oTable) {
                $("#terminallogid_info").addClass("fl");
                $("#terminallogid_paginate").addClass("fr");
                $("#terminallogid_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $("#terminallogid").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
        dataTable.on('order.dt search.dt',
            function () {
                dataTable.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
        new $.fn.dataTable.Buttons(dataTable, {
            buttons: [
                {
                    extend: 'csv',//导出格式
                    title: '终端更改日志列表',//导出csv名称
                    exportOptions: {
                        columns: [1, 2, 3,4],//导出需要的列
                        format: {
                            body: function (data) {//对导出内容的筛选 data 表格内容 rid 行索引 cid 列索引
                                return data;
                            }
                        }
                    }
                }
            ]
        });
        modifyCss(dataTable);

    }

    function modifyCss(dataTable) {
        dataTable.buttons().container().css("display", "inline-block");
        dataTable.buttons().container().css("float", "right");
        dataTable.buttons().container().css("top", "4px");
        dataTable.buttons().container().find("a").prepend("<i class='glyphicon glyphicon-share'></i>");
        dataTable.buttons().container().appendTo('.header');
        dataTable.buttons().container().after($("#fliteData")[0]);
    }

    //搜索表中的数据
    function searchResult(value) {
        dataTable.search(value).draw();
    }

    //特殊处理，表头紧缩问题--start
    var it = null;

    function startQuery() {
        //实时刷新时间单位为毫秒
        it = setInterval('refreshQuery()', 100);

    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#terminallogid").width();
        if (width > 100) {
            initTable(resultData);
            window.clearInterval(it)
        }
    }

    //特殊处理，表头紧缩问题--end

</script>
</body>
</html>
