<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/webpage/include/taglib.jsp"%>
<link rel="stylesheet" href="${ctxStatic}/plugin/layui/dist/css/layui.css">
<script src="${pageContext.request.contextPath}/act/rest/js/common/jquery-1.8.3.js"></script>
<script src="${ctxStatic}/plugin/layui/dist/layui.js"></script>
<script src="${ctxStatic}/common/js/jeeplus.js"></script>

<html>
<head>
    <title>添加</title>
    <meta http-equiv=Content-Type content=“text/html;charset=utf-8″>
    <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
    <meta name="renderer" content="webkit">
    <style>
        .layui-input{ height: 28px;margin-top: 6px;line-height: 28px}
        .layui-table-view .layui-table {width:100%}
        .myselect{border: none;padding: 5px 7px;min-height: 20px;color: #666666;line-height: 20px}
        .mydiv{padding: 5px 7px;min-height: 20px;border: whitesmoke;line-height: 20px}
        .mydiv:empty:before{content: attr(placeholder);color:#999999;}
        .mydiv:focus:before{content:none}
        .layui-table-tips-main{display:none}
        .layui-table-tips-c{display:none}
    </style>
</head>
<body style="height: 100%;line-height: 100%">
<div style="padding: 10px;">
    <div class="layui-main-bgc">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                        <div class="layui-card-body" style="margin-top: 2px;">
                            <form class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">*项目批次</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="myinput" autocomplete="off" placeholder=""  class="layui-input">
                                    </div>
                                </div>
                            </div>
                            </form>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="add_List">添加文件</button>
                                <div class="layui-upload-list">
                                        <table class="layui-table" id="mytable">
                                        <thead>
                                        <tr>
                                            <th width="45%">*文件名称</th>
                                            <th width="22%" style="text-align: center">操作</th>
                                        </tr></thead>
                                        <tbody id="tbody_List">

                                        </tbody>
                                    </table>
                                </div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    /*//定义存放文件数组*/
    var arrayFile=[];
    /*加载layui文件上传*/
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
        //多文件列表示例
        var tbodyListView = $('#tbody_List')
            ,uploadListIns = upload.render({
            elem: '#add_List'
            ,accept: 'file'
            ,exts:'xls|xlsx'
            ,multiple: true
            ,auto: false
            ,choose: function(obj){
                // var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    //添加 id 到数组
                    arrayFile.push(index);
                    //添加文件到数组
                    arrayFile.push(file);
                    //拼接生成表格
                    var tr = $(['<tr id='+index+'>'
                        ,'<td hidden><div class="td_id">'+index+'</div></td>'
                        ,'<td><div contenteditable="true" readonly="true" class="mydiv1 mydiv" placeholder="请输入项目名称">'+file.name.split(".")[0]+'</div></td>'
                        // ,'<td>'
                        // ,' <select name="type" class="myselect"><option value="">请选择项目类型</option><option value="1">架空线路工程</option><option value="2">电缆工程</option><option value="3">变电站工程</option></select>'
                        // ,'<td><div contenteditable="true" class="mydiv2 mydiv" placeholder="请输入项目编号"></div></td>'
                        // ,'<td><div contenteditable="true" class="mydiv3 mydiv" placeholder="请输入供应商"></div></td>'
                        ,'<td style="text-align: center">'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));
                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        // delete files[index]; //删除对应的文件
                        tr.remove();//删除tr
                        //清空input file当中已经存在文件
                        uploadListIns.config.elem.next()[0].value = '';
                    });

                    tbodyListView.append(tr);
                    //清空input file当中已经存在文件
                    uploadListIns.config.elem.next()[0].value = '';
                });
            }
        });
    });

    function importExcel(url, fn) {
        var formdata = new FormData();

        // 获取表格id的值
        var itemBatch = $("#myinput").val();
        var suppliesBatch = $("#suppliesBatch").val();
        var file = $(":file").val;


        //获取输入的项目名称
        var div1 =  $(".mydiv1");

        //判断列表中项目名称是否为空
        if (div1.length<=0){
            layer.msg("请选择文件",{icon: 3,offset:['40%','40%']});
            return false;
        }
        //存储列表中 输入项目名称的值
        var divvalue=[];
        //存储列表中 输入项目名称的值
        var div_val=[];
        //循环获取当前项目列表的项目名称

        for (var i = 0; i < div1.length; i++) {
            //存放到集合当中
            divvalue[i]=div1[i].innerHTML;
            div_val[i]=div1[i].innerHTML;
        }
        //判断项目名称是否重复
        for (var i = 0; i < divvalue.length; i++) {
            if (divvalue[i] === ""||divvalue[i]==null){
                layer.msg("请选择文件",{icon: 3,offset:['40%','40%']});
                throw SyntaxError;
            }
            if(div_val[i] === divvalue[i+1]){
                layer.msg("选择文件重复",{icon: 5,offset:['40%','40%']});
                throw SyntaxError;
            }
        }
        // if(file.length === 0){
        //     layer.msg("请选择文件",{icon: 3,offset:['40%','40%']});
        //     return false;
        // }
        if(itemBatch == null || itemBatch === ''){
            layer.msg("请输入项目批次",{icon: 3,offset:['40%','40%']});
            return false;
        }
        // if(suppliesBatch == null || suppliesBatch === ''){
        //     layer.msg("请选择物料批次",{icon: 3,offset:['40%','40%']});
        //     return false;
        // }
        var td_id=document.getElementsByClassName("td_id");
        //存放id的数组
        var array_id = [];
        //循环遍历id
        for (var i = 0; i < td_id.length; i++) {
            array_id[i]=td_id[i].innerHTML;
        }
        //根据id获取对象文件传入后台
        for (var i = 0; i < array_id.length; i++) {
            for (var j = 0; j < arrayFile.length; j++) {
                if (array_id[i]==arrayFile[j]){
                    //追加文件到表单当中
                    formdata.append("file",arrayFile[j+1]);
                }
            }
        }
        formdata.append("itemBatch",itemBatch);
        formdata.append("batch",suppliesBatch);

        jp.loading('  正在导入，请稍等...');
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: url,
            data: formdata,
            processData: false, //prevent jQuery from automatically transforming the data into a query string
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (result) {
                if(result.success && result.errorCode === '-1'){
                    jp.confirm('项目'+result.msg+'已存在，确定覆盖嘛？', function(){
                        jp.loading('  正在导入，请稍等...');
                        $.ajax({
                            type: "POST",
                            enctype: 'multipart/form-data',
                            url: '${ctx}/managementcenter/materialinfo/imports',
                            data: formdata,
                            processData: false, //prevent jQuery from automatically transforming the data into a query string
                            contentType: false,
                            cache: false,
                            timeout: 600000,
                            success: function (result) {
                                fn(result);
                            }
                        })
                    });
                }else if((result.success && result.errorCode === '0')){
                    fn(result)
                }
                // fn(result);
            },
            error:function(xhr, textStatus){
                if(xhr.status == 0){
                    jp.info("连接失败，请检查网络!")
                }else if(xhr.status == 404){
                    var errDetail ="<font color='red'>404,请求地址不存在！</font>";
                    top.layer.alert(errDetail , {
                        icon: 2,
                        area:['auto','auto'],
                        title:"请求出错"
                    })
                }else if(xhr.status && xhr.responseText){
                    var errDetail ="<font color='red'>"+ xhr.responseText.replace(/[\r\n]/g,"<br>").replace(/[\r]/g,"<br>").replace(/[\n]/g,"<br>")+"</font>";
                    top.layer.alert(errDetail , {
                        icon: 2,
                        area:['80%','70%'],
                        title:xhr.status+"错误"
                    })
                }else{
                    var errDetail =xhr.responseText=="<font color='red'>未知错误!</font>";
                    top.layer.alert(errDetail , {
                        icon: 2,
                        area:['auto','auto'],
                        title:"真悲剧，后台抛出异常了"
                    })
                }

            }
        })

    }

</script>
<script>
    layui.use('form',function () {
        var  form = layui.form;
        form.render();
    })
</script>
</html>
