<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base"/>
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.css" media="all">
    <style>html {
        background-color: #fff;
        padding-bottom: 50px;
    }

    td, th {
        text-align: center !important;
    }
    .load-icon{background: url('${ctxPlugin}/static/img/shili_img.png') center center no-repeat; width: 12px; height: 12px; display: inline-block; border-radius: 50%;
        vertical-align: text-bottom;transform: translate(0px, -1px);margin-right: 2px;}
    </style>
</head>

<body>
<div class="layui-form">

    <div class="layui-tab-content" id="LAY_app">
        <div class="layui-card">
            <div class="layui-elem-quote" style="display: flex;justify-content: space-between;">
                <p>订单信息</p>
            </div>
            <input type="hidden" id="pzName" value="${orderDate.inStockProof}">
            <input type="hidden" id="pzUrl" value="${orderDate.inStockProofUrl}">
            <input type="hidden" id="status" value="${status}">
            <div class="layui-tab-content">
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <label class="layui-form-label ">订单编号：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled name="number" readonly autocomplete="off"
                                   placeholder="请输入"
                                   class="layui-input layui-bg-gray" value="${orderDate.number}">
                        </div>
                    </div>
                    <input type="hidden" disabled name="id" readonly  value="${orderDate.id}">
                    <div class="layui-col-xs4">
                        <label class="layui-form-label ">订单类型：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled name="type"
                                   readonly class="layui-input layui-bg-gray" value="${orderDate.type}">

                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <label class="layui-form-label ">订单来源：</label>
                        <div class="layui-input-block">
                            <input type="text" disabled name="pattern" readonly class="layui-input layui-bg-gray" value="${orderDate.pattern}">
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <label class="layui-form-label ">供应商：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled name="gysName" readonly class="layui-input layui-bg-gray"
                                   value="${orderDate.gysName}">
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <label class="layui-form-label ">入库仓库：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled name="ckName" readonly class="layui-input layui-bg-gray"
                                   value="${orderDate.ckName}">
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <label class="layui-form-label ">接货人：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled name="personInCharge" readonly class="layui-input layui-bg-gray"
                                   value="${orderDate.personInCharge}">
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <label class="layui-form-label ">联系方式：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled name="mobile" readonly class="layui-input layui-bg-gray"
                                   value="${orderDate.mobile}">
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs8">
                        <label class="layui-form-label ">仓库地址：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled name="address" readonly class="layui-input layui-bg-gray"
                                   value="${orderDate.address}">
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <label class="layui-form-label">订单备注：</label>
                        <div class="layui-input-block ">
                            <textarea readonly class="layui-textarea layui-bg-gray"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 发货信息 -->
            <div class="layui-elem-quote" style="display: flex;justify-content: space-between;">
                <p>发货信息</p>
                <%--<p>采购总额：<span>${total}</span>元</p>--%>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <label class="layui-form-label">附件信息：</label>
                    <div class="layui-input-block ">
                        <c:forEach items="${orderDate.attachmentMap}" var="v" varStatus="vs">
                            <p style="margin-left:3%"><a class="h-32 lh-32 layui-span-unit lookBtn"
                                                         target="_blank" href="${commonStaticImgPath}${v.attachmentUrl}" style="color: #2890ac;">${v.attachmentName}</a>
                            </p>
                        </c:forEach>
                    </div>
                </div>


            </div>

            <div class="layui-elem-quote" style="display: flex;justify-content: space-between;">
                <p>物料清单</p>
                <%--<p>采购总额：<span>${total}</span>元</p>--%>
            </div>
            <div class="layui-tab-content">
                <div class="layui-row">
                    <table class="layui-table">
                        <thead>
                        <th>序号</th>
                        <th>物料类型</th>
                        <th>物料代码</th>
                        <th>物料名称</th>
                        <th>规格</th>
                        <th>品牌</th>
                        <th>单位</th>
                        <th>采购数量</th>
                        <th>入库数量</th>
                        </thead>
                        <tbody id="materialTbody">
                        <c:forEach items="${orderDate.list}" var="v" varStatus="vs">

                                <td>${vs.count}</td>
                                <td>${v.materialType}</td>
                                <td>${v.code}</td>
                                <td>${v.materialName}</td>
                                <td>${v.materialSpec}</td>
                                <td>${v.materialBrand}</td>
                                <td>${v.unitCode}</td>
                                <td>${v.outAmount}</td>
                                <td>${v.inAmount}</td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-elem-quote">
                <p>收货信息</p>
            </div>

            <div class="layui-row" style="margin-top: 1%">
                <div class="layui-col-xs8">
                    <label class="layui-form-label ">入库备注：</label>
                    <div class="layui-input-block ">
                        <input type="text" <c:if test="${status eq '7'}"> readonly </c:if>  name="inStockRemarks"  class="layui-input"
                               value="${orderDate.inStockRemarks}">
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-xs8">
                    <label class="layui-form-label ">入库凭证：</label>

                    <div style="position: relative;top: 3px;" id="addFile" >
                        <button class="layui-btn layui-btn-sm">上传</button>
                        <input type="file" id="uploadFile" single
                               style="position: absolute; z-index: 3; opacity: 0; left: 100px; width: 44px;">


                        <%-- <c:if test="${type eq '2'}">
                             <span class="hx_ts">(最多传入2个附件)</span>
                         </c:if>--%>
                    </div>

                    <ul id="attachFile">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="operate-footer">
        <c:if test="${orderDate.status eq '10'}">
        <input type="button" onclick="doDeliver(0)" value="暂存" class="layui-btn ">
        <input type="button" onclick="doDeliver(1)" value="提交" class="layui-btn ">
        </c:if>
        <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();">取消</button>
    </div>

</div>


<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.js"></script>
<script type="text/javascript">
    //图片查看效果
    var viewer = new Viewer(document.getElementById('LAY_app'));
    //初始数据
    var $form;
    var form;
    var $;
    var imgs = '';
    var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    var quaimgsCount = '${quaimgsCount}'
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'layedit', 'laydate', 'jquery', 'layer', 'element', 'upload'], function () {
        $ = layui.jquery;
        form = layui.form;
        var element = layui.element;
        $form = $('form');
        form.verify({
            express: function (value) {
                var expressMethod = $('select[name=deliverMethodId]').find('option:selected').data('type');
                if (isBlank(value) && expressMethod === 0) {
                    return '请填写物流单号';
                }
            },
            deliverInvoice: function (value) {
                if (isBlank(value)) {
                    return '请上传接货单';
                }
            }
        });


        if(!isBlank($("#pzName").val())){
            var inStockProof=$("#pzName").val();
            var inStockProofUrl =$("#pzUrl").val();
            var status=$("#status").val();
            if(isBlank(status)){
                $('#attachFile').append('<li><span style="position: relative; top: 4px;" id="inStockProof" value="' + inStockProof + '" class="inStockProof">' + inStockProof + '</span><input type="hidden" id="inStockProofUrl"  value="' + inStockProofUrl + '"> <input type="hidden" name="attachName" value="' + inStockProof + '"/> <span class="hx_del">删除</span>');
            }else{
                $('#attachFile').append('<li><span style="position: relative; top: 4px;" id="inStockProof" value="' + inStockProof + '" class="inStockProof">' + inStockProof + '</span><input type="hidden" id="inStockProofUrl"  value="' + inStockProofUrl + '"> <input type="hidden" name="attachName" value="' + inStockProof + '"/>');
            }

            $("#addFile").hide();
        }



        var upload = layui.upload;

        $('#uploadFile').change(function () {
            if ($('#attachFile >li').length >= 1) {
                layer.msg("最多只能传入一个附件！")
                return;
            }
            var file = $(this)[0].files[0];
            if (isBlank(file)) {
                console.log(111);
                return;
            }
            console.log(file)
            var formData = new FormData();
            formData.append("file", file);

            $.ajax({
                url: "${ctx}/common/uploadFile",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $('#attachFile').append('<li><span style="position: relative; top: 4px;color:#2890ac" id="inStockProof" value="' + file.name + '" class="inStockProof">' + file.name + '</span><input type="hidden" id="inStockProofUrl"  value="' + data.path + '"> <input type="hidden" name="attachName" value="' + file.name + '"/> <span class="hx_del" style="color:red;cursor: pointer;position: relative; top: 4px">x</span>');
                    $("#addFile").hide();
                }
            });
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '#uploader' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            , size: 5 * 1024
            , number: 1
            , accept: 'file'
            , exts: 'png'
            , done: function (res) {
                if (res.code > 0) {
                    return layer.msg("上传失败！", {icon: 2});
                }
                var imgPath = res.path;
                $('#pic').attr('href', '${commonStaticImgPath}' + imgPath).html(res.filename); //图片链接（base64）
                $("#pic").removeClass("hide");
                //$("#uploader").hide();
                $("#deliverInvoice").val(imgPath);
            }
            , error: function () {
                //请求异常回调 演示失败状态
            }
        });


        form.on('select(deliverType)', function (d) {
            var $elem = $(d.elem);

            if ($elem.find('option:selected').data('type') === 0) {
                $('input[name=expressNo]').closest('.layui-col-xs4').removeClass('layui-hide');
                $('input[name=deliverDriver]').closest('.layui-col-xs4').removeClass('layui-hide').addClass('layui-hide');
                $('input[name=deliverMobile]').closest('.layui-col-xs4').removeClass('layui-hide').addClass('layui-hide');
                $('input[name=deliverCarNum]').closest('.layui-col-xs4').removeClass('layui-hide').addClass('layui-hide');
            } else {
                $('input[name=expressNo]').closest('.layui-col-xs4').removeClass('layui-hide').addClass('layui-hide');
                $('input[name=deliverDriver]').closest('.layui-col-xs4').removeClass('layui-hide');
                $('input[name=deliverMobile]').closest('.layui-col-xs4').removeClass('layui-hide');
                $('input[name=deliverCarNum]').closest('.layui-col-xs4').removeClass('layui-hide');
            }
        });

        upload.render({
            elem: '#uploaderQuali' //绑定元素
            , url: '${ctx}/common/uploadFile' //上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                });
            }
            , done: function (res) {
                //上传完毕回调
                quaimgsCount++;
                if (quaimgsCount >= 5) {
                    $("#uploaderQuali").hide();
                } else {
                    $("#uploaderQuali").show();
                }
                addImg(res.path,"quaimgs","qualificationsImgsDev","quaImgPicker");
            }
            , error: function () {
                //请求异常回调
            }
        });

        $(document).on('click', '.hx_del', function () {
            $(this).parent('li').remove();
            $("#addFile").show();
        });

    })



    // 暂存
    var deliverFlag = true;
    function doDeliver(re) {
        if (!deliverFlag) {
            return;
        }
        var id = $("input[name='id']").val();
        var inStockRemarks = $("input[name='inStockRemarks']").val();
        var inStockProof =  $("#inStockProof").text();
        var inStockProofUrl = $("#inStockProofUrl").val();
        deliverFlag = false;
        $.ajax({
            type: 'post',
            url: '${ctx}/material/order/orderSubmit',
            data: {
                id :id,
                submit:re,
                inStockRemarks:inStockRemarks,
                inStockProof:inStockProof,
                inStockProofUrl:inStockProofUrl

            },
            success: function (data) {
                afterSuccess(data);
            },
            complete: function () {
                deliverFlag = true;
                layer.close(index);
            }
        });
    }



    function getListData() {
        var $trs = $('#materialTbody>tr');
        var arr = [];
        for (var i = 0; i < $trs.length; i++) {
            var $tr = $trs.eq(i);
            var data = {};
            data.detailId = $tr.data('id');
            data.materialId = $tr.data('materialid');
            data.applyAmount = $tr.data('applyamount');
            data.amount = $tr.data('amount');
            arr.push(data);
        }
        return arr;
    }

    function afterSuccess(data) {
        if (data.code === '200') {
            parent.layer.msg('操作成功', {icon: 1});
            closeDiv();
            parent.searchOrder();
        }else {
            layer.msg(data.errMsg, {icon: 2});
        }
    }

    function closeDiv() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index);
    }

    function isBlank(val) {
        if (val == null || val == '' || val == undefined) {
            return true;
        }
        return false;
    }

    function addImg(data,imgType,div,imgPicker) {

        var html = '<div class="bj-img imgSpan"><span class="layui-icon-close layui-icon" onclick="delImg(this, \''+imgType+'\')"></span>';
        html += '<img src="${commonStaticImgPath}' + data + '" height="700" width="1200"/>';
        html += '<input type="hidden" class="'+imgPicker+'" value="' + data + '" /> </div>';
        $("#"+div).append(html);
    }

    function delImg(that,imgType) {
        if(imgType=='imgs'){
            imgsCount--;
            if (imgsCount < 1) {
                $("#uploader").show();
            }
        }else{
            quaimgsCount--;
            if (quaimgsCount < 5) {
                $("#uploaderQuali").show();
            }
        }
        $(that).parent().remove();
    }
</script>
</body>
</html>
