<%@ 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}
        .hx_del{ font-size: 12px; color: #0e8ee7; position: relative; top: 4px; display: none}
        #attachFile>li{height: 26px}
        #attachFile>li:hover .hx_del{ display: inline-block}
        .hx_ts{
            font-size: 12px;
            color: red;
        }
        .layui-textarea {
            min-height: 50px;
        }
    </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">


            <div class="layui-col-xs12 mb-10 pr-30">

                <input hidden name="id" value="${id}">
                <div class="layui-inline layui-col-xs4">
                    <label class="layui-form-label w-130"><i class="red">*</i>调出方仓库：</label>
                    <div class="layui-input-block w-200">
                        <select name="warehouseId" lay-verify="required" lay-search lay-filter="warehouseId">
                            <option value="">请选择</option>
                            <c:forEach items="${warehouses}" var="warehouse">
                                <option value="${warehouse.columns.id}" <c:if test="${order.warehouseId == warehouse.columns.id}">selected</c:if>>${warehouse.columns.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-inline layui-col-xs4">
                    <label class="layui-form-label w-120"><i class="red">*</i>调入方仓库：</label>
                    <div class="layui-input-block ml-120" >
                        <select name="inWarehouseId" lay-verify="required" lay-search lay-filter="inWarehouseId">
                            <option value="">请选择</option>
                            <c:forEach items="${warehouses}" var="warehouse">
                                <option value="${warehouse.columns.id}" <c:if test="${order.inWarehouseId == warehouse.columns.id}">selected</c:if>>${warehouse.columns.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-inline layui-col-md2 layui-col-sm2">
                    <label class="layui-form-label w-130"><i class="red">*</i>接货人：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled readonly autocomplete="off" id="person_in_charge" class="layui-input layui-bg-gray" value="${warehouse.personInCharge}">
                    </div>
                </div>
                <div class="layui-inline layui-col-md2 layui-col-sm2">
                    <label class="layui-form-label w-130"><i class="red">*</i>联系方式：</label>
                    <div class="layui-input-block">
                        <input type="text" disabled readonly autocomplete="off" id="mobile" class="layui-input layui-bg-gray" value="${warehouse.mobile}">
                    </div>
                </div>
                <div class="layui-inline layui-col-xs12 mb-10 ">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-130">仓库地址：</label>
                        <div class="layui-input-block ">
                            <input type="text" disabled readonly autocomplete="off" id="address" class="layui-input layui-bg-gray" value="${warehouse.province}${warehouse.city}${warehouse.area}${warehouse.address}">
                        </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="remarks" class="layui-textarea" value="">${order.remarks}</textarea>
                    </div>
                </div>

                <c:if test="${model eq 'edit'}">
                    <div class="layui-inline layui-col-xs12 mt-5">
                        <label class="layui-form-label w-130">驳回原因：</label>
                        <div class="layui-input-block w-200 hx_l" >
                            <textarea  class="layui-textarea layui-bg-gray" readonly >${order.reasonsForFailure}</textarea>
                        </div>
                    </div>
                </c:if>

            </div>


            <input type="hidden" name="details" lay-verify="details">


            <div>
                <input type="button" class="layui-btn layui-btn-sm" id="importPlan" value="批量导入"/>
            </div>

            <div class="layui-col-xs12 mb-20 pr-30 mt-20">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <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.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>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item operate-footer" style="text-align: center;">
            <c:if test="${model eq 'add'}">
                <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="确认">
            </c:if>
            <c:if test="${model eq 'edit'}">
                <input type="button" lay-submit lay-filter="confirm" id="confirm" class="layui-btn " value="重新提交">
            </c:if>


            <button type="button" class="layui-btn layui-btn-primary " onclick="closeDiv();">取消</button>
        </div>

    </div>
</div>
<div id="lookImg" class="hide pos-r">
    <div style="position:relative;width:90%;height:450px;">
        <div class="w-500 h-450 lookImg">
            <img src="" width="80%" id="image">
        </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 imgs='';
    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    var type='${type}';
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');


        form.verify({
            details: function(){
                if($('#materialTable>tr').length === 0){
                    return "请导入物料信息";
                }
            },
            attach: function(value){
                if(isBlank(value)){
                    return "请上传附件";
                }
            }
        });

        $(document).on('mouseenter', '#materialTable td', function(){
            var that = this;
            $(that).attr('title', $(that).text());
        });

        window.importMaterial = function(data){
          var warehouseId=$('select[name="warehouseId"]').val();
            $.ajax({
                url:'${ctx}/allocation/getWarehouseStock?warehouseId='+warehouseId,
                method:'post',
                contentType: 'application/json',
                data:JSON.stringify(data.materialList),
                dataType:'JSON',
                success:function(res){
                    if(res.code=="200"){
                        var data=res.data;
                        var html = "";
                        for(var i=0; i<data.length; i++){
                            html += "<tr data-id="+data[i].materialId+">";
                            html += '<td>' + (i+1) + '</td>';
                            html += '<td>' + data[i].code + '</td>';
                            html += '<td>' + data[i].type + '</td>';
                            html += '<td>' + data[i].unit + '</td>';
                            if (isBlank(data[i].description)) {
                                html += '<td></td>';
                            } else {
                                html += '<td>' + data[i].description + '</td>';
                            }
                            html += '<td>' + data[i].amount + '</td>';
                            html += '<td>' + data[i].warehouseStock + '</td>';
                            html += "</tr>";
                        }
                        $('#materialTable').empty().append(html);
                    }else{
                        layer.msg("获取库存失败",{time:1000});

                    }
                }
            }) ;


        }


        $('#importPlan').click(function(){
            parent.layer.open({
                title: '导入物料',
                type: 2,
                area: ['550px', '300px'],
                content: '${ctx}/inventory/toImportMaterialForm'
            });
        });

        form.on('select(warehouseId)',function(data){
            var value = $(data.elem).find("option:selected").val();
            if(isBlank(value)){
                return
            }
            var inWarehouseId=$('select[name="inWarehouseId"]').val();
            if (value == inWarehouseId) {
                layer.msg("调出仓库不能与调入仓库一致");
                $(data.elem).val('');
                return
            }
            $("#materialTable").html("");
        })

        form.on('select(inWarehouseId)',function(data){
            var value = $(data.elem).find("option:selected").val();
            if(isBlank(value)){
                return
            }
            var warehouseId=$('select[name="warehouseId"]').val();
            if (value == warehouseId) {
                layer.msg("调出仓库不能与调入仓库一致");
                $(data.elem).val('');
                $("#person_in_charge").val('');
                $("#mobile").val('');
                $("#address").val('');
                return
            }

            $.ajax({
                url:"${ctx}/material/apply/findWarehouseById",
                type:"POST",
                data:{
                    id:value
                }
                ,success:function (result) {

                    if(result.code =="200"){
                        var _data = result.data;
                        $("#person_in_charge").val(_data.personInCharge);
                        $("#mobile").val(_data.mobile);
                        $("#address").val(_data.province+_data.city+_data.area+_data.address);
                    }
                }
            })

        })

        var saveFlag = true;
        form.on('submit(confirm)', function(data){
            if(!saveFlag){
                return;
            }
            var order = {};
            order.id=data.field.id;
            order.warehouseId = data.field.warehouseId;
            order.inWarehouseId = data.field.inWarehouseId;
            order.remark = data.field.remarks;
            var arr = [];
            $('#materialTable>tr').each(function(){
                var material = {};
                material.materialId = $(this).attr("data-id");
                material.materialCode=$(this).find('td').eq(1).text();
                material.materialType=$(this).find('td').eq(2).text();
                material.materialUnit=$(this).find('td').eq(3).text();
                material.materialRemark=$(this).find('td').eq(4).text();
                material.amount = $(this).find('td').eq(5).text();
                material.materialStock= $(this).find('td').eq(6).text();
                arr.push(material);
            });
            order.details = arr;
            saveFlag = false;
            $.ajax({
                url:'${ctx}/allocation/addAllocationOrder',
                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 if(res.code == '422'){
                        layer.msg(res.msg,{time:1500},function(){
                            saveFlag = true;
                        });
                    } else{
                        layer.msg("保存失败",{time:1000});
                        saveFlag = true;
                    }
                },
                complete: function(){

                }
            }) ;
        });



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

    })

    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>


