<%@ 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/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/js/plugin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/css/plugin/amazeui/amazeui.css" media="all">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        #fileDiv{
            overflow-y: auto;
        }
        body{
            overflow-y: hidden;
        }
        #fileTable{
            margin: 0 !important;
        }
        .layui-table td, .layui-table th{
            position: relative;
            padding: 8px;
            line-height: 1.4;
            font-size: 12px;
        }
    </style>
</head>
<body >
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-12 mt5">
            <button type="button" class="btn btn-primary" id="chooseFile"><i class="fa fa-files-o"></i>选择多文件</button>
            <button type="button" class="btn btn-primary" id="clear"><i class="fa fa-remove"></i>清除所有</button>
            <div class="layui-upload-list" id="fileDiv">
                <table class="layui-table" id="fileTable">
                    <thead>
                    <tr>
                        <th class="text-center">文件名</th>
                        <th class="text-center">大小</th>
                        <th class="text-center">状态</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody id="fileList"></tbody>
                </table>
            </div>
            <div class="text-center mt15">
                <button type="button" class="btn btn-primary " id="judgeFiles" ><i class="fa fa-question-circle-o"></i>检测文件</button>
                <button type="button" class="btn btn-primary displayNone" id="fileListUpload" ><i class="fa fa-area-chart"></i>查看波形</button>
                <button type="button" class="btn btn-primary displayNone" id="viewWave" ><i class="fa fa-area-chart"></i>查看波形</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="deviceIndex">
<input type="hidden" id="lineIndex">
</body>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/jquery.contextMenu.js"></script>
<script src="${ctx}/js/plugin/jquery.cleverTabs.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugin/layui/layui.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    var fileMaps=new Map(),itemNames=[],fileNames=[],files;

    //文档流完毕后，给固定高度
    $(document).ready(function(){
        //文档流加载完成后，给设备树一个高度，同时给个border边框
        var height=$(window).height()-25;
        $("#fileDiv").css("height",height-60);
    });

    //使用layui的上传
    layui.use('upload', function(){
        var uploadIndex;
        var upload = layui.upload;
        var fileListView = $('#fileList')
            ,uploadListIns = upload.render({
            elem: '#chooseFile'
            ,url: '/pqs9900/offdata/viewWave'
            ,accept: 'file'
            ,multiple: true
            ,auto: false
            ,exts: 'CFG|DAT|HDR|DEV'
            ,method: 'POST'
            ,bindAction: '#fileListUpload'
            ,choose: function(obj){
                files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var fileName=file.name.toUpperCase();
                    var itemName=fileName.substring(0,fileName.length-4);
                    //文件名不重复
                    if(fileNames.indexOf(fileName)===-1){
                        //波形名不重复
                        if(itemNames.length>0){
                            if(itemNames.indexOf(itemName)===-1){
                                //排除不同波形文件上传
                                layer.msg("只能查看一个波形",{icon:2,time:2000});
                                delete files[index];
                            }else{
                                //将当前文件加入的队列、表格中
                                addFile(fileName,itemName,file,fileListView,index,uploadListIns,obj,files);
                            }
                        }else {
                            //将当前文件加入的队列、表格中
                            addFile(fileName,itemName,file,fileListView,index,uploadListIns,obj,files);

                        }
                    }else{
                        layer.msg("请勿上传重复文件",{icon:2,time:2000});
                        delete files[index];
                    }
                });
            }
            ,before:function (object) {
                if(files==={}){
                    //如果是空对象，说明之前的文件全部上传成功，需要将之前的一些集合清空，同时隐藏上传按钮，显示文件校验按钮，如果需要的话，也可以把表格清空
                    fileMaps=new Map();
                    itemNames=[];
                    fileNames=[];

                }
                //开启loading
                uploadIndex=UPLOAD_SHOW_LOAD_LAYER();
            }
            ,done: function(res, index, upload){
                if(res.code !== 500){
                    var tr = fileListView.find('tr#upload-'+ index),tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }else{
                    var tr = fileListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.file-reload').removeClass('layui-hide'); //显示重传
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = fileListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.file-reload').removeClass('layui-hide'); //显示重传
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                saveWaveDetail(uploadIndex);
            }
        });
    });

    /**
     * 隐藏上传按钮，显示检测文件按钮
     * */
    function hideUploadButton() {
        $("#judgeFiles").removeClass("displayNone")
        $("#fileListUpload").addClass("displayNone")
        $("#viewWave").addClass("displayNone")
    }

    /**
     * 隐藏检测按钮、上传按钮，显示查看波形按钮
     * */
     function hideUploadbutton() {
        $("#judgeFiles").addClass("displayNone")
        $("#fileListUpload").addClass("displayNone")
        $("#viewWave").removeClass("displayNone")
    }

    /**
     * 隐藏检测文件按钮，显示上传按钮
     * */
    function hideDetectionButton() {
        $("#judgeFiles").addClass("displayNone")
        $("#fileListUpload").removeClass("displayNone")
        $("#viewWave").addClass("displayNone")
    }

    /**
     * 删除标识文件名之前，需要判断是否存在该标识的其他后缀的文件
     * */
    function judgeFileExist(itemName){
        var itemFlag=false;
        //一共有4种后缀
        if(fileNames.indexOf(itemName+".CFG")>-1){
            itemFlag=true;
        }else if(fileNames.indexOf(itemName+".DAT")>-1){
            itemFlag=true;
        }else if(fileNames.indexOf(itemName+".HDR")>-1){
            itemFlag=true;
        }else if(fileNames.indexOf(itemName+".dev")>-1){
            itemFlag=true;
        }
        return itemFlag;
    }

    /**
     *  上传之前的校验
     *  因为只能查看一个波形的图，所以需要校
     *  1：dat.cfg是否都有
     *  2：文件名只能有一个
     */
    $("#judgeFiles").on("click",function () {
        var flag=0;
        //根据fileNames判断,清洗CFG/DAT文件不全的
        if(itemNames.length>0){
            for(var i=0;i<itemNames.length;i++){
                var cfg=itemNames[i]+".CFG";
                var dat=itemNames[i]+".DAT";
                var itemFlag=0;
                if(fileNames.indexOf(cfg)>=0){
                    if(fileNames.indexOf(dat)===-1){
                        //说明有CFG文件，没有DAT文件，需要将CFG文件删除
                        flag=1;
                        itemFlag=1;
                        //同时将该单元格红色标记出来
                        $("td:contains('"+itemNames[i]+"')").css("color","red");
                    }
                }
                if(fileNames.indexOf(dat)>=0){
                    if(fileNames.indexOf(cfg)===-1){
                        //说明有DAT文件，没有CFG文件，需要将DAT文件删除
                        flag=1;
                        itemFlag=1;
                        //同时将该单元格红色标记出来
                        $("td:contains('"+itemNames[i]+"')").css("color","red");
                    }
                }
                if(fileNames.indexOf(dat)===-1&fileNames.indexOf(cfg)===-1){
                    flag=1;
                }
                //DAT和CFG文件都存在,单元格字体恢复
                if(itemFlag===0){
                    $("td:contains('"+itemNames[i]+"')").css("color","black");
                }
            }
        }else{
            //没有文件数据
            flag=-1;
        }
        if(flag===0){
            layer.msg("波形文件无异常",{icon:1,time:2000});
            hideDetectionButton();
        }else if(flag===-1){
            layer.msg("请选择要查看的文件",{icon:2,time:2000});
        }else{
            layer.msg("存在波形文件缺失",{icon:2,time:2000});
        }
    })

    /**
     * 文件全部拷贝完成后，跳转查看波形
     */
    function  saveWaveDetail(uploadIndex) {
        hideUploadbutton();
        UPLOAD_CLOSE_LOAD_LAYER(uploadIndex);
        fileMaps=new Map();
        itemNames=[];
        fileNames=[];
        layer.open({
            type: 2,
            title: '波形查看',
            maxmin : false,
            shadeClose: true, //点击遮罩关闭层
            area : ['100%' , '100%'],
            content : 'viewWaveData',
            scrollbar : false

        });
    }

    /**
     * 点击波形查看
     * */
    $("#viewWave").on("click",function () {
        layer.open({
            type: 2,
            title: '波形查看',
            maxmin : false,
            shadeClose: true, //点击遮罩关闭层
            area : ['100%' , '100%'],
            content : 'viewWaveData',
            scrollbar : false

        });
    })

    /**
     *  添加文件进队列和表格
     */
    function addFile(fileName,itemName,file,fileListView,index,uploadListIns,obj,files){
        itemNames.push(itemName.toUpperCase());
        //作为新文件加入进来
        var tr = $(['<tr id="upload-'+ index +'">'
            ,'<td>'+fileName+'</td>'
            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
            ,'<td>等待上传</td>'
            ,'<td>'
            ,'<button class="btn  btn-primary  file-reload layui-hide"><i class="fa fa-refresh"></i>重传</button>'
            ,'<button type="button" class="btn  btn-danger file-delete ml10" ><i class="fa fa-trash"></i>删除</button>'
            ,'</td>'
            ,'</tr>'].join(''));
        //个性化处理部分**start**
        fileMaps.set(fileName.toUpperCase(),index);
        fileNames.push(fileName.toUpperCase());
        //个性化处理部分**end**
        //隐藏上传按钮，显示检测文件按钮
        hideUploadButton();
        //单个重传
        tr.find('.file-reload').on('click', function(){
            obj.upload(index, file);
        });
        //删除
        tr.find('.file-delete').on('click', function(){
            delete files[index]; //删除对应的文件
            tr.remove();
            fileMaps.delete(fileName);
            fileNames.splice(fileNames.indexOf(fileName),1);
            //标识文件名删除前，需要判断还有没有其他后缀文件存在
            var itemFlag=judgeFileExist(itemName);
            if(!itemFlag){
                itemNames.splice(itemNames.indexOf(itemName),1);
            }
            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
            //隐藏上传按钮，显示检测文件按钮
            hideUploadButton();

        });
        fileListView.append(tr);
    }

    /**
     *  清除所有文件，包括表格数据，上传前的清理是要将所有集合置为空，且删除所有队列文件；上传后的清理，只要将所有集合置为空便可
     */
    $("#clear").on("click",function () {
        $("td").remove();
        if(fileMaps.size>0){
            fileMaps.forEach(function(value, key){
                delete files[value];
            });
        }
        fileMaps=new Map();
        itemNames=[];
        fileNames=[];
        hideUploadButton();
    })
</script>
</html>
