<%--
  Created by IntelliJ IDEA.
  User: 徐扬
  Date: 2021/8/16
  Time: 12:32
  To change this template use File | Settings | File Templates.
--%>
<%@ 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>
    <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>FTP</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <style>
        .normal {margin-left: 4%;line-height: 70px}
        .normalText {margin-left: 1%;line-height: 70px}
        .hf{height: 100%;float: left}
        body {outline: none;caret-color: rgba(0,0,0,0);}
        .fixed-table-loading {display: none}
        tr {cursor: pointer;height: 50px;}
        .table-hover>tbody>tr:hover {background-color: lightskyblue!important;}
        .table tbody tr td{
            vertical-align: middle;
        }
        .buttonCss{height: 20px;width: 110px;float: right;margin-right: 5px}
        .buttonTop{top: -5px}
    </style>
</head>
<body>
    <div style="height: 60px;width: 100%">
        <div class="hf" style="width: 20%">
            <span class="f20 normal">前置IP :</span>
            <span id="ip" class="f20 normalText"></span>
        </div>
        <div class="hf" style="width: 30%">
            <span class="f20 normal">终端路径 :</span>
            <span id="path" class="f20 normalText"></span>
        </div>
        <div id="fileNumbers" class="hf" style="width: 20%;display: none">
            <span class="f20 normal">文件数 :</span>
            <span id="fileCounts" class="f20 normalText"></span>
        </div>
    </div>
    <div id="content" style="width: 100%">
        <div class="node_name" style="height: 100%;width: 48%;float: left;margin-left: 1%">
            <div class="f20" style="height: 30px">
                <label>服务器目录</label>
                <button id="uploadDevice" style="height: 20px;width: 120px;float: right;margin-right: 5px" class="btn themeBGColor layui-form-item">
                    <i class="glyphicon glyphicon-upload buttonTop">批量上传终端</i>
                </button>
                <form class="buttonCss" id="signupListImportFrom" enctype="multipart/form-data">
                    <%--多文件   multiple="multiple" --%>
                    <input type="file" name="excelFile" id="execlFile" style="display: none" onchange="fileUpload()">
                    <input class="btn-primary btn themeBGColor buttonCss" style="line-height: 1px" type="button" value="本地上传" onclick="selectFile()">
                </form>
            </div>
            <div style="overflow: auto;height: 96%">
                <table id="server" class="table">

                </table>
            </div>
        </div>
        <div class="node_name" style="height: 100%;width: 48%;float: right;margin-right: 1%;">
            <div class="f20" style="height: 30px">
                <label>终端目录</label>
                <button id="batchDownload" style="margin-right: 16px" class="btn themeBGColor layui-form-item buttonCss">
                    <i class="glyphicon glyphicon-download-alt buttonTop">批量下载</i>
                </button>
                <button id="ref" class="btn themeBGColor layui-form-item buttonCss">
                    <i class="glyphicon glyphicon-refresh buttonTop">刷新</i>
                </button>
                <button id="backUp" class="btn themeBGColor layui-form-item buttonCss">
                    <i class="glyphicon glyphicon-arrow-up buttonTop">返回上级</i>
                </button>
                <button id="backMain" class="btn themeBGColor layui-form-item buttonCss">
                    <i class="glyphicon glyphicon-home buttonTop">返回根路径</i>
                </button>
            </div>
            <div style="overflow: auto;height: 96%">
                <table id="device" class="table">

                </table>
            </div>
        </div>
    </div>
<input type="hidden" id="lineIndex" name="lineIndex">
<input type="hidden" id="devIndex" name="devIndex">
<%--当前会话的用户名--%>
<input type="hidden" id="username" value="${username}">
<input type="hidden" id="token" value="${token}">
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.form.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/json/json2.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.contextMenu.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.cleverTabs.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.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}/jspJS/utils/timeControl.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}/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/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/confirmIndentity.js"></script>
<script>
    var i,j;
    var height = document.body.clientHeight;
    let arr = [];
    $("#content").css("height",height-60);

    var lineIndex = parent.deIndex();
    var devPath = '';
    $(function () {
        getServerContent();
        refresh('/');
    });
    
    function refresh(devPath) {
        $.ajax({
            url: "/pqs9900/device/getFileContent",
            type: "post",
            dataType: "json",
            data : {
                lineIndex : lineIndex,
                path : devPath
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 200) {
                    arr = [];
                    initTable(data.body.list);
                    for (let i=0;i<data.body.list.length;i++){
                        if(data.body.list[i].fileName.indexOf(".") != -1){
                            arr.push(data.body.list[i].fileName.split('.')[0]);
                        }
                    }
                    let a = unique(arr)
                    $("#ip").html(data.body.ip);
                    $("#port").html(data.body.port);
                    $("#path").html(devPath);
                    $("#fileCounts").html(a.length);
                } else if(data.code === 404) {
                    $("#device").html("暂无内容");
                } else {
                    $("#device").html("")
                    var nowPath = $("#path").text();
                    if (nowPath != '/'){
                        var j = nowPath.lastIndexOf('/');
                        var interceptPath = nowPath.substr(0,j);
                        $("#path").html(interceptPath);
                    }
                }
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

    function unique(array){
        var r = [];
        for(var i = 0, l = array.length; i<l; i++){
            for(var j = i + 1; j < l; j++)
                if(array[i] == array[j]) j == ++i;
            r.push(array[i]);
        }
        return r;
    }

    function initTable(data) {
        function addFunctionAlty(value, row, index) {
            if (value.indexOf(".") != -1 ){
                document.getElementById('fileNumbers').style.display = 'block';
            } else {
                document.getElementById('fileNumbers').style.display = 'none';
            }
            if (value.indexOf(".") != -1 && row.size <= 6291456){
                return [
                    '<button onclick="downloadFile('+"'"+value+"'"+')" type="button" class="download btn btn-default" style="margin-right: 10px">下载</button>',
                    '<button onclick="verifyPasswordDelete('+"'"+value+"'"+')" type="button" class="download btn btn-default" style="margin-right: 10px">删除</button>'
                ].join('')
            } else {
                return '/'
            }
        }

        window.operateEvents = {
            'click #download': function (e, value, row, index) {
            }
        };

        $("#device").bootstrapTable('destroy').bootstrapTable({
            data: data,
            columns: [
                {   field : 'checked',
                    checkbox: true,
                    align: 'center',
                    valign: 'middle',
                    formatter:function(value,row,index){//设置满足条件的行可以使用复选框
                        if(row.type =='0'){
                            return {
                                disabled : true
                            }
                        }
                    }
                },
                {
                    field: 'fileName',
                    title: '名称',
                    align: 'left',
                    formatter:function (row) {
                        if(row.indexOf(".") != -1){
                            return '<span class="glyphicon glyphicon-file"><span style="margin-left: 5px">'+row+'</span></span>'
                        }else{
                            return '<span class="glyphicon glyphicon-folder-open"><span style="margin-left: 10px">'+row+'</span></span>'
                        }
                    },
                    sortable:true
                },
                {
                    field: 'type',
                    title: '类型',
                    formatter:function (row) {
                        if(row == 0){
                            return '<label style="color: orange">文件夹</label>'
                        }else{
                            return '文件'
                        }
                    }
                },
                {
                    field: 'size',
                    title: '大小',
                    formatter:function(value,row,index){//设置满足条件的行可以使用复选框
                        if(row.type =='0'){
                            return '/'
                        } else {
                            if (row.size > 0 && row.size <=102400){
                                return row.size + 'Bytes'
                            } else {
                                if (Math.round(row.size/1024) > 0 && Math.round(row.size/1024) <=1024){
                                    return Math.round(row.size/1024) + 'kB'
                                } else {
                                    return Math.round(Math.round(row.size/1024)/1024) + 'MB'
                                }
                            }
                        }
                    }
                },
                {
                    field: 'fileName',
                    title: '操作',
                    events: operateEvents,
                    formatter: addFunctionAlty
                }
            ]
        })
    }

    $('#device').on('dbl-click-row.bs.table', function (e, row, $element, field) {
        //判断是文件还是文件夹
        if (row.type === 1){
            //启用下载
            // $("<form method='post' action='/pqs9900/device/downloadFile?lineIndex="+lineIndex+"&path="+(devPath+'/'+row.fileName)+"'>"+
            //     "<input type='hidden'/>"+
            //     encodeURIComponent("excelname")+"'/></form>").appendTo('body').submit().remove();
        } else if(row.type === 0) {
            //进入文件夹
            devPath = devPath + '/' + row.fileName.replace('/','');
            $("#path").html(devPath);
            refresh(devPath);
        }
    })

    //下载
    let timeSet;
    let loading;
    function downloadFile(id) {
        loading = DOWNLOAD_SHOW_LOAD_LAYER();
        $("<form method='post' action='/pqs9900/device/downloadFile?lineIndex="+lineIndex+"&path="+(devPath+'/'+id)+"'>"+
            "<input type='hidden'/>"+encodeURIComponent("excelname")+"'/></form>").appendTo('body').submit().remove();
        timeSet=setInterval(function(){
            getSession();
        },1000);
    }


    function getSession() {
        $.ajax({
            url: "/pqs9900/device/getSession",
            async: false,
            type: "post",
            success: function (data) {
                if (data.body != null){
                    clearInterval(timeSet);
                    cleanSession();
                    DOWNLOAD_CLOSE_LOAD_LAYER(loading);
                }
            }
        })
    }


    function cleanSession() {
        $.ajax({
            url: "/pqs9900/device/deleteSession",
            async: false,
            type: "post",
            success: function (data) {

            }
        })
    }


    //刷新
    $("#ref").click(function(){
        var nowPath = $("#path").text();
        refresh(nowPath);
    });

    //返回上一层
    $("#backUp").click(function(){
        var nowPath = $("#path").text();
        if (nowPath != '/'){
            var i = nowPath.lastIndexOf('/');
            var interceptPath = nowPath.substr(0,i);
            // if (interceptPath === ''){
            //     interceptPath = '/'
            // }
            refresh(interceptPath);
            devPath = interceptPath;
        }
    });

    //返回根目录
    $("#backMain").click(function(){
        refresh('/');
        devPath = '';
    });

    //删除验证密码
    function verifyPasswordDelete(id) {
        //先进行密码确认
        var username = $("#username").val();
        confirmIndentity(username, function () {
            passwordIndentity(username, '系统', function () {
                alert("删除===:"+id)
            })
        })
    }

    //批量下载
    $("#batchDownload").click(function(){
        var arr = [];
        //获取勾选的
        var list = $('#device').bootstrapTable('getSelections');
        for (var i = 0; i < list.length; i++) {
            arr.push(list[i].fileName);
        }
        if (arr != null && arr !=""){
            downloadFile(arr.toString())
        } else {
            layer.msg("请选择文件",{icon:5,time:2000},function(){
                parent.layer.closeAll()});
        }
    });

    //批量上传
    $("#uploadDevice").click(function(){
        var arr = [];
        //获取勾选的
        var list = $('#server').bootstrapTable('getSelections');
        for (var i = 0; i < list.length; i++) {
            arr.push(list[i].fileName);
        }
        if (arr != null && arr !=""){
            layer.msg("功能开发中",{icon:5,time:2000},function(){
                parent.layer.closeAll()});
        } else {
            layer.msg("请选择文件",{icon:5,time:2000},function(){
                parent.layer.closeAll()});
        }
    });

    //上传文件到装置
    function uploadDevice() {
        layer.msg("功能开发中",{icon:5,time:2000},function(){
            parent.layer.closeAll()});
    }

    //服务器目录
    function getServerContent() {
        $.ajax({
            url: "/pqs9900/device/serverContent",
            type: "post",
            success: function (data) {
                if (data.code == 200){
                    initServerTable(data.body)
                }  else if(data.code === 404) {
                    $("#server").html("暂无内容");
                }
            }
        })
    }

    function initServerTable(data) {

        function upload(value, row, index) {
            if (value.indexOf(".") != -1){
                return [
                    '<button onclick="uploadDevice()" type="button" class="download btn btn-default" style="margin-right: 10px">上传</button>',
                    '<button onclick="verifyPasswordDelete('+"'"+value+"'"+')" type="button" class="download btn btn-default" style="margin-right: 10px">删除</button>'
                ].join('')
            } else {
                return '/'
            }
        }

        $("#server").bootstrapTable('destroy').bootstrapTable({
            data: data,
            columns: [
                {   field : 'checked',
                    checkbox: true,
                    align: 'center',
                    valign: 'middle',
                    formatter:function(value,row,index){//设置满足条件的行可以使用复选框
                        if(row.type =='0'){
                            return {
                                disabled : true
                            }
                        }
                    }
                },
                {
                    field: 'fileName',
                    title: '名称',
                    align: 'left',
                    formatter:function (row) {
                        if(row.indexOf(".") != -1){
                            return '<span class="glyphicon glyphicon-file"><span style="margin-left: 5px">'+row+'</span></span>'
                        }else{
                            return '<span class="glyphicon glyphicon-folder-open"><span style="margin-left: 10px">'+row+'</span></span>'
                        }
                    },
                    sortable:true
                },
                {
                    field: 'type',
                    title: '类型',
                    formatter:function (row) {
                        if(row == 0){
                            return '<label style="color: orange">文件夹</label>'
                        }else{
                            return '文件'
                        }
                    }
                },
                {
                    field: 'size',
                    title: '大小',
                    formatter:function(value,row,index){//设置满足条件的行可以使用复选框
                        if(row.type =='0'){
                            return '/'
                        } else {
                            if (row.size > 0 && row.size <=102400){
                                return row.size + 'Bytes'
                            } else {
                                if (Math.round(row.size/1024) > 0 && Math.round(row.size/1024) <=1024){
                                    return Math.round(row.size/1024) + 'kB'
                                } else {
                                    return Math.round(Math.round(row.size/1024)/1024) + 'MB'
                                }
                            }
                        }
                    }
                },
                {
                    field: 'fileName',
                    title: '操作',
                    formatter: upload
                }
            ]
        })
    }

    //打开文件选择框
    function selectFile() {
        $("#execlFile").trigger("click");
    }

    //文件上传
    function fileUpload() {
        var uploadFile = document.getElementById("execlFile").files;
        //判断文件大小
        var size = uploadFile[0].size;
        if (Math.floor(size/1024) > 3072){
            layer.msg("上传失败,文件过大",{icon:5,time:2000},function(){
                parent.layer.closeAll()});
            return false;
        }
        var option = {
            url: "/pqs9900/device/uploadFileToServer",
            type: "post",
            datatype: "json",
            clearForm: true,
            success: function (data) {
                if (data.code == 200){
                    layer.msg("上传成功",{icon:1,time:2000},function(){
                        parent.layer.closeAll()});
                    getServerContent();
                } else if (data.code == 400){
                    layer.msg("上传失败,文件过大",{icon:5,time:2000},function(){
                        parent.layer.closeAll()});
                }
            },
            error: function (data) {
                layer.msg("上传失败",{icon:5,time:2000},function(){
                    parent.layer.closeAll()});
            }
        }
        $("#signupListImportFrom").ajaxSubmit(option);
        return false;
    }





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