<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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"/>
    <title>终端版本升级详情</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.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/basic.css">
    <style>
        .form-control {
            height: 22px;
            padding: 1px 5px;
        }

        #deviceTable {
            min-width: 100%;
        }

        .btn {
            padding: 1px 6px;
            font-size: 12px;
        }

        .tr {
            text-align: center;
        }

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

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

        .pagination > li > a, .pagination > li > span {
            padding: 6px 12px;
        }

        .alert {
            margin-bottom: 5px
        }
        .spansty{
            color: red;
            font-size: 15px;
            margin-left: 5px;
        }
        .spansle{
            font-size: 15px;
            margin-left: 10px;
        }

    </style>
</head>
<body class="container-fluid">
<div class="row">
    <%--页面头--%>
    <div class="col-md-12">
        <div class="form-inline">

            <div class="alert alert-warning" style="text-align: center">
                <span class="label label-success" id="nums"></span>
                <span class="spansle">目标程序版本: </span><span class="spansty" id="edName"></span>
                <span class="spansle">协议版本: </span><span class="spansty" id="edProtocol"></span>
                <span class="spansle">版本日期: </span><span class="spansty" id="edDate"></span>
                <span class="spansle">版本系列: </span><span class="spansty" id="devType"></span>
                <span class="spansle">版本类型: </span><span class="spansty" id="type"></span>

                <div style="float: right">
                    <button style="margin-right: 20px" type="button" id="confirm"  class="btn btn-primary"><li class="glyphicon glyphicon-arrow-up">提交升级申请</li></button>
                    <button type="button" id="getCsv"  class="btn btn-primary">导出数据</button>
                </div>
            </div>

        </div>
    </div>
    <%--页面表格--%>
    <div class="col-md-12">
        <div class="width100 div_height">
            <table id="deviceTable" class="table table-striped table-bordered dataTable no-footer width100">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>终端名</th>
                    <th>版本号</th>
                    <th>协议版本</th>
                    <th>版本日期</th>
                    <th>终端系列</th>
                    <th>终端型号</th>
                    <th>供电公司</th>
                    <th>变电站</th>
                    <th>更新时间</th>
                    <th>修改人员</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<input type="hidden" id="username" value="${username}">
<script src="${ctx}/js/plugin/jquery/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.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}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/plugin/xss/aes.js"></script>
<script src="${ctx}/jspJS/sm2.js"></script>
<script src="${ctx}/jspJS/sm3.js"></script>
<script src="${ctx}/jspJS/confirmIndentity.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/common.js"></script>

<script>
    var dataTable;
    var jsoncsv;
    var height = $(window).height() - 70;
    let edIndex = getQueryString('edIndex')

    let arr = window.parent.senddevArr()
    $(function () {
        getTargetEd(edIndex)
        refresh()
        $('#nums').text('已选  '+arr.length+'  台装置')
    })


    $('#confirm').click(function () {
        let username = $('#username').val()
        let resetName = ''
            passwordIndentity(username, resetName, function () {
                window.parent.sendWebSocket(edIndex, 2)
            })
    })

    $('#getCsv').click(function () {
        tableToExcel()
    })


    /**
     * 初始化获取后台数据
     */
    function refresh() {
        var indexi;
        $.ajax({
            type: "post",
            contentType: 'application/json;charset=UTF-8',
            url: "/pqs9900/version/getTerminalListForUp",
            dataType: "json",
            data: JSON.stringify(arr),
            beforeSend: function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 200) {
                    //初始化表格
                    jsoncsv=data.body;
                    initTransactionTable(data.body);
                } else {
                    jsoncsv=null;
                    layer.msg(data.message, {icon: 2, time: 2000})
                    initTransactionTable(null);
                }
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })
    }

    //初始化表格数据
    function initTransactionTable(tableData) {
        var tableHeight = height - 75;
        var length = Math.floor(tableHeight / 32);
        if (length < 1) {
            length = 1;
        }
        var tableCellHeight = 32 * length;
        dataTable = $("#deviceTable").DataTable();
        dataTable.clear().draw();
        dataTable = $('#deviceTable').DataTable({
            order: [8, 'desc'],
            columnDefs: [
                {
                    orderable: false
                }
            ],
            columns: [
                {width: "5%",data: null,"targets": 0},
                {width: "12%", data: "name"},
                {width: "6%", data: "edName"},
                {width: "7%", data: "proTocol"},
                {width: "7%", data: "edDate"},
                {width: "7%", data: "devSeriesName"},
                {width: "12%", data: "devType"},
                {width: "13%", data: "gdName"},
                {width: "13%", data: "bdName"},
                {
                    width: "8%", data: "updateTime", render: function (data) {
                      return   formatTime(data,2)
                    }
                },
                {width: "8%", data: "updateUser"},
            ],
            destroy: true,
            data: tableData,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: tableCellHeight,
            // scrollX: true,
            lengthMenu: [length],
            language: {
                url: '/pqs9900/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                var api = this.api();
                api.column(0).nodes().each(function(cell, i) {
                    cell.innerHTML =  i + 1;
                });
                $("#deviceTable_info").addClass("fl");
                $("#deviceTable_paginate").addClass("fr");
                $("#deviceTable_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 = $("#deviceTable").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
    }



    //获取目标版本号
    function getTargetEd(edIndex) {
        var indexi;
        $.ajax({
            type: "get",
            url: "/pqs9900/version/getVersionTwo",
            dataType: "json",
            data: {edIndex: edIndex},
            beforeSend: function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 200) {
                     edNames=data.body.edName== null ? '' :data.body.edName;
                     edProtocols=data.body.edProtocol== null ? '' :data.body.edProtocol;
                     edDates=data.body.edDate== null ? '' :data.body.edDate;
                     devTypes=data.body.devType== null ? '' :data.body.devType;
                     types=data.body.type== null ? '通用类型' :data.body.type
                    //初始化表格
                    $('#edName').text( edNames)
                    $('#edProtocol').text( edProtocols)
                    $('#edDate').text( edDates)
                    $('#devType').text(devTypes )
                    $('#type').text( types)

                } else {
                    layer.msg(data.message, {icon: 2, time: 2000})
                }
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })
    }

    var edNames;
    var edProtocols;
    var edDates;
    var devTypes;
    var types
    function tableToExcel(){
        // 要导出的json数据
        const jsonData = jsoncsv
        // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let title = `目标版本,协议版本,版本日期,版本系列,版本类型\n`;
        let t =edNames+'\t,'+edProtocols+'\t,'+edDates+'\t,'+devTypes+'\t,'+types+'\t,\n';
        let str = `序号,终端名,版本号,协议版本,版本日期,装置系列,终端型号,供电公司,变电站,更新时间,修改人员\n`;
        // 增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
            console.log(jsonData[i])
           let s= i+1+'\t,'+jsonData[i].name+'\t,'+jsonData[i].edName+'\t,'+jsonData[i].proTocol+'\t,'+jsonData[i].edDate+'\t,'+jsonData[i].devSeriesName+'\t,'+jsonData[i].devType+'\t,'+jsonData[i].gdName+'\t,'+jsonData[i].bdName+'\t,'+formatTime(jsonData[i].updateTime,1)+'\t,'+jsonData[i].updateUser+','
            str+=s+'\n';
        }
        // encodeURIComponent解决中文乱码
        const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(title+t+str);
        // 通过创建a标签实现
        const link = document.createElement("a");
        link.href = uri;
        // 对下载的文件命名
        link.download =  "升级装置.csv";
        link.click();
    }
</script>
</body>
</html>
