<!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 #312f2f;
            border-radius:0;
        }

        @media (min-width: 768px) {
            .navbar {
                min-height: 40px
            }
            .navbar-nav > li > a {
                font-size: 14px;
                padding-top: 11px;
                padding-bottom: 11px
            }
        }
        .col-md-6{
           padding:15px;
        }

        .top{
            display: grid;
            grid-template-columns: auto;
            background: #fff;
        }

        .btn-default{
            color:#fff;
        }
        .width{
            width: 20%;
            float: left;
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px
        }
    </style>
</head>
<body>
<form id="item_form">
<div class="container-fluid" style="padding-left: 0;padding-right: 0">
    <header id="header" class="app-header navbar" role="menu">
        {{template "com/stocktop.tpl" .}}
    </header>
    <div id="container">
        <div class="grid grid-1">
            <div style="padding: 10px 15px;font-size: 25px">
                <a href="/stock/ui/prestore" style="color: #00a09d">库存概览</a>/<a style="color:grey">入库/{{.number}}</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" href="/stock/ui/prestore" style="border-color:white;padding: 4px 8px;color: #00a09d">取消</a>
                </p>
            </div>
            <div style="background-color: white;margin: 15px 15px 0;">
                <div class="row" style="background-color: white;height: 34px;margin:auto;">
                    <p class="toolbar" style="margin:2px 0 2px 30px">
                        <a id="verification" class="btn" style="border-color:white;padding: 4px 8px;color: #00a09d">验证</a>
                        <a class="btn" href="#" style="border-color:white;padding: 4px;color: #00a09d">打印</a>
                    </p>
                </div>
                <div class="row" style="margin:0 auto">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="top top-1" style="font-size: x-large">{{.number}}</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label width" >供应商</label>
                            <div class="col-sm-7">
                                无锡星诺电气有限公司
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="width control-label">入库时间</label>
                            <div class="col-sm-7">
                                2020年03月19日11时04分26秒
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="width control-label">作业类型</label>
                            <div class="col-sm-7">
                                入库
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="width control-label">源单据</label>
                            <div class="col-sm-7">
                                01111
                            </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>
                </ul>
                <div>
                    <table id="item_table" data-undefined-text='-'></table>
                </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"
                                  name="recordnotes" id="recordnotes" autocomplete="off" placeholder="写些什么..."
                                  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-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 20px;">
                            <p>
                                <strong>lt</strong>-<small title="2019年04月01日 13时31分34秒">3 分钟前</small>
                            </p>
                            <div><p>此入库已经创造来自：P00001</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-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 20px;">
                            <p>
                                <strong>lt</strong>-<small title="2019年04月01日 13时31分34秒">10 分钟前</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-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 20px;">
                            <p>
                                <strong>gj</strong>-<small title="2019年04月01日 13时31分34秒">15 分钟前</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-10" style="padding-left: 0">
                        <div style="padding: 10px 10px 10px 20px;">
                            <p>
                                <strong>zyy</strong>-<small title="2019年04月01日 13时31分34秒">30 分钟前</small>
                            </p>
                            <div><p>入库创造</p></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
<div id="qianModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">创建欠单？</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal padder-md" id="AgreeForm" enctype="multipart/form-data">
                    <div class="form-group">
                        <label class="control-label">你已经处理了初始需求的部分产品。</label><br/>
                        <label class="control-label">如果后续要发货余下的数量，则需要建立一个欠单。</label><br/>
                        <label class="control-label">如果不需要发货后续数量，则不用建立欠单，处理余下的产品。</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btnBill" type="button" class="btn btn-primary">创建欠单</button>
                <button id="btn" type="button" class="btn btn-info" data-dismiss="modal">没有欠单</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="hid" value="0">
<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 $ItemTable = $("#item_table");

    $(function () {
        $ItemTable.bootstrapTable({
            url: "/item/list/prestore?number="+{{.number}},
            method: "get",
            ordering: false,
            silentSort: true,
            sidePagination: "server",
            pagination: false,
            fixedColumns: true,
            fixedNumber: 1,
            striped: false,
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            showFooter: false,
            columns: [
                {
                    field: 'id',
                    title: '序号',
                    visible:false,
                    width: 10
                },
                {
                    field: 'product',
                    title: '产品展示',
                    width: 100,
                    align:'center',
                    sortable: false,
                },{
                    field: 'explain',
                    title: '说明',
                    width: 100,
                    align:'center',
                    sortable: false,
                },{
                    field: 'unit',
                    title: '单位',
                    width: 100,
                    align:'center',
                    sortable: false,
                },{
                    field: 'num',
                    title: '需求数量',
                    width: 100,
                    align:'center',
                    sortable: false,
                    editable: {
                        type: 'text',
                    },
                },{
                    field: 'complete',
                    title: '完成',
                    width: 100,
                    align:'center',
                    sortable: false,
                    editable: {
                        type: 'text',
                    },
                }
            ]
        });
    });

    $("#verification").off("click").on("click", function () {
        $('#qianModel').modal({backdrop:"static"});
        $("#btnBill").off("click").on("click", function () {
            $("#hid").val(1)
            $('#qianModel').modal("hide");
        })
    })
</script>
</body>
</html>