<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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" 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" media="all">
    <style>
        .layui-form-select dl {
            max-height: 200px;
            width: 80%;
        }

        html {
            background-color: #fff;
        }

        .layui-table td, .layui-table th {
            text-align: center;
        }

        .hx_l {
            position: relative;
        }

        .hx_l > span {
            position: absolute;
            right: 10px;
            top: 5px
        }

        .layui-textarea {
            min-height: 50px;
        }

        .w-110 {
            width: 110px;
        }
    </style>
</head>
<body>
<div class="aaa">
    <div class="layui-form">
        <div class="layui-card-body over pt-20 pb-40 h-350" action="" id="detailSet">
            <input hidden name="id" value="${id}">
            <div class="layui-col-xs12 mb-10 pr-30">
                <div class="layui-inline layui-col-xs3">
                    <label class="layui-form-label w-130"><i class="red">*</i>发货方式：</label>
                    <div class="layui-input-block w-200">
                        <select name="deliveryMethod" id="deliveryMethod" lay-verify="required" lay-filter="deliveryMethod"
                                lay-verify="required">
                            <option value="">请选择</option>
                            <c:forEach var="deliveryMethod" items="${deliveryMethods}">
                                <option value="${deliveryMethod.columns.type}">${deliveryMethod.columns.name}</option>
                            </c:forEach>
                        </select>
                        <input hidden name="deliveryMethodName" value="">
                    </div>
                </div>

                <div class="layui-col-xs12">
                    <div class="layui-inline layui-col-xs3 layui-hide" id="logisticsNo">
                        <label class="layui-form-label w-130"><i class="red">*</i>物流单号：</label>
                        <div class="layui-input-block w-200">
                            <input class="layui-input" value="" name="logisticsNo " lay-verify="logisticsNo">
                        </div>
                    </div>

                    <div class="layui-inline layui-col-xs3 layui-hide qt">
                        <label class="layui-form-label w-130"><i class="red">*</i>司机：</label>
                        <div class="layui-input-block w-200">
                            <input class="layui-input" name="deliverDriver" lay-verify="deliverDriver">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs3 layui-hide qt">
                        <label class="layui-form-label w-130"><i class="red">*</i>联系电话：</label>
                        <div class="layui-input-block w-200">
                            <input class="layui-input" name="deliverMobile" lay-verify="deliverMobile">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs3 layui-hide qt">
                        <label class="layui-form-label w-130"><i class="red">*</i>车牌号：</label>
                        <div class="layui-input-block w-200">
                            <input class="layui-input" name="deliverCarNum" lay-verify="deliverCarNum">
                        </div>
                    </div>

                </div>

                <div class=" layui-inline layui-col-xs12">
                    <label class="layui-form-label w-130">发货备注：</label>
                    <div class="layui-input-block w-200 hx_l">
                        <textarea name="examineRemark" class="layui-textarea" value=""></textarea>
                    </div>
                </div>

                <div class="layui-col-xs9 layui-inline mt-5">
                    <label class="layui-form-label" id="changeImgName"><i class="red">*</i>上传接货单：</label>
                    <div class="layui-input-block">
                        <div class="upload-container" id="uploader">
                            <img src="" alt="img placeholder" style="width: 80px; height: 80px;" id="pic">
                        </div>
                    </div>
                    <input type="hidden" name="receivingImg" id="imgs" lay-verify="required">

                </div>

            </div>

            <div class="layui-col-xs12 mb-20 pr-30 mt-10">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">物料明细</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 200px; overflow: auto">
                        <div class="layui-tab-item layui-show">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>物料代码</th>
                                    <th>物料类型</th>

                                    <th>单位</th>
                                    <th>物料描述</th>
                                    <th>调拨数量</th>
                                    <th>调出方库存</th>
                                    <th>出库数量</th>
                                </tr>
                                </thead>
                                <tbody id="materialTable">
                                <c:forEach items="${details}" varStatus="vs" var="material">
                                    <tr data-id="${material.columns.id}" data-key="${material.columns.material_id}">
                                        <td>${vs.count}</td>
                                        <td>${material.columns.material_code}</td>
                                        <td>${material.columns.material_type}</td>

                                        <td>${material.columns.material_unit}</td>
                                        <td>${material.columns.material_remarks}</td>
                                        <td>${material.columns.amount}</td>
                                        <td>${material.columns.stock}</td>
                                        <td class="w-110"><input class="layui-input outAmount" lay-verify="required"
                                                                 value="${material.columns.amount}" name="outAmount"
                                                                 onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))">
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="layui-form-item operate-footer" style="text-align: center;">
            <input type="button" lay-submit lay-filter="examine" id="examine" class="layui-btn " value="出库">
            <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();">取消</button>
        </div>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    var type = '${type}';
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.$,
            form = layui.form;
        upload = layui.upload;
        $form = $('form');

        form.on('select(deliveryMethod)', function (data) {
            if (data.value == '0') {
                $('#logisticsNo').removeClass("layui-hide");
                $('.qt').addClass("layui-hide");
            } else {
                $('#logisticsNo').addClass("layui-hide");
                $('.qt').removeClass("layui-hide");
            }
            $("input[name='deliveryMethodName']").val($(this).text());
        })

        form.verify({
            logisticsNo: function (value, item) {
                var mathed = $('#deliveryMethod').val();
                if (mathed == '0') {
                    if (!$.trim(value)) {
                        return "物流单号不能为空";
                    }
                }
            },
            deliverDriver: function (value) {
                var mathed = $('#deliveryMethod').val();
                if (isBlank(value) && mathed != 0) {
                    return '请填写司机';
                }
            },
            deliverMobile: function (value) {
                var mathed = $('#deliveryMethod').val();
                if (isBlank(value) && mathed != 0) {
                    return '请填写联系电话';
                }
            },
            deliverCarNum: function (value) {
                var mathed = $('#deliveryMethod').val();
                if (isBlank(value) && mathed != 0) {
                    return '请填写车牌号';
                }
            },
        })

        var saveFlag = true;
        form.on('submit(examine)', function (data) {
            if (!saveFlag) {
                return;
            }
            var order = {};
            order.id = data.field.id;
            order.deliveryMethod = data.field.deliveryMethodName;
            order.logisticsNo = data.field.logisticsNo;
            order.examineRemark = data.field.examineRemark;
            order.receivingImg = data.field.receivingImg;
            order.deliverDriver=data.field.deliverDriver;
            order.deliverMobile=data.field.deliverMobile;
            order.deliverCarNum=data.field.deliverCarNum;
            console.log(order)
            var arr = [];
            var flagMaterial=true;
            $('#materialTable>tr').each(function () {
                var material = {};
                material.id = $(this).attr("data-id");
                material.materialId = $(this).attr("data-key");
                material.materialCode = $(this).find('td').eq(1).text();
                var stock=$(this).find('td').eq(6).text();
                material.stock = $.trim(stock);
                var outAmount = $(this).find('td').eq(7).find('input[name="outAmount"]').val();
                material.outAmount = outAmount;
                if (outAmount*1 > stock*1) {
                    flagMaterial=false;
                    return false;
                }
                arr.push(material);
            });
            if(!flagMaterial){
                layer.msg("出库数量不能大于库存数量！");
                return ;
            }
            var index= layer.load(2, {shade: [0.5,'#fff'], content:''});
            order.details = arr;
            saveFlag = false;
            $.ajax({
                url: '${ctx}/allocation/outAllocationOrder',
                method: 'post',
                contentType: 'application/json',
                data: JSON.stringify(order),
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == "200") {
                        parent.layer.msg("出库成功", {time: 1000});
                        closeDiv();
                        parent.reload();
                    } else if (res.code == "501") {
                        layer.msg(res.errMsg, {time: 1500}, function () {
                            saveFlag = true;
                        });
                    } else {
                        layer.msg("保存失败", {time: 1000}, function () {
                            saveFlag = true;
                        });
                    }
                },
                complete: function () {
                    layer.close(index);
                }
            });
        })

        form.on('checkbox(allIn)', function (data) {
            var valu = data.value;
            if (valu == '1') {
                $('#materialTable>tr').each(function () {
                    var amount = $(this).find('td').eq(6).text();
                    var inamount = $(this).find('td').eq(7).text();
                    var currentInAmount = amount - inamount;
                    $(this).find('td').eq(8).find('input[name="currentInAmount"]').val(currentInAmount);
                })
            }
        });

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

                });
            }
            , done: function (res) {
                //上传完毕回调
                if (res.code > 0) {
                    return layer.msg("上传失败！", {icon: 2});
                }
                var imgPath = res.path;
                $('#pic').attr('src', '${commonStaticImgPath}' + imgPath); //图片链接（base64）
                $("#pic").show();
                $("#imgs").val(imgPath);
            }
            , error: function () {
                //请求异常回调
            }
        });


    })

    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;
    }

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



