<%@ 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;}
        .layui-btn-danger {
            background-color: #cd2323;
        }
    </style>
</head>

<body>
<div class="layui-form">
    <div class="layui-card-body layui-col-xs12" id="LAY_app">
        <blockquote class="layui-elem-quote">订单信息</blockquote>
        <div class="layui-card">
            <div class="layui-card-body">
                <input value="${apply.columns.id}" hidden  id="applyId">
                <div class="layui-row layui-col-space12 layui-form-item mt-5">
                    <div class="layui-col-xs3">
                        <label class="layui-form-label"><i class="red">*</i>备货类型：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${'0' eq apply.columns.fitting_type?'其他':'组件'}" id="fittingType" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <label class="layui-form-label"><i class="red">*</i>入库仓库：</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input layui-bg-gray" value="${apply.columns.inWarehouseName}" id="inWarehouseName" disabled>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <label class="layui-form-label">申请人：</label>
                        <div class="layui-input-block">
                            <input type="text" autocomplete="off" name="createName" id="person_in_charge" class="layui-input layui-bg-gray" readonly  value="${apply.columns.create_name}">
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <label class="layui-form-label">申请时间：</label>
                        <div class="layui-input-block">
                            <input type="text" autocomplete="off" id="createTime" name="createTime" class="layui-input layui-bg-gray" value="${apply.columns.createTime}" readonly>
                        </div>
                    </div>
                    <div class="layui-col-xs3">
                        <label class="layui-form-label">申请编号：</label>
                        <div class="layui-input-block">
                            <input type="text" autocomplete="off"  name="createTime" class="layui-input layui-bg-gray" value="${apply.columns.number}" readonly>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs12">
                        <label class="layui-form-label">备注：</label>
                        <div class="layui-input-block ">
                            <input type="text" name="remarks" autocomplete="off" placeholder="" class="layui-input" value="${apply.columns.remarks}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card">

            <blockquote class="layui-elem-quote">物料清单</blockquote>
            <div class="layui-card-body ">
                <div class="layui-row layui-col-space12 layui-form-item">
                    <div class="layui-col-xs12 mb-10 pr-30 pl-30">

                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th style="width: 5%">序号</th>
                                <th style="width: 18%">物料类型</th>
                                <th style="width: 20%">物料规格</th>
                                <th style="width: 10%">备货数量</th>
                                <th style="width: 10%">单位</th>
                                <th style="width: 20%">物料代码</th>
                                <th style="width: 10%">品牌</th>
                                <th style="width: 15%">操作</th>
                            </tr>
                            </thead>
                            <tbody id="materialBody">
                            <c:if test="${not empty details}">
                                <c:forEach items="${details}" var="de" varStatus="vs">
                                    <tr class="materialtr" data-value="${de.columns.id}" data-materialId="${de.columns.material_id}" data-title="${de.columns.remark}">
                                        <td>${vs.count}</td>
                                        <td class="materialType" data-value="${de.columns.material_type_id}">${de.columns.material_type}</td>
                                        <td class="materialSpec">${de.columns.material_spec}</td>
                                        <td class="applyAmount">${de.columns.amount}</td>
                                        <td class="unit">${de.columns.unitName}</td>
                                        <td class="materialCode">${de.columns.material_code}</td>
                                        <td class="materialBrand">${de.columns.material_brand}</td>
                                        <td>
                                            <%--<button type="button" class="layui-btn layui-btn-sm layui-btn-danger addDaili" onclick="addtr(this)">匹配</button>--%>
                                                <a class="layui-table-opt-link mateMaterial" data-title="${de.columns.remark}">匹配</a>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </c:if>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item operate-footer" style="text-align: center;">
            <input type="button" lay-submit lay-filter="templeSave" id="templeSave" class="layui-btn" value="暂存">
            <input type="button" lay-submit lay-filter="save" id="save" class="layui-btn " value="提交">
            <input type="button"   value="取消" class="layui-btn layui-btn-primary " onclick="closeDiv();" >
        </div>

    </div>

</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/xm-select.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var $;
    var imgs = '';
    var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    var matypeList ;
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'layedit', 'laydate', 'jquery', 'layer'], function () {
        $ = layui.jquery;
        form = layui.form;
        $form = $('form');

        form.on('submit(save)', function (data) {
            var $trs = $('#materialBody>tr');
            var applyId=$("#applyId").val();
            if ($trs.length > 0) {
                var arr = [];
                for (var i = 0; i < $trs.length; i++) {
                    var obj = {};
                    var $tr = $trs.eq(i);
                    var materialId= $tr.attr("data-materialId");
                    if(isBlank(materialId)){
                        layer.msg('第' + (i + 1) + '行物料没匹配，不能提交!');
                        return;
                    }
                    var detailId= $tr.attr("data-value");
                    obj.detailId=detailId;
                    var materialTypeName = $tr.find('.materialType').text();
                    var materialTypeId = $tr.find('.materialType').attr("data-value");
                    obj.targetId=materialId;
                    obj.materialTypeId=materialTypeId;
                    obj.materialType = materialTypeName;
                    var materialSpecs = $tr.find('.materialSpec').text();

                    obj.materialSpecs = materialSpecs;
                    obj.amount = $tr.find('.applyAmount').text();
                    if (isBlank(obj.amount)) {
                        layer.msg('第' + (i + 1) + '行申请数量为空');
                        return;
                    }
                    if (!/^\d+(\.\d{1,2})?$/.test(obj.amount)) {
                        layer.msg('第' + (i + 1) + '行数量格式不正确');
                        return;
                    }
                    var materialCode= $tr.find('.materialCode').text();
                    obj.materialCode=materialCode;
                    var remark=$tr.attr("data-title");
                    obj.remark=remark;
                    arr.push(obj);
                }
            }
            $.ajax({
                url: '${ctx}/fittingStockUp/tempFittingStockMateFitting',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({
                    actionType:'2',
                    id: applyId,
                    details: arr
                }),
                dataType: 'JSON',
                success: function (res) {
                    if (res.code === "200") {
                        layer.msg("保存成功", {time: 2000}, function(){
                            closeDiv();
                            parent.table.reload('test-table-reload');
                        });
                    }else {
                        layer.msg("保存失败"+res.errMsg, {time: 2500});
                    }
                },
                error: function (data) {
                }
            });
        });

        form.on('submit(templeSave)', function (data) {
            var $trs = $('#materialBody>tr');
            var applyId=$("#applyId").val();
            if ($trs.length > 0) {
                var arr = [];
                for (var i = 0; i < $trs.length; i++) {
                    var obj = {};
                    var $tr = $trs.eq(i);
                    var materialId= $tr.attr("data-materialId");
                    var detailId= $tr.attr("data-value");
                    obj.detailId=detailId;
                    var materialTypeName = $tr.find('.materialType').text();
                    var materialTypeId = $tr.find('.materialType').attr("data-value");
                    obj.targetId=materialId;
                    obj.materialTypeId=materialTypeId;
                    obj.materialType = materialTypeName;
                    var materialSpecs = $tr.find('.materialSpec').text();

                    obj.materialSpecs = materialSpecs;
                    obj.amount = $tr.find('.applyAmount').text();
                    if (isBlank(obj.amount)) {
                        layer.msg('第' + (i + 1) + '行申请数量为空');
                        return;
                    }
                    if (!/^\d+(\.\d{1,2})?$/.test(obj.amount)) {
                        layer.msg('第' + (i + 1) + '行数量格式不正确');
                        return;
                    }
                    var materialCode= $tr.find('.materialCode').text();
                    obj.materialCode=materialCode;
                    var remark=$tr.attr("data-title");
                    obj.remark=remark;
                    arr.push(obj);
                }
            }
            $.ajax({
                url: '${ctx}/fittingStockUp/tempFittingStockMateFitting',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({
                    actionType:'1',
                    id: applyId,
                    details: arr
                }),
                dataType: 'JSON',
                success: function (res) {
                    if (res.code === "200") {
                        layer.msg("保存成功", {time: 2000}, function(){
                            closeDiv();
                            parent.table.reload('test-table-reload');
                        });
                    }else {
                        layer.msg("保存失败"+res.errMsg, {time: 2500});
                    }
                },
                error: function (data) {
                }
            });
        });

        $("body").on("click",".mateMaterial",function (){
            $("tr").removeClass("choice");
            var titleRemark= $(this).attr("data-title");
            $(this).parents('tr').addClass("choice").attr("data-title",titleRemark);
            var type= $(this).parents('tr').find(".materialType").text();
            var spec= $(this).parents('tr').find(".materialSpec").text();
            var amount= $(this).parents('tr').find(".applyAmount").text();
            var id_ = '${apply.columns.id}';
            layer.open({
                type: 2,
                title: "匹配",
                resize: false,
                area: ['90%', '80%'],
                content: '${ctx}/material/order/mateMaterialPage?type='+type+'&spec='+spec+'&amount='+amount+'&from=bh'+'&id='+id_
            });
        })

    })

    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 getMerchMaterial(obj){
        var deatil ="";
        var remark=$(".choice").attr("data-title");
        for(var i =0;i<obj.length;i++){
            var materialObj=obj[i];
            deatil += ' <tr class="materialtr" data-materialId="'+materialObj.materialId+'"  data-title="'+remark+'">';
            deatil += '<td class="idx"></td>';
            deatil += '<td class="materialType" data-value="'+materialObj.materialTypeId+'">'+materialObj.typeName+'</td>';
            deatil += ' <td class="materialSpec">'+materialObj.materialSpec+'</td>';
            deatil += ' <td class="applyAmount">'+materialObj.outAmount+'</td>';
            deatil += '<td class="unit">'+materialObj.unitName+'</td>';
            deatil += '<td class="materialCode">'+materialObj.code+'</td>';
            deatil += ' <td class="materialBrand">'+materialObj.materialBrand+'</td>';
            deatil += ' <td> ';
            deatil += ' <a class="layui-table-opt-link mateMaterial" >匹配</a> ';
          /*  deatil += ' &nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-table-opt-link" onclick="deleteMaterial(this)">删除</a> ';*/
            deatil += ' </td> ';
        }
        $(".choice").after(deatil);
        $(".choice").remove();

        getIndex();
    }


    function getIndex(){
        $("#materialBody tr").each(function(index){
            $(this).find(".idx").text(index+1);
        })
    }

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

