<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导入物料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="${ctxPlugin}/lib/ueditor/1.4.3/third-party/webuploader/webuploader.css" />
    <style>
        /*导入弹窗css*/
        .shuoiner {display: flex;width: 500px;margin-top: 10px;justify-content: center;margin-left: auto;margin-right: auto;}
        .choseBtn {border: none;background: transparent;cursor: pointer;margin-left: 10px;height: 30px;}
        .execlword {display: block;margin-left: 10px;margin-top: 5px;color: #ff3333;}
        .chosewrap {display: flex;justify-content: center;width: 500px;}
        .addskin .layui-layer-title, .addskin2 .layui-layer-title {height: 50px;line-height: 50px;position: relative;}
        .addskin .layui-layer-content, .addskin2 .layui-layer-content {padding-top: 68px;padding-bottom: 80px;}
        .redcolor {color: #ff3333;}
        .addskin, .addskin2 {width: 592px !important;background: #f0f2f6 !important;}
        .stari {color: #ff3333;font-size: 14px;margin-right: 5px;}
        .tcInput {width: 280px;height: 30px;background: #fff;border: 1px solid #ddd;padding-left: 10px; box-sizing: border-box; margin-left: 10px;}
        .webuploader-pick{padding: 0 10px;background-color: #D9B589;}
        /*导入弹窗css*/
    </style>
</head>
<body>
<div id="importCustomer">
    <form class="layui-form layui-form-pane" action="">
        <div class="chosewrap tcMargin" style="margin-left: 30px; margin-top: 20px">
            <div><i class="stari">*</i><span>导入文件：</span></div>
            <div>
                <div style="position: relative">
                    <input type="text" class="tcInput" id="filename" name="filename" >
                    <span class="choseBtn" id="filePicker" style="position: absolute; top: 6px; right: 6px ">选择</span>
                </div>
                <span class="execlword">选择要导入的excel</span>
            </div>
            <a href="${ctxPlugin}/template/importXMZF.xlsx" style="line-height: 28px; font-size: 12px; margin-left: 10px; color: #D9B589">下载导入模板</a>
        </div>
        <div class="redcolor shuoiner">
            <span class="shuoinerleft">&nbsp;&nbsp;&nbsp;&nbsp;提示：</span>
            <div>
                <p>1、单次最多导入5000条数据；</p>
               <%-- <p>2、物料代码具体唯一性，不可重复，否则将导入失败；</p>--%>
                <p>2、导入前请先“校验”表格数据是否存在重复；</p>
            </div>
        </div>
        <div class="layui-col-xs12 mb-20 pr-30" style="margin-top: 50px;">
            <div class="layui-form-item text-c" >
                <button type="button" class="layui-btn" id="checkExcelBtn" onclick="checkExcel();" >校验</button>
                <button type="button" class="layui-btn  layui-btn-disabled" onclick="importExcel();" disabled="true" id="importExcelBtn">导入</button>
                <button type="button" onclick="closeSelf()" class="layui-btn layui-btn-primary ">取消</button>
            </div>
        </div>
    </form>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPlugin}/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${ctxPlugin}/lib/ueditor/1.4.3/third-party/webuploader/webuploader.min.js"></script>
<script>
    var categorySelect;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'tableExt', 'jquery', 'layer','laypage','laydate','form'], function(){
        $ = layui.$;
        tableExt = layui.tableExt;
        layer = layui.layer;
        laypage = layui.laypage;
        laydate = layui.laydate;
        form = layui.form;
        table = tableExt.getLayTable();

        /*---------------------------导入--------------------------*/
        window.importGoods = function() {
            $("#filename").val("");
            $("#importExcelBtn").attr("disabled", true);
            $("#importExcelBtn").addClass("layui-btn-disabled");
            $("#checkExcelBtn").attr("disabled", false);
            $("#checkExcelBtn").removeClass("layui-btn-disabled");
            var index=layer.open({
                type: 1
                ,title:'导入物料<i class="lineblue2"></i>'
                ,shadeClose: true
                ,skin: 'addskin2'
                ,content:$("#importCustomer")
            });
        }

        $(function () {
            uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: false,
                swf: '${ctxPlugin}/lib/webuploader/0.1.5/Uploader.swf',
                server: '${ctx}/customerEntry/checkImportMaterial' ,
                pick: '#filePicker',
                accept: {
                    title: 'XLSX',
                    extensions: 'xlsx,xls',
                    mimeTypes: 'xlsx/*'
                },
                method: 'POST',
            });

            uploader.on('beforeFileQueued', function (file) {
                uploader.reset();
                $("#importExcelBtn").attr("disabled", true);
                $("#importExcelBtn").addClass("layui-btn-disabled");
                $("#checkExcelBtn").attr("disabled", false);
                $("#checkExcelBtn").removeClass("layui-btn-disabled");
                uploader.option('server', '${ctx}/customerEntry/checkImportPowerStationCode');
            });
            uploader.on('uploadSuccess', function (file, response) {
                console.log(response)
                if (response.operType == "check") {
                    uploader.stop();
                    file.setStatus('queued');
                    if (response.templateError == "y") {
                        $("#filename").val('');
                        layer.msg("校验失败，模板不匹配!");
                    } else if (response.overLimit == "y") {
                        $("#filename").val('');
                        layer.msg("校验失败，Excel文件记录超过5000条限制!");
                    } else if (response.errorMessage == "y") {
                        $("#filename").val('');
                        parent.layer.confirm(response.errorDetail, {title: '提示', btn: ['关闭']});
                    } else if (response.pass == "y") {
                        $("#importExcelBtn").attr("disabled", false);
                        $("#importExcelBtn").removeClass("layui-btn-disabled");
                        $("#checkExcelBtn").attr("disabled", true);
                        $("#checkExcelBtn").addClass("layui-btn-disabled");
                        uploader.stop();
                        file.setStatus('queued');
                        uploader.option('server', '${ctx}/customerEntry/importPowerStationCode');
                        layer.msg("校验成功，可以导入!");
                    } else {
                        $("#filename").val('');
                        layer.msg("解析Excel错误!");
                        layer.closeAll();
                    }
                } else if (response.operType == "import") {
                    if (response.pass == "y") {
                        layer.msg("导入成功"+response.successCount+"条数据",{icon:1,time:2000},function(){
                            $("#fileName").val("")
                            this.url ="${ctx}/customerEntry/checkImportPowerStationCode";
                            parent.searchOrder();
                            parent.layer.closeAll();
                            return
                        })


                    } else {
                        $("#filename").val('');
                        layer.msg("导入失败,请联系管理员!");
                    }
                }
            });
            uploader.on('fileQueued', function (file) {
                $('#filename').val(file.name);
            });
        })

        window.checkExcel = function() {
            if ($("#filename").val() == "") {
                layer.msg("请选择Excel文件!");
            } else {
                uploader.upload();
            }
        }
        window.importExcel = function() {
            if (isBlank($("#filename").val())) {
                return;
            }
            uploader.upload();
        }

        window.closeSelf = function() {
            var index = parent.layer.getFrameIndex(window.name);
            // window.parent.location.reload();//刷新父级页面
            parent.layer.close(index);//关闭当前页
        }

        function isBlank(val) {
            if (val == null || val == '' || val == undefined) {
                return true;
            }
            return false;
        }
    });
</script>
</body>
</html>