<!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">
  <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>
<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">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                                <label class="layui-form-label"><font color='red' size="4">*</font>名称：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" lay-verify="required" autocomplete="off" id="name" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                                <label class="layui-form-label">需求人：</label>
                                <div class="layui-input-block">
                                    <select id="id_demend_user" name="demend_user" lay-filter="demend_user">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                                <label class="layui-form-label">需求部门：</label>
                                <div class="layui-input-block" id="id_demend_department" style="line-height: 36px;">
                                </div>
                            </div>

                        </div>
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-sm10">
                                <label class="layui-form-label">备注：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="notes" autocomplete="off" id="notes" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>产品明细&nbsp;&nbsp;<button type="button" id="product-btn-add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button></legend>
                        </fieldset>

                        <div class="table-overlay">
                            <table id="product_data_table" lay-filter="product_data_table" class="layui-hide"></table>
                        </div>

                        <button class="layui-btn" id="submit_btn" lay-submit lay-filter="component-form-element" style="display: none">确定</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script>
var  _Quality_request = [];
var _user = [];

layui.config({
    base: '../../../layuiadmin/', //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'utils', 'form', 'table', 'laydate'], function() {
    var $ = layui.$;
    var utils = layui.utils;
    var laydate = layui.laydate;
    var admin = layui.admin;
    var form = layui.form;
    var table = layui.table;
    var id = layui.view.getParameterByName('id');
    var is_userload = false;
    var is_optionload = false;
    admin.req({
      url: '/foundation/search_options/?type=4',
      done: function (res) {
        _Quality_request = res.data;
        is_optionload = true;
        loaddata()
      }
    });
    admin.req({
            url: '/plan/plan/options/',
            done: function(res){
                var users = res.data.users;
                _user = users;
                var demend_user_node = $('#id_demend_user');
                if (!id){
                for (var i in users) {
                    var uid = users[i].id;
                    var value = users[i].name;
                    demend_user_node.append("<option value='"+uid+"'>"+value+"</option>");
                }
                }
                form.render();
                is_userload = true;
                loaddata()
            }
        });
    var loaddata = function () {
        if (!(is_userload&&is_optionload)){
            return;
        };
            if (id) {
            admin.req({
                url: '/purchase/purchase/detail/?id=' + id,
                done: function (res) {
                    var production_items = res.data.purchase;
                    var product_items = res.data.product_items;
                    for (var p in production_items) {
                        $('#name').val(production_items[p].name);
                        $('#notes').val(production_items[p].notes);
                        for (var i in _user){
                            var uid = _user[i].id;
                            var value = _user[i].name;
                            if (production_items[p].demend_user_id == uid){
                                $('#id_demend_user').append("<option value='"+uid+"'selected >"+value+"</option>");
                                $('#id_demend_department').html(_user[i].department_name);
                            }else{
                                $('#id_demend_user').append("<option value='"+uid+"'>"+value+"</option>");
                            }
                        };
                        form.render();
                    }
                    var productData = table.cache[product_data_table];
                    for (var i in product_items) {
                        var newRow = {
                            id: product_items[i].product_id,
                            name: product_items[i].name,
                            model: product_items[i].model,
                            unit: product_items[i].unit,
                            quality_request: product_items[i].quality_request_text,
                            notes: product_items[i].notes,
                            count: product_items[i].purchase_count,
                            product_time: product_items[i].product_time
                        };
                        productData.push(newRow);

                    }

                    product_tableIns.reload({
                        data: productData
                    })
                }
            })

        }
    };
    var product_data_table = "product_data_table";
    var product_tableIns = table.render({
        elem: '#product_data_table',
        id: product_data_table,
        data: [],
        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: 100},
            {field: 'quality_request', title: '质量要求', width: 170, templet: function (d) {
                    return '<input id="quality_request'+d.id+'" type="text" value="'+d.quality_request+'" autocomplete="off" class="layui-input">';
                }
            },
            {field: 'count', title: '数量', width: 100, templet: function (d){
            return '<input id="count'+d.id+'" type="text" value="'+d.count+'" lay-verify="required|numberGtZ" autocomplete="off" class="layui-input">';
            }},
            {field: 'product_time', title: '需求时间', width: 180, event:'chooseDate', templet:function(d){
            return '<input id="product_time'+d.id+'" type="text" autocomplete="off" lay-verify="datetime" class="layui-input" value="'+d.product_time+'">';
            }},
            {field: 'notes', title: '备注', width: 170, templet: function (d) {
                    return '<input id="notes'+d.id+'" type="text" value="'+d.notes+'" autocomplete="off" class="layui-input">';
                }
            },
            {
                field: 'id', title: '操作', minWidth: 120, templet: function (d) {
                    return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>';
                }
            }
        ]]
        ,done: function () {
                layui.index.removeNoPermButtons();
            }
    });
    //监听工具条
    table.on('tool(product_data_table)', function (obj) {
        var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
        switch (event) {
            case "chooseDate":
                laydate.render({
                    elem: '#product_time'+data.id,
                    trigger:"click",
                    type:'datetime',
                    show:true,
                    closeStop:'#product_time'+data.id
                });
                break;
            case "del":
                obj.del();
                layer.msg('删除成功', {icon: 6});
                break;
        }
    });
    var getproductData = function () {
        var rows = table.cache[product_data_table];
        var data = [];
        for (var n in rows) {
            if (rows[n] == false) {
                continue;
            }

            var quality_request = $('#quality_request'+rows[n].id).val();
            var notes = $('#notes'+rows[n].id).val();
            var count = $('#count'+rows[n].id).val();
            var product_time = $('#product_time'+rows[n].id).val();


            var item = {
                id: rows[n].id,
                name: rows[n].name,
                model: rows[n].model,
                unit: rows[n].unit,
                count: rows[n].count,
                quality_request_text: quality_request,
                notes: notes,
                purchase_count: count,
                product_time:product_time
            };
            data.push(item);
        }
        return data;
    };
    form.on('submit(component-form-element)', function (data) {
        var items = getproductData();
        if (items.length == 0) {
            layer.msg('请添加产品！', {icon: 5});
            return false;
        }
        admin.req({
            url: '/purchase/purchase/save/?id=' + id
            , data: {purchase: JSON.stringify(data.field), items: JSON.stringify(items)}
            , type: 'post'
            , done: function (res) {
                parent.layui.onSubmitChild();
            }
        });
        return false;
    });

    form.on('select(demend_user)', function (data) {
        var department_name = '';
        for (var i in _user) {
            if (_user[i].id == data.value) {
                department_name = _user[i].department_name;
                break;
            }
        }
        $('#id_demend_department').html(department_name);
    });

    parent.layui.submitChild = function () {
      $("#submit_btn").click();
    };
    $('#product-btn-add').on('click', function () {
        layer.open({
            type: 2,
            title: '添加产品',
            area: ['90%', '98%'],
            btn: ['确定', '取消'],
            yes: function (index, layero) {
               layui.onSubmitChild = function (data) {
                  var olddata = getproductData();
                  if (data.length > 0) {
                        layer.msg('添加成功！', {icon: 6});
                   } else {
                        layer.msg('请先选择记录！');
                    }
                  for (var i in data){
                      var is_exit = false;
                       for (var m in olddata){
                      if(olddata[m].id == data[i].id){
                          is_exit = true;
                          break;
                      }
                  }
                      if(is_exit){
                          continue;
                      }
                      var newRow = {
                        id: data[i].id,
                        name: data[i].name,
                        model: data[i].model,
                        unit: data[i].unit,
                        quality_request: '',
                        notes: '',
                        count: '',
                        product_time:''
                    };
                      olddata.push(newRow);
                  }
                    product_tableIns.reload({
                        data: olddata
                    });
                };
                layui.submitChild();
            },
            btn2: function (index, layero) {
                layer.close(index);//关闭当前按钮
            },
            content: '../purchase/search_purchase_product.html'
        });
    });
})
  </script>
</body>
</html>