<!DOCTYPE html>
<html>
<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/bootable/bootstrap-table.css">
    <link rel="stylesheet" href="/lib/jquery/datetimepicker/jquery.datetimepicker.css">
    <link rel="stylesheet" href="/lib/webo/css/ui.css">
    <link rel="stylesheet" href="/static/css/grid.css">
    <style>
        .input-block-level{
            border-bottom: 1px solid #666666;
        }
        .form-control{
            border-top-style: none;
            border-right-style: none;
            border-left-style: none;
        }
        @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;
        }
    </style>
</head>
<body>
<div class="container-fluid" style="padding-left: 0">
    <header id="header" class="app-header navbar" role="menu">
        {{template "com/nav.tpl" .}}
    </header>
    <div id="container">
        <div class="grid grid-1">
            <p class="toolbar" style="margin:0;padding-left:10px">
                <a id="add_item" class="btn btn-primary" href="/product/ui/list" style="border-color: #00A09D;background-color: #00A09D">保存</a>
                <a class="btn btn-default" href="/product/ui/list">取消</a>
            </p>
        </div>
        <div class="grid grid-2" style="padding-left: 15px;padding-top: 5px">
            <div style="margin: 10px 15px auto auto;background-color: white">
                <div class="ti" style="border-bottom: 1px solid #D4D4D4;height: 50px;line-height: 50px">
                    <a style="padding-left:10px;padding-right:10px;border-left:1px solid #D4D4D4"><i class="glyphicon glyphicon-align-justify" ></i></a>
                    <a style="padding-right:40px">结构&成本</a>
                    <a style="padding-left:10px;padding-right:10px;border-left:1px solid #D4D4D4"><i class="glyphicon glyphicon-briefcase"></i></a>
                    <a style="padding-right:40px;color:#33B36E">有效</a>
                </div>
                <div class="row">
                    <div class="con col-md-6">
                        <div class="grids grids-1"></div>
                        <div class="grids grids-2">类型</div>
                        <div class="grids grids-3">
                            <select class="input-block-level form-control"
                                    data-validate="{required: true, messages:{required:'请输入类型'}}" name="type"
                                    id="type" autocomplete="off" value="" style="padding-top:0;padding-bottom:0;height: 21px;padding-left: 0">
                                <option value="" data-wb-a-flag="no"></option>
                                <option value="机组" data-wb-a-flag="no">机组</option>
                                <option value="喷雾机" data-wb-a-flag="no">喷雾机</option>
                            </select>
                        </div>
                        <div class="grids grids-4"></div>
                        <div class="grids grids-5"><a class="glyphicon glyphicon-edit"></a></div>
                        <div class="grids grids-1"></div>
                        <div class="grids grids-2" style="height: 21px;line-height: 21px">数量</div>
                        <div class="grids grids-3">
                            <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="padding-top:0;padding-bottom:0;height: 21px;padding-left: 0"/>
                        </div>
                        <div class="grids grids-4"></div>
                        <div class="grids grids-5"></div>
                    </div>
                    <div class="con col-md-6">
                        <div class="grids grids-1"></div>
                        <div class="grids grids-2 ">数量</div>
                        <div class="grids grids-3">
                            <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="padding-top:0;padding-bottom:0;height: 21px;padding-left: 0"/>
                        </div>
                        <div class="grids grids-4"></div>
                        <div class="grids grids-5"></div>

                        <div class="grids grids-1"></div>
                        <div class="grids grids-2 ">BOM类型</div>
                        <div class="grids grids-3">
                            <div class="form-group">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">制作此产品
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">套件
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="grids grids-4"></div>
                        <div class="grids grids-5"></div>
                    </div>
                </div>
                <div style="clear:both"></div>
                <ul id="myTab" class="nav nav-tabs" style="padding-left:20px;width: 500px;margin: 20px 0">
                    <li class="active"><a href="#info" data-toggle="tab">组件</a></li>
                    <li><a href="#comprar" data-toggle="tab">杂项</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" 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="comprar">
                        <div class="row">
                            <div class="con col-md-6">
                                <div class="grids grids-1"></div>
                                <div class="grids grids-2 ">序号</div>
                                <div class="grids grids-3">
                                    <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="margin: 6px 0 0 0;height: 21px;padding-left: 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>

                                <div class="grids grids-1"></div>
                                <div class="grids grids-2 ">版本</div>
                                <div class="grids grids-3">
                                    <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="margin: 6px 0 0 0;height: 21px;padding-left: 0"/>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                            </div>
                            <div class="con col-md-6">
                                <div class="grids grids-1"></div>
                                <div class="grids grids-2 ">制造准备就绪</div>
                                <div class="grids grids-3">
                                    <select class="input-block-level form-control"
                                            data-validate="{required: true, messages:{required:'请输入类型'}}" name="type"
                                            id="type" autocomplete="off" value="" style="padding-top:0;padding-bottom:0;height: 21px;padding-left: 0">
                                        <option value="" data-wb-a-flag="no"></option>
                                        <option value="机组" data-wb-a-flag="no">机组</option>
                                        <option value="喷雾机" data-wb-a-flag="no">喷雾机</option>
                                    </select>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                                <div class="grids grids-1"></div>
                                <div class="grids grids-2 ">操作</div>
                                <div class="grids grids-3">
                                    <select class="input-block-level form-control"
                                            data-validate="{required: true, messages:{required:'请输入类型'}}" name="type"
                                            id="type" autocomplete="off" value="">
                                        <option value="" data-wb-a-flag="no"></option>
                                        <option value="机组" data-wb-a-flag="no">机组</option>
                                        <option value="喷雾机" data-wb-a-flag="no">喷雾机</option>
                                    </select>
                                </div>
                                <div class="grids grids-4"></div>
                                <div class="grids grids-5"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid grid-3">
            <div class="flex">
                <a class="flex1">发送消息</a>
                <a class="flex1">记录备注</a>
                <a class="flex1"></a>
                <a class="flex1"></a>
                <a class="flex1"></a>
                <a class="flex2"><i class="glyphicon glyphicon-tags"></i>0</a>
                <a class="flex2"><i class="glyphicon glyphicon-ok"></i>正在关注中</a>
                <a class="flex2"><i class="glyphicon glyphicon-bell"></i></a>
                <a class="flex2"><i class="glyphicon glyphicon-user"></i>1</a>
                <a class="flex2"><i class="glyphicon glyphicon-chevron-down"></i></a>
            </div>
            <div class="form-group">
                <div class="separator">
                    <span class="date">今日</span>
                </div>
                <div>
                    <div class="list">
                        <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>
<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/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 src="/lib/webo/js/validate.js"></script>
<script src="/lib/webo/js/validateExtend.js"></script>
<script src="/lib/webo/js/ui.js"></script>
<script>
    var $form = $("#item_form");
    var $ItemTable = $("#item_table");
    var $modelsTable = $("#models_table");

    function showResponse(resp) {
        if (resp.ret == "success") {
            refreshContent()
        } else {
            showError("添加失败!")
        }
    }
    var refreshContent;
    function onTopModalOk(options) {
        if (options.refreshContent) {
            refreshContent = options.refreshContent
        }
        if (!$form.valid()) {
            return
        }
        $form.ajaxSubmit({
            type: "post",
            url: "{{.UrlService}}",
            success: 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: 'type',
                    title: '产品名称',
                    width: 100,
                    align:'left',
                    sortable: false,
                    editable: {
                        type: 'text'
                    }
                },{
                    field: 'num',
                    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: '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,
                type:"",
                num:"1"
            });
        })
    });
</script>
</body>
</html>