<!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>
            <form class="layui-form" action="" lay-filter="component-form-element">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-xs6 layui-col-sm4">
                        <label class="layui-form-label"><font color='red' size="4">*</font>供应商：</label>
                        <div class="layui-input-block">
                            <select id="id_supplier" name="supplier" lay-verify="required" lay-search>
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                </div>
            <div class="layui-row layui-col-space10">
                <div id="materialDataTable" style="width: 48%; display:inline-block;">
				    <table id="material_layTable" lay-filter="material_layTable" class="layui-hide"></table>
			    </div>
                <div id="new_materialDataTable" style="width: 48%; display:inline-block;">
                    <table id="new_material_layTable" lay-filter="new_material_layTable" class="layui-hide"></table>
                </div>
            </div>
                <button class="layui-btn" id="material-godownentry-submit" lay-submit lay-filter="component-form-element" style="display: none">确定</button>
        </form>
        </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', 'utils', 'table', 'laydate'], function() {
    var $ = layui.$;
    var utils = layui.utils;
    var admin = layui.admin;
    var form = layui.form;
    var table = layui.table;
    var id = layui.view.getParameterByName('id');

    var supplier_isload = false;
    var data_isload = false;

    admin.req({
        url: '/supplier/supplier/select/?type=0',
        done: function (res) {
            var data = res.data;
            var supplier_node = $('#id_supplier');
            for (var i in data) {
                var pid = data[i].id;
                var value = data[i].value;
                supplier_node.append("<option value='" + pid + "'>" + value + "</option>");
            }
            form.render();
            supplier_isload = true;
            loadData(); // 赋值完成后调用传值
        }
    });



       var loadData = function () {
        if (!supplier_isload) { // 要等下拉框渲染完成后才能赋值
            return;
        }
        if (data_isload) {
            return;
        }
        data_isload = true;

        if (id) {
            var data = JSON.parse(JSON.stringify(parent.layui.table.editdata));
            form.val("component-form-element", data);
            admin.req({
                url: '/purchase/godownentry/detail/?id=' + id,
                done: function (res) {
                    var items_data = res.data.items_data;
                    var roldData = table.cache[material_layTable];

                    for (var i in items_data) {
                        var newRow = {
                            id: items_data[i].product_base_id,
                            name: items_data[i].product_base_name,
                            model: items_data[i].product_base_model,
                            price: items_data[i].price,
                            count: items_data[i].count,
                            detail_id : items_data[i].id
                        };
                        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: true,
        limit: 1000,
        loading: true,
        even: true, //不开启隔行背景
        cols: [[
            {field: 'name', title: '原料名称', width: 140},
            {field: 'model', title: '原料代码', width: 120},
            {field: 'count', title: '数量', width: 80},
            {field: 'price', title: '单价', width: 80},
            {
                field: 'id', title: '操作', minWidth: 70, templet: function (d) {
                    return '<a class="layui-btn layui-btn-xs" lay-event="edit" lay-id="' + d.id + '"></i>修改</a>';
                }
            }
        ]],
        done: function (res, curr, count) {
            //viewObj.tbData = res.data;
        }
    });



    var new_material_tbWidth = $("#new_materialDataTable").width();
    var new_material_layTable = "new_material_layTable";
    var new_material_tableIns = table.render({
        elem: '#new_material_layTable',
        id: new_material_layTable,
        data: [],
        width: new_material_tbWidth,
        page: false,
        limit: 1000,
        loading: true,
        even: true, //不开启隔行背景
        cols: [[
            {field: 'new_name', title: '原料名称', width: 130},
            {field: 'new_model', title: '原料代码', width: 100},
            {field: 'new_count', title: '数量', width: 95, templet: function (d) {

                    return '<input id="new_count' + d.new_id + '" value="' + d.new_count + '" type="text" lay-verify="required|numberGtZ" autocomplete="off" class="layui-input">';

                }},
            {field: 'new_price', title: '单价', width: 95, templet: function (d) {

                    return '<input id="new_price' + d.new_id + '" value="' + d.new_price + '" type="text" lay-verify="required|numberGeZ" autocomplete="off" class="layui-input">';

                }},
            {
                field: 'new_id', title: '操作', minWidth: 70, templet: function (d) {
                    return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.new_id + '">删除</a>';
                }
            }
        ]],
        done: function (res, curr, count) {
            //viewObj.tbData = res.data;
        }
    });

    table.on('tool(material_layTable)', function (obj) {
        var data = obj.data;
        var event = obj.event;
        switch (event) {
            case "edit":
                var oldData = getMaterialData();
                var is_exit = false;
                for (var m in oldData) {
                    if (oldData[m].new_id == data.id) {
                        is_exit = true;
                        break;
                    }
                }
                if (is_exit) {
                    break;
                }
                var newRow = {
                    new_id: data.id,
                    new_name: data.name,
                    new_model: data.model,
                    new_price: data.price,
                    new_count: data.count,
                    new_detail_id: data.detail_id
                };
                oldData.push(newRow);
                new_material_tableIns.reload({
                    data: oldData
                });
        }
    });

    table.on('tool(new_material_layTable)', function (obj) {
        var data = obj.data;
        var event = obj.event;
        switch (event) {
            case "del":
                obj.del();
                layer.msg('删除成功', {icon: 6});
                break;
        }
    });




    var getMaterialData = function () {
        var rows = table.cache[new_material_layTable];
        var data = [];
        for (var n in rows) {
            if (rows[n] == false) {
                continue;
            }
            var count = $('#new_count'+rows[n].new_id).val();
            var price = $('#new_price'+rows[n].new_id).val();
            var item = {
                new_id: rows[n].new_id,
                new_name: rows[n].new_name,
                new_model: rows[n].new_model,
                new_detail_id: rows[n].new_detail_id,
                new_count: count,
                new_price: price
            };
            data.push(item);
        }
        return data;
    };
    form.on('submit(component-form-element)', function (data) {
        var items = getMaterialData();
        if (items.length == 0) {
            layer.msg('未修改明细！', {icon: 5});
            return false;
        }
        admin.req({
            url: '/purchase/godownentry/senior_edit/?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-godownentry-submit").click();
    };

})
  </script>
</body>
</html>