<%@ 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>
    <title>用采数据列表</title>
    <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"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.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/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .tr {
            text-align: center;
        }
        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }
        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        body {
            overflow: hidden;
        }
        .pagination > li > a, .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            text-decoration: none;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="form-inline header mt10">
        <div class="form-group fr mr10" id="fliteData">
            <label>筛选数据：</label>
            <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
        </div>
    </div>
    <div class="row">
        <%--用采数据列表--%>
        <div class="col-sm-12">
            <table id="userList" class="table table-striped table-bordered dataTable no-footer">
                <thead>
                <tr>
                    <th>用采表名</th>
                    <th>起始时间</th>
                    <th>截止时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

</div>
</body>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.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.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}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    var dataTable=null;
    var resultData=null;
    var $userList=$("#userList").eq(0);
    $(function () {
        refresh();
    })

    //点击确定，去后台请求参数
    $("#query").click(function() {
        refresh();
    });
    //获取表格数据
    function refresh(){
        var i ;
        $.ajax({
            type : "POST",
            url : "/pqs9000/responsibility/getUserDataList",
            dataType : "json",
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success : function(data) {
                if (data.code === 500) {
                    resultData=null;
                } else {
                    resultData=data.body;
                }
                startQuery();
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

    //实例化表格
    function initTable(data){
        var height=$(window).height()-140;
        dataTable=$userList.DataTable();
        dataTable.clear().draw();
        dataTable=$userList.DataTable({
            order:[3,'desc'],
            columnDefs : [
                {
                    orderable : false,
                    targets : [4]
                }
            ],
            columns: [
                {data:"excelName"},
                {data:"sTime"},
                {data:"eTime"},
                {data:"uTime"},
                {data:"lackIntegrity", render:function (data, type, full, meta) {
                        var detailButton="",deleteButton="";
                        var index=full.excelIndex;
                        if(data!==0){
                            //存在完整性缺失，除了删除按钮，还需要给详情按钮
                            detailButton="<button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='viewDetail(\"" + index + "\")' >完整性详情</button>";
                        }
                        deleteButton="<button type='button' class='btn themeBGColor mr10'   href='javascript:void(0);' onclick='deleteUserData(\"" + index + "\")'>删除</button>";
                        return detailButton+deleteButton;
                    }}
            ],
            autoWidth:false,
            serverSide : false,
            destroy : true,
            data : data,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            scrollX: true,
            lengthMenu : [ 20 ],
            language : {
                url:'/pqs9000/json/chine.json'
            },
            fnDrawCallback: function(oTable) {
                $("#userList_info").addClass("fl");
                $("#userList_paginate").addClass("fr");
                $("#userList_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 = $userList.dataTable();
                $('#dataTable-btn').click(function(e) {
                    if($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
        new $.fn.dataTable.Buttons( dataTable, {
            buttons: [
                {
                    extend: 'csv',
                    exportOptions:{
                        columns :[1,2,3,4],
                        format:{
                            body:function(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().find("a").css("display","none");
        dataTable.buttons().container().find("a").before("<button id='add' type='button' class='btn btn-primary mr10' > <i class='fa fa-plus-square'></i>新增</button>");
        dataTable.buttons().container().find("a").before(" <button id='query' type='button' class='btn btn-primary'><i class='glyphicon glyphicon-search'></i></button>");
        dataTable.buttons().container().appendTo('.header');
        dataTable.buttons().container().after($("#fliteData")[0]);
    }


    //重新查询用采数据列表
    $("body").on("click","#query",function(){
        refresh();
    });

    //新增用采数据
    $("body").on("click","#add",function(){
            //上传的是配置文件
            var UPLOAD_USER_DATA_INDEX;
            layer.open({
                type: '1',
                title: "上传用采数据",
                shadeClose: true,
                resize: false,
                scrollbar: false,
                closeBtn: 0,
                content: "<form class='ml5 mt15' enctype='multipart/form-data' id='uploadForm'> <div class='form-group'> <input type='file' name='file' id='userDataFile'> </div></form>",
                btn: ['确定', '取消'],
                yes: function (indexp, layero) {
                    var $userDataFile=$("#userDataFile").eq(0);
                    var uploadEventFile = $userDataFile.val();

                    /**
                     * xuyang
                     * 前端对所选文件的大小做个简单判断
                     */
                    var uploadFile = document.getElementById("userDataFile").files;
                    //文件大小
                    var size = uploadFile[0].size;
                    //判断文件大小
                    if (Math.floor(size/1024) <= 3072){
                        if (uploadEventFile === '') {
                            layer.msg("请选择Excel文件，再上传！", {icon: 2, time: 2000}, function () {
                                layer.close(index);
                            });
                        } else if (uploadEventFile.lastIndexOf(".xls") < 0) {
                            layer.msg("只能上传Excel文件", {icon: 2, time: 2000}, function () {
                                layer.close(index);
                            });
                        } else {
                            layer.confirm('确定导入？', function (index) {
                                var formData = new FormData($('#uploadForm')[0]);
                                $.ajax({
                                    method: "post",
                                    url: "/pqs9000/responsibility/uploadExcelData",
                                    data: formData,
                                    beforeSend: function () {
                                        UPLOAD_USER_DATA_INDEX = ityzl_SHOW_LOAD_LAYER();
                                    },
                                    dataType: "json",
                                    success: function (data) {
                                        ityzl_CLOSE_LOAD_LAYER(UPLOAD_USER_DATA_INDEX);
                                        if (data.code === 200) {
                                            layer.msg(data.message, {icon: 1, time: 2000}, function () {
                                                layer.close(indexp);
                                            });
                                        } else {
                                            layer.msg(data.message, {icon: 2, time: 2000}, function () {
                                                layer.close(indexp);
                                            });
                                        }
                                    },
                                    cache: false,
                                    contentType: false,
                                    processData: false
                                });
                            })
                        }
                    } else {
                        layer.msg("上传失败,文件大小超过3M!",{icon:5,time:2000},function(){
                            layer.closeAll()});
                    }
                }, btn2: function (index, layero) {
                    layer.close(index);
                },
                end:function () {
                    refresh()
                }
            })
    });

    //查看某次用采数据的完整性不足的详情
    function viewDetail(index) {
        parent.layer.open({
            type: 2,
            title: '完整性不足详情',
            maxmin : false,
            area : ['100%' , '100%'],
            content: '/pqs9000/responsibility/noIntergrity?excelIndex='+index,
            scrollbar: false
        });
    }

    //根据用采数据索引删除用采数据以及其下面所有的完整性不足的记录
    function deleteUserData(index) {
        var i ;
        $.ajax({
            type : "POST",
            url : "/pqs9000/responsibility/deleteUserData",
            dataType : "json",
            data : {
                userDataIndex : index,
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success : function(data) {
                if (data.code === 500) {
                    layer.msg(data.message,{icon:2,time:2000})
                } else {
                    layer.msg(data.message,{icon:6,time:2000})
                }
                refresh();
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

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

    //特殊处理，表头紧缩问题--start
    var it=null;
    function startQuery() {
        //实时刷新时间单位为毫秒
        it= setInterval('refreshQuery()',100);

    }
    /* 刷新查询 */
    function refreshQuery(){
        var width=$("#userList").width();
        if(width>100){
            initTable(resultData);
            window.clearInterval(it)
        }
    }
    //特殊处理，表头紧缩问题--end

</script>
</html>
