<!DOCTYPE html>
<html style="height: 100%">
<head lang="zh">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../lib/app/css/app.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../lib/bootstrap-select/bootstrap-select.css">
    <link rel="stylesheet" href="../../lib/bootstrap-select/bootstrap-multiselect.css">
    <link rel="stylesheet" href="../../lib/jquery/datetimepicker/jquery.datetimepicker.css">
    <link rel="stylesheet" href="../../lib/jquery/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" href="../../lib/jquery/select/jquery-editable-select.min.css"><!--可编辑单选引用-->
    <link rel="stylesheet" href="../../lib/webo/css/ui.css">
    <link rel="stylesheet" href="../../static/css/addgrids.css">
    <link rel="stylesheet" href="../../lib/bootable/bootstrap-table.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <style>
        .form-control{
            border-top-style: none;
            border-right-style: none;
            border-left-style: none;
            border-bottom: 2px solid #cacaca;
            border-radius:0;
        }

        @media (min-width: 768px) {
            .navbar {
                min-height: 40px
            }
            .navbar-nav > li > a {
                font-size: 14px;
                padding-top: 11px;
                padding-bottom: 11px
            }
            .navbar-brand {
                padding-top: 0;
                padding-bottom: 0;
                line-height: 42px;
                height: 42px
            }
        }
        .ti{
            display: flex;
            justify-content: flex-end;
            margin-bottom: 5px;
        }
        .col-md-6{
           padding:15px;
        }
        .grids-1{
            padding-left:5px;
            padding-top:5px;
        }
        .grids-2,.grids-4{
            padding-top:4px
        }
        .con{
            padding-top: 10px;
        }
        .top{
            display: grid;
            grid-template-columns: auto;
            background: #fff;
            padding-left:20px;
        }
        .top-3,.top-4{
            height: 24.5px;
        }
        .btn-default{
            color:#fff;
        }
    </style>
</head>
<body>
<form id="item_form">
<div class="container-fluid" style="padding-left: 0;padding-right: 0">
    {{str2html .Form_sn}}
    <header id="header" class="app-header navbar" role="menu">
        {{template "com/nav.tpl" .}}
    </header>
    <div id="container">
        <div class="grid grid-1">
            <div style="padding: 10px 15px;font-size: 25px">
                <a href="/product/ui/list" style="color: #00a09d">产品</a>/<a style="color: #8f8f8f">新建</a>
            </div>
        </div>
        <div class="grid grid-2">
            <div class="row" style="background-color: white;height: 34px;margin-right: 15px;">
                <p class="toolbar" style="margin:2px 0 2px 30px">
                    <a id="add_item" class="btn btn-default" style="background-color:#00a09d;border-color:#00a09d;padding: 4px 8px">保存</a>
                    <a class="btn btn-default" href="/product/ui/list" style="background-color:white;border-color:white;padding: 4px 8px">取消</a>
                </p>
            </div>
            <style>
                .icoo{
                    margin:0 auto;
                    text-align: center;
                    height: 50px;
                    /*line-height: 50px;*/
                    width: 12.5%;
                    padding-top: 10px;
                    border: 1px solid #e5e5e5;
                }
            </style>
            <div style="background-color: white;margin: 15px 15px 0;">
                <div class="row" style="margin:0 auto;height: 50px">
                    <div class="icoo col-md-1 col-sm-2 col-xs-2">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-cubes"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>在手
                            </div>
                        </div>
                    </div>
                    <div class="icoo col-md-1 col-sm-1 col-xs-1">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-cubes"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>待出库
                           </div>
                        </div>
                    </div>
                    <div class="icoo col-md-1 col-sm-1 col-xs-1">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-cubes"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>已下单
                           </div>
                        </div>
                    </div>
                    <div class="icoo col-md-1 col-sm-1 col-xs-1">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-cubes"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>生产中
                           </div>
                        </div>
                    </div>
                    <div class="icoo col-md-1 col-sm-1 col-xs-1">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-signal"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>已售
                           </div>
                        </div>
                    </div>
                    <div class="icoo col-md-1 col-sm-1 col-xs-1">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-refresh"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>订货规则
                           </div>
                        </div>
                    </div>
                    <div class="icoo col-md-1 col-sm-1 col-xs-1">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-flask"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>物料清单
                           </div>
                        </div>
                    </div>
                    <div class="icoo col-md-1 col-sm-1 col-xs-1">
                        <div class="row">
                            <div class="col-md-4">
                                <i class="fa fa-fw fa-2x o_button_icon fa-shopping-cart"></i>
                            </div>
                           <div class="col-md-6" style="padding: 0">
                               0.00件<br>已采购
                           </div>
                        </div>
                    </div>


                </div>
                <div class="row" style="margin:0 auto">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="top top-1">产品名称</div>
                        <div class="top top-2">
                            <input type="text" class="input-block-level form-control" name="name" id="name" autocomplete="off" value=""
                                   data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                   style="font-size:30px;padding-top:0;padding-bottom:0;height: 42px;padding-left: 0;" placeholder="产品名称"/>
                        </div>
                        <div class="top top-3">
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">销售
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="top top-4">
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">采购
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear:both"></div>
                <ul id="myTab" class="nav nav-tabs" style="padding-left:15px;width: auto;margin: 10px 0">
                    <li class="active"><a href="#comprar" data-toggle="tab" style="padding: 5px">一般信息</a></li>
                    <li><a href="#info" data-toggle="tab" style="padding: 5px">采购</a></li>
                    <li><a href="#stock" data-toggle="tab" style="padding: 5px">库存</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="comprar">
                        <div class="row" style="margin:0 auto">
                            <div class="con col-md-6 col-sm-6 col-xs-6">
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">产品类型</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="type" id="type" autocomplete="off" value=""
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0;"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">产品类别</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="specification" id="specification" autocomplete="off" value=""
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0;"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">内部编号</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="model" id="model" autocomplete="off" value=""
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">条形码</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="unit" id="unit" autocomplete="off" value=""
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                            </div>
                            <div class="con col-md-6 col-sm-6 col-xs-6">
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">售价</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="brand" id="brand" autocomplete="off" value=""
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">销项税</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="sellingprice" id="sellingprice" autocomplete="off" value="0.0"
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">成本价格</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="costprice" id="costprice" autocomplete="off" value="0.0"
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                                <div class="grids grids-1"><span style='color:red'>*</span></div>
                                <div class="grids grids-2 ">计量单位</div>
                                <div class="grids grids-3">
                                    <input type="text" class="input-block-level form-control" name="costprice" id="costprice" autocomplete="off" value="0.0"
                                           data-validate="{required: false, number:false,  messages:{required:'请输入'}}"
                                           style="margin: 0 0 5px 0;height: 22px;padding: 1px 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                            </div>
                        </div>
                        <div class="row" style="margin:0 auto">
                            <div class="col-md-12 col-sm-6 col-xs-6">
                                <div class="top top-1" style="margin: 5px 0">内部备注</div>
                                <div class="top top-2">
                                    <textarea class="form-control" rows="5" class="input-block-level form-control"
                                          data-validate="{required: true, messages:{required:'请输入生产特殊要求!'}}"
                                          name="internalnote" id="internalnote" autocomplete="off" value=""
                                              style="border: 1px solid #ccc;overflow-y: hidden; height: auto; resize: none;margin-bottom: 20px;"
                                              >
                                    </textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="info">
                        <div class="row">
                            <div class="col-md-12">
                                <table id="item_table" data-undefined-text='-'></table>
                            </div>
                            <div class="col-md-3">
                                <div style="margin-top: 20px;margin-left: 100px;margin-bottom:20px">
                                    <div type="button" id="addcol" title="添加一行" style="color: #169BD5" accesskey="1">
                                        <a style="color: #008787">添加明细行</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="stock">
                        <div class="row" style="margin:0 auto">
                            <div class="col-md-12">&nbsp&nbsp&nbsp</div>
                            <div class="col-md-10" style="padding-left:30px">作业路线</div>

                            <div class="col-md-12" style="padding-left:60px">
                                <div class="top top-3">
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox">按订单补货
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="top top-4">
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox">制造
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="top top-4">
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox">购买
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">&nbsp&nbsp&nbsp</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="grid grid-3">
            <div class="row" style="margin:10px auto auto auto">
                <div class="col-md-12 col-sm-6 col-xs-6">
                    <div class="top top-1" style="margin: 5px 0">记录备注</div>
                    <div class="top top-2">
                        <textarea class="form-control" rows="5" class="input-block-level form-control"
                                  data-validate="{required: true, messages:{required:'请输入生产特殊要求!'}}"
                                  name="recordnotes" id="recordnotes" autocomplete="off"
                                  style="border: 1px solid #ccc;overflow-y: hidden; height: auto; resize: none;margin-bottom: 20px;">
                        </textarea>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="separator" style="margin-top: 10px;">
                    <span class="date">今日</span>
                </div>
                <div class="row" style="margin: 1px;background-color: rgba(222, 226, 230, 0.5);border-bottom: 1px solid #ced4da;">
                    <div class="col-md-2" style="padding: 20px 0 20px 20px;margin-right: -20px">
                        <a class="media-right">
                            <img src="/static/images/crm.jpg" width="36" height="36" style="border-radius:36px;"/>
                        </a>
                    </div>
                    <div class="col-md-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 5px;">
                            <p>
                                <strong>wang ming</strong>-<small title="2019年04月01日 13时31分34秒">1 小时前</small>
                            </p>
                            <div><p>刷新历史纪录...</p></div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin: 1px;background-color: rgba(222, 226, 230, 0.5);border-bottom: 1px solid #ced4da;">
                    <div class="col-md-2" style="padding: 20px 0 20px 20px;margin-right: -20px">
                        <a class="media-right">
                            <img src="/static/images/crm.jpg" width="36" height="36" style="border-radius:36px;"/>
                        </a>
                    </div>
                    <div class="col-md-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 5px;">
                            <p>
                                <strong>wang ming</strong>-<small title="2019年04月01日 13时31分34秒">1 小时前</small>
                            </p>
                            <div><p>刷新历史纪录...</p></div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin: 1px;background-color: rgba(222, 226, 230, 0.5);border-bottom: 1px solid #ced4da;">
                    <div class="col-md-2" style="padding: 20px 0 20px 20px;margin-right: -20px">
                        <a class="media-right">
                            <img src="/static/images/crm.jpg" width="36" height="36" style="border-radius:36px;"/>
                        </a>
                    </div>
                    <div class="col-md-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 5px;">
                            <p>
                                <strong>wang ming</strong>-<small title="2019年04月01日 13时31分34秒">1 小时前</small>
                            </p>
                            <div><p>刷新历史纪录...</p></div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin: 1px;background-color: rgba(222, 226, 230, 0.5);border-bottom: 1px solid #ced4da;">
                    <div class="col-md-2" style="padding: 20px 0 20px 20px;margin-right: -20px">
                        <a class="media-right">
                            <img src="/static/images/crm.jpg" width="36" height="36" style="border-radius:36px;"/>
                        </a>
                    </div>
                    <div class="col-md-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 5px;">
                            <p>
                                <strong>wang ming</strong>-<small title="2019年04月01日 13时31分34秒">1 小时前</small>
                            </p>
                            <div><p>刷新历史纪录...</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
<script src="../../lib/app/js/app.src.js"></script>
<script src="../../lib/jquery/jquery/validate/jquery.metadata.js"></script>
<script src="../../lib/jquery/jquery/jquery.form.js"></script>
<script src="../../lib/jquery/jquery-ui/jquery-ui.min.js"></script>
<script src="../../lib/jquery/select/jquery-editable-select.min.js"></script><!--可编辑单选引用-->
<script src="../../lib/bootstrap-select/bootstrap-select.js"></script>
<script src="../../lib/bootstrap-select/bootstrap-multiselect.js"></script>
<script src="../../lib/webo/js/validate.js"></script>
<script src="../../lib/webo/js/validateExtend.js"></script>
<script src="../../lib/webo/js/ui.js"></script>
<script src="../../lib/bootable/bootstrap-table.js"></script>
<script src="../../lib/bootable/extensions/editable/bootstrap-table-editable.js"></script>
<script src="../../lib/xeditable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script>
    var $form = $("#item_form");
    var $ItemTable = $("#item_table");
    function showResponse(resp) {
        if (resp.ret == "success") {
            window.location = "/product/ui/list";
        } else {
            showError("添加失败!")
        }
    }
    $("#add_item").on("click", function () {
        obj = {};
        a = $form.serializeArray();
        $.each(a, function () {
            obj[this.name] = this.value
        });
        selects = $ItemTable.bootstrapTable('getData');
        obj["productitem"] = selects;
        console.log("selects",selects)
        console.log("obj[\"productitem\"]",obj["productitem"])
        $.post(
            "/item/addsub/product",
            JSON.stringify(obj),
            showResponse
        );
    });
    function addbuyer(){
        $('#AddBuyerModel').modal({backdrop: "static"});
        $("#buttonAddBuyer").off("click").on("click", function () {
            var name = $("#name").val();
            var sn = "{{.Sn}}";
            if (name == "") {
                $("#namesHelpBlock").text("请输入单位名称！");
                return
            }
            $.ajax({
                url: "/item/add/buyer",
                type: 'post',
                data: {
                    "sn": sn,
                    "name": name
                },
                success: function () {
                    $('#AddBuyerModel').modal('hide');
                    var select = $("#buy");
                    select.append( '<option value='+sn+'>'+name+'</option>');
                    $('.selectpicker').selectpicker('val', sn);
                },
                error: function () {
                    showAlert('新建失败!', 'danger');
                }
            });
        })
    }
    $(function () {
        $ItemTable.bootstrapTable({
            url: "",
            method: "get",
            ordering: false,
            silentSort: true,
            sidePagination: "server",
            pagination: false,
            fixedColumns: true,
            fixedNumber: 1,
            striped: false,
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],
            showFooter: true,
            columns: [
                {
                    field: 'id',
                    title: '序号',
                    visible:false,
                    width: 10
                },
                {
                    field: 'supplier',
                    title: '供应商',
                    width: 100,
                    align:'left',
                    sortable: false,
                    editable: {
                        type: 'text'
                    }
                },{
                    field: 'minnum',
                    title: '最少数量',
                    width: 100,
                    align:'right',
                    sortable: false,
                    editable: {
                        type: 'text',
                        validate: function (v) {
                            if (isNaN(v)) return '数量必须是数字';
                            var number = parseInt(v);
                            if (number <= 0) return '数量必须是正整数';
                        }
                    }
                },{
                    field: 'price',
                    title: '价格',
                    width: 100,
                    align:'right',
                    sortable: false,
                    editable: {
                        type: 'text',
                        validate: function (v) {
                            if (isNaN(v)) return '数量必须是数字';
                        }
                    }
                },{
                    field: 'startdate',
                    title: '开始日期',
                    width: 100,
                    align:'right',
                    sortable: false,
                    editable: {
                        type: 'text',
                    },
                },{
                    field: 'enddate',
                    title: '结束日期',
                    width: 100,
                    align:'right',
                    sortable: false,
                    editable: {
                        type: 'text',
                    }
                },{
                    field: 'operation',
                    title: '',
                    width: 10,
                    align:'left',
                    sortable: false,
                    formatter: function (value, row, index) {
                        var d = '<a class = "remove glyphicon glyphicon-trash" href="javascript:void(0)"></a>';
                        return d
                    },
                    events: 'operateEvents'
                }
            ]
        });
        window.operateEvents = {
            'click .remove': function (e, value, row, index) {
                $ItemTable.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
                $ItemTable.bootstrapTable('load', $ItemTable.bootstrapTable("getData"));
            }
        };
        function isGxExist(sn, rows) {
            for (i in rows) {
                if (rows[i].gxsn == sn) {
                    return true;
                }
            }
            return false;
        }
        function tableHeight() {
            return 300;
            var window_height = $(window).height();
            var obj_off_y = $(".fit-body").offset().top();
            var result_height = window_height - obj_off_y;
            return result_height;
        }
        var NO = 0;
        $("#addcol").on("click", function () {
            NO += 1;
            $ItemTable.bootstrapTable("append", {
                id: NO,
                supplier:"111"+NO,
                price:"1.1",
                minnum:"1.1",
                startdate:"20190520150000",
                enddate:"20190520150000",
            });
        })
    });
</script>
</body>
</html>