<%@ 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>PQS9300技术监督管理系统</title>
    <link rel="shortcut icon" href="/pqs9900/images/favicon.ico" type="image/x-icon"/>
    <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}/js/plugin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .form-control{
            height: 22px;
            padding: 1px 5px;
        }

        #transactionList {
            min-width: 100%;
        }
        .tr {
            text-align: center;
        }

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

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

        .layui-table>thead>tr>th{text-align: center;font-size: 12px;font-weight:700}

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

        .layui-table th{line-height: 10px}

        <%-- 滚动条的设置 --%>
        ::-webkit-scrollbar-track {
            width: 6px;
            background-color:#FFFFFF;
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius:2em;
        }

        ::-webkit-scrollbar {
            width:10px;
            height:10px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #0d6868;
            background-clip:padding-box;
            min-height:25px;
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius:2em;
        }

        <%-- 滚动条移上去的背景 --%>
        ::-webkit-scrollbar-thumb:hover {
            background-color:darkseagreen;
        }

    </style>
</head>
<body class="container-fluid" style="overflow:hidden">
<div class="layui-upload">
    <div>
        <button id="testList" type="button" class="btn themeBGColor" href="javascript:void(0)" style="margin-top: 10px">选择文件</button>
        <button type="button" class="btn themeBGColor" id="testListAction" style="margin-top: 10px;margin-left: 10px">开始上传</button>
        <button type="button" class="btn themeBGColor" onclick="clearFiles()" style="margin-top: 10px;margin-left: 10px">清空</button>
        <div style="float: right;margin-top: 15px;margin-right: 10px;font-size: 12px" id="desc"></div>
    </div>
    <div class="tableData" style="overflow-y:auto;margin-top: 0">
        <div id="tableData" class="layui-upload-list">
            <table class="layui-table" id="filesTable">
                <thead>
                <tr>
                    <th width="40%">文件名</th>
                    <th width="10%">大小</th>
                    <th width="40%">状态</th>
                    <th width="10%">操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>

</div>
<input type="hidden" value="${supIndex}" id="supIndex">
<input type="hidden" value="${stepCount}" id="stepCount">
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/layui/layui.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/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/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script>
    $(".tableData").css("width",$(".container-fluid").width());
    $(".tableData").css("height",$(".container-fluid").height()*0.9);
    $(".layui-upload-list").css("width",$(".container-fluid").width()-10);

    var supIndex=$("#supIndex").val();
    var stepCount=$("#stepCount").val();
    var arr = [];
    //多文件列表示例
    layui.use('upload', function() {
        var $ = layui.jquery, upload = layui.upload;
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,data: {supIndex:supIndex,stepCount:stepCount}
            ,url: '/pqs9300/uploadFile/uploadMoreFile'
            ,accept: 'file'
            ,acceptMime: 'image/*,.pdf,.doc,.docx'
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //获取上传文件的个数
                var len = getFilesLength(files);
                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                $("#desc").html("");
                //读取本地文件
                obj.preview(function(index, file, result){
                    arr.push(index);
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td style="font-size: 12px">'+ file.name +'</td>'
                        ,'<td style="font-size: 12px">'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td style="font-size: 12px">等待上传</td>'
                        ,'<td>'
                        ,'<button style="font-size: 12px" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<img title="删除" class="demo-delete" src="/pqs9300/images/dele.png" style="cursor: pointer" alt="删除">'
                        ,'</td>'
                        ,'</tr>'].join(''));
                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });
                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        arr.remove(index);
                        $("#desc").html("");
                        if (arr.length === 0){
                            $("#desc").html("");
                        }else {
                            $("#desc").append("<span style='font-size: 12px'>当前已选择"+arr.length+"份文件</span>")
                        }
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    demoListView.append(tr);
                });
                //延迟获取数组长度
                setTimeout(function () {
                    if (arr.length > 0){
                        $("#desc").append("<span style='font-size: 12px'>当前已选择"+arr.length+"份文件</span>")
                    }
                },50)
            }
            ,done: function(res, index, upload){
                if(res.code === 0){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;font-size: 12px">上传成功！</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index,res, upload);
            }
            ,error: function(index,res, upload){
                if(res.code === -1){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;font-size: 12px">上传失败，上传文件名与规定文件名称不一致！</span>');
                } else if (res.code === -2){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;font-size: 12px">上传失败，文件类型错误！(请上传图片、pdf、word类型的文件)</span>');
                } else if (res.code === -3){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;font-size: 12px">上传失败！</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }  else if (res.code === -4){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;font-size: 12px">上传失败，事务报告已全部上传完或暂无报告需要上传！</span>');
                }  else if (res.code === -5){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;font-size: 12px">上传失败，文件过大！(文件大小不超过3M)</span>');
                }
            }
        });
    })

    //清空table数据
    function clearFiles() {
        $("#filesTable  tr:not(:first)").html("");
        $("#total").empty();
        $("#desc").html("");
        arr = new Array();
    }

    //删除数组数据
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };

    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };


    //获取文件上传的数量
    function getFilesLength(jsonData){
        var jsonLength = 0;
        for(var item in jsonData){
            jsonLength++;
        }
        return jsonLength;
    }

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