<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <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">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../jquery-easyui-1.5.2/themes/icon.css" type="text/css">
   <style type="text/css">
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-header,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body{overflow: visible;}
        .table-overlay .layui-table-cell{height: auto; overflow: visible;}
    </style>
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" pad15>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
            <form class="layui-form" action="" lay-filter="component-form-element">
           <table class="layui-table" >
              <tbody>
                <tr>
                  <td width="100px" align="right">出库单号：</td>
                  <td class="cell" id="no" colspan="3"></td>
                </tr>
                <tr>
                  <td align="right">创建人：</td>
                  <td class="cell" id="create_user_name"></td>
                  <td align="right">创建时间：</td>
                  <td class="cell" id="create_time"></td>
                </tr>
                <tr>
                  <td align="right">仓别：</td>
                  <td class="cell" id="warehouse_name"></td>
                  <td align="right">领料人：</td>
                  <td class="cell" id="receiver_name"></td>
                </tr>
                <tr>
                  <td align="right">出库数量：</td>
                  <td class="cell" id="total_count"></td>
                  <td align="right">出库成本：</td>
                  <td class="cell" id="total_cost"></td>
                </tr>
                  <tr>
                      <td align="right">理由：</td>
                      <td class="cell" id="reason_text" colspan="3"><input id="reason" name="reason" class="layui-input" autocomplete="off"/></td>
                    </tr>
              </tbody>
            </table>
            <div class="layui-row layui-col-space10">
                <div id="materialDataTable" class="table-overlay">
				    <table id="material_layTable" lay-filter="material_layTable" class="layui-hide"></table>
			    </div>
            </div>
                <button class="layui-btn" id="material-deliver-submit" lay-submit lay-filter="component-form-element" style="display: none">确定</button>
        </form>
        </div>
        </div>
        </div>
    </div>
</div>

<script src="../../jquery-easyui-1.5.2/jquery.min.js"></script>
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
layui.config({
    base: '../../../layuiadmin/' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'form', 'table', 'utils', 'laydate'], function() {
    var $ = layui.$;
    var admin = layui.admin;
    var form = layui.form;
    var table = layui.table;
    var utils = layui.utils;
    var id = layui.view.getParameterByName('id');

    if (id) {
        admin.req({
            url: '/material/deliver_return/detail/?id=' + id,
            done: function (res) {
                var items_data = res.data.items_data;
                var main_data = res.data.main_data;
                var roldData = table.cache[material_layTable];
                $('.cell').each(function (index, element) {
                    element.innerHTML += (main_data[element.id]||'')
                });
                for (var i in items_data) {
                    var newRow = {
                        id: items_data[i].id,
                        product_base: items_data[i].product_id,
                        name: items_data[i].name,
                        model: items_data[i].model,
                        total_cost: items_data[i].total_cost,
                        count: items_data[i].count,
                        unit: items_data[i].unit,
                        cur_count: items_data[i].cur_count,
                        return_count: '',
                        notes: items_data[i].notes
                    };
                    roldData.push(newRow);
                }
                material_tableIns.reload({
                    data: roldData
                })
            }
        })

    }

    var material_tbWidth = $("#materialDataTable").width();
    var material_layTable = "material_layTable";
    var material_tableIns = table.render({
        elem: '#material_layTable',
        id: material_layTable,
        data: [],
        width: material_tbWidth,
        page: false,
        limit: 1000,
        loading: true,
        even: true, //不开启隔行背景
        cols: [[
            {title: '序号', type: 'numbers'},
            {field: 'name', title: '名称', width: 100},
            {field: 'model', title: '代码', width: 100},
            {field: 'unit', title: '单位', width: 120},
            {field: 'count', title: '数量', width: 100},
            {field: 'cur_count', title: '剩余数量', width: 100},
            {field: 'total_cost', title: '成本合计', width: 100},
            {field: 'return_count', title: '退料数量', width: 100, templet: function (d) {

                    return '<input id="return_count' + d.id + '" value="' + d.return_count + '" type="text" lay-verify="numberGeZ" autocomplete="off" class="layui-input">';
                }},
            {field: 'notes', title: '备注', minWidth: 200, templet: function (d) {

                    return '<input id="notes' + d.id + '" value="' + d.notes + '" type="text" autocomplete="off" class="layui-input">';
                }}
        ]],
        done: function (res, curr, count) {
            //viewObj.tbData = res.data;
        }
    });

    var getMaterialData = function () {
        var rows = table.cache[material_layTable];
        var data = [];
        for (var n in rows) {
            if (rows[n] == false) {
                continue;
            }
            var return_count = $('#return_count'+rows[n].id).val();
            var notes = $('#notes'+rows[n].id).val();

            return_count = return_count.trim();
            if(return_count){
                var item = {
                    product_base: rows[n].product_base,
                    deliver_detail: rows[n].id,
                    return_count: return_count,
                    notes: notes
                };
                data.push(item);
            }
        }
        return data;
    };
    form.on('submit(component-form-element)', function (data) {
        var items = getMaterialData();
        if(!items.length){
            layer.msg('请录入退料数量');
            return false;
        }
        admin.req({
            url: '/material/deliver_return/save/?type=0&id=' + id
            , data: {main: JSON.stringify(data.field), item: JSON.stringify(items)}
            , type: 'post'
            , done: function (res) {
                parent.layui.onSubmitChild(res.data);
            }
        });
        return false;
    });
    parent.layui.submitChild = function () {
      $("#material-deliver-submit").click();
    };
});
  </script>
</body>
</html>