<%@ 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">
    <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/dist/viewer.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-inline {
            margin-top: 10px;
        }

        .layui-textarea {
            min-height: 50px;
        }
        table tbody {
            display: block;
            overflow-y: auto;
            overflow-x: clip;
            height: 200px;
        }
        table thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        table thead {
            width: 100%
        }
    </style>
</head>
<body>
<div class="aaa">
    <div class="layui-form">
        <div class="layui-card-body pt-20 pb-40 h-350" action="" id="detailSet">
            <div class="layui-col-xs12 mb-10 pr-30">
                <blockquote class="layui-elem-quote" style="margin-left: 0;background-color: #fff;">退货信息</blockquote>
                <div class="layui-col-xs12">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-100"><i class="red">*</i>电站编码：</label>
                        <div class="layui-input-block ml-100 w-200">
                            <input type="text" name="relationNumber" id="relationNumber" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </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="returnRemark" id="returnRemark" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <input type="hidden" name="details" lay-verify="details">
            <div class="layui-col-xs12 mb-20 pr-30">
                <blockquote class="layui-elem-quote" style="margin-left: 0;background-color: #fff;">物料信息</blockquote>
                <div class="layui-col-xs12">
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-140">物料条码：</label>
                        <div class="layui-input-block w-200">
                            <input type="text" name="barcode" id="barcode" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline layui-col-xs4">
                        <label class="layui-form-label w-140"><i class="red">*</i>入库仓库：</label>
                        <div class="layui-input-block w-200">
                            <select name="warehouse" id="warehouse" lay-verify="required">
                                <option value="">请选择</option>
                                <c:forEach var="warehouse" items="${warehouseList}">
                                    <option value="${warehouse.columns.id}">${warehouse.columns.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <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" >
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item operate-footer" style="text-align: center;">
            <input type="button" lay-submit lay-filter="confirm" id="confirm" 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 src="${ctxPlugin}/lib/xm-select.js"></script>
<script type="text/javascript">
    //初始数据
    var $form;
    var form;
    var upload;
    var $;
    layui.use(['form', 'table', 'upload', 'jquery'], function () {
        $ = layui.jquery;
        form = layui.form;
        upload = layui.upload;
        $form = $('form');

        $('#relationNumber').change(function () {
            var relationNumber = $("#relationNumber").val();
            if (isBlank(relationNumber)) {
                return
            }
            searchVal(relationNumber)
        })

        $('#barcode').keyup(function(){
            $('#materialTable tr').hide()
                .filter(":contains('" +($(this).val()) + "')").show();
            if(isBlank($(this).val())){
                $('#materialTable tr').show();
            }
        }).keyup();



        window.del = function (obj) {
            $(obj).closest('tr').remove();
        }

        function searchVal(relationNumber) {
            $.ajax({
                type: 'post',
                url: '${ctx}/material/return/findPSOrderByNumber',
                data: {code: relationNumber, belongType: "2"},
                async: false,
                dataType: 'json',
                success: function (d) {
                    console.log(d)
                    var warehouseId = '';
                    var html = '';
                    for (var i = 0; i < d.length; i++) {
                        html += '<tr data-id="' + d[i].columns.material_id + '" >'
                            + '<td ></td>'
                            + '<td>' + d[i].columns.code + '</td>'
                            + '<td>' + d[i].columns.name + '</td>'
                            + '<td>' + d[i].columns.type + '</td>'
                            + '<td>' + d[i].columns.material_brand + '</td>'
                            + '<td>' + d[i].columns.spec + '</td>'
                            + '<td>' + d[i].columns.barcode + '</td>'
                            + '<td>'
                            + '<input class="layui-hide" name="amount" value="' + d[i].columns.amount + '"  />'
                            + '<input class="layui-hide" name="choseFlag" value="0"/>'
                            + '<div class="layui-unselect layui-form-checkbox" lay-skin="primary">'
                            + '<i class="layui-icon layui-icon-ok"></i></div>'
                            + '</td>'
                            + '</tr>';
                    }
                    $('#materialTable').empty().append(html);
                    appendSort();
                    if (!isBlank(warehouseId)) {
                        $("#warehouse").val(warehouseId);
                    }

                    $('.layui-form-checkbox').click(function () {
                        if ($(this).hasClass('layui-form-checked')) {
                            $(this).removeClass('layui-form-checked');
                            $(this).prev().val("0");
                        } else {
                            $(this).addClass('layui-form-checked');
                            $(this).prev().val("1");
                        }
                    })
                }
            });
        }

        function appendSort() {
            $('#materialTable>tr').each(function (i) {
                $(this).find('td:first').html(i + 1);
            });
        }


        var saveFlag = true;
        form.on('submit(confirm)', function (data) {
            if (!saveFlag) {
                return;
            }
            var bom = {};
            bom.relationNumber = $("#relationNumber").val();
            var warehouseId = $("#warehouse").val();
            if (isBlank(warehouseId)) {
                layer.msg("请选择入库仓库");
                return;
            }
            bom.warehouseId = warehouseId;
            bom.type = "2";
            var arr = [];
            $('#materialTable>tr').each(function () {
                var choseFlag = $(this).find('td').eq(7).find('input[name=choseFlag]').val();
                if (choseFlag === '1') {
                    var material = {};
                    material.materialId = $(this).attr("data-id");
                    material.sort = $(this).find('td').eq(0).text();
                    material.materialCode = $(this).find('td').eq(1).text();
                    material.materialName = $(this).find('td').eq(2).text();
                    material.materialType = $(this).find('td').eq(3).text();
                    material.materialBrand = $(this).find('td').eq(4).text();
                    material.materialSpec = $(this).find('td').eq(5).text();
                    material.barcode = $(this).find('td').eq(6).text();
                    material.num = $(this).find('td').eq(7).find('input[name=amount]').val();
                    arr.push(material);
                }
            });
            if (arr.length == 0) {
                layer.msg("物料不能为空");
                return;
            }
            bom.details = arr;
            saveFlag = false;
            $.ajax({
                url: '${ctx}/material/return/saveReturnPSOrder',
                method: 'post',
                contentType: 'application/json',
                data: JSON.stringify(bom),
                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: 2000}, 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 () {

                }
            });
        });
    })

    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>

