<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel="stylesheet" href="/lib/app/css/app.min.css">
<link rel="stylesheet" href="/lib/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="/lib/bootable/bootstrap-table.css">
<link rel="stylesheet" href="/lib/webo/css/ui.css">
<link rel="stylesheet" href="/lib/toastr/toastr.css">
<style>
    .app-content, .app-footer {
        margin-left: 0px;
    }
    .app-content {
        position: absolute;
        top: 42px;
        height: auto;
        width: 100% !important;
    }
</style>
<body>
<div class="app app-header-fixed app-aside-fixed">
    <header id="header" class="app-header navbar" role="menu">
        {{template "com/nav.tpl" .}}
    </header>
    <div id="content" class="app-content" role="main">
        <h5 class="page-header" style="margin:5px 0px"></h5>
        <ul class="breadcrumb" style="margin-bottom: 0px;">
            <li><a href="#">物料清单</a></li>
            <li><a href="#">柴油机发电机</a></li>
            <li><a href="#">物料清单结构与成本</a></li>
        </ul>
        <p class="toolbar">
            <a href="javascript:" onclick="print()" class="print btn btn-default">打印</a>
            <a href="javascript:" onclick="expansion()" class="create btn btn-default">打印展开项</a>
        </p>
        <div>
            <table id="item_table"
                   data-show-refresh="false"
                   data-show-columns="false"
                   data-show-export="false"
                   data-search="false"
                   data-page-size="100"
                   data-row-style="rowStyleOvertime"
                   data-filter-control="true"
                   data-query-params="queryParams"
                   data-show-footer="true"
                   data-toolbar=".toolbar">
                <thead>
                <tr>
                    <th data-field="action"
                        data-align="center"
                        data-formatter="actionFormatter"
                        data-events="actionEvents"
                        data-sortable="false"
                        data-width="10px"> [ 操作 ]
                    </th>
                    <th data-field="name" data-filter-control="input" data-sortable="false">产品名称</th>
                    <th data-field="username" data-filter-control="input" data-sortable="false">品牌</th>
                    <th data-field="role" data-filter-control="input" data-sortable="false">型号</th>
                    <th data-field="1" data-filter-control="input" data-sortable="false">单位</th>
                    <th data-field="2" data-filter-control="input" data-sortable="false">数量</th>
                    <th data-field="3" data-filter-control="input" data-sortable="false">备注</th>
                    <th data-field="4" data-filter-control="input" data-sortable="false">成本</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <!-- /content -->
</div>
<div id="print_div" style="display: none;">
    <table id="print_table" border="1" width="718" style="TABLE-LAYOUT:fixed;WORD-BREAK:break-all">
        <thead>
        <tr>
            <td width="89.5" align="center">产品名称</td>
            <td width="89.5" align="center">品牌</td>
            <td width="89.5" align="center">型号</td>
            <td width="89.5" align="center">单位</td>
            <td width="89.5" align="center">数量</td>
            <td width="89.5" align="center">备注</td>
        </tr>
        </thead>
        <tbody id="print_tbody">
        </tbody>
    </table>
</div>
<div id="expansion_div" style="display: none;">
    <table id="expansion_table" border="1" width="718" style="TABLE-LAYOUT:fixed;WORD-BREAK:break-all">
        <thead>
        <tr>
            <td width="89.5" align="center">产品名称</td>
            <td width="89.5" align="center">品牌</td>
            <td width="89.5" align="center">型号</td>
            <td width="89.5" align="center">单位</td>
            <td width="89.5" align="center">数量</td>
            <td width="89.5" align="center">备注</td>
            <td width="89.5" align="center">成本</td>
        </tr>
        </thead>
        <tbody id="expansion_tbody">
        </tbody>
    </table>
</div>
<script src="/lib/app/js/app.min.js"></script>
<script src="/lib/bootable/bootstrap-table.js"></script>
<script src="/lib/webo/js/ui.js"></script>
<script src="/lib/toastr/toastr.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/webo/js/validate.js"></script>
<script src="/lib/jquery/jqprint/jquery.jqprint.js"></script>
<script>
    var $table = $("#item_table");
    $(function () {
        $table.bootstrapTable({
            url: "/product/item/list",
            method: "post",
            sidePagination: "server",
            pagination: true,
            height: getTableHeight(),
        });
        $("#add_item").on("click", function () {
        });
        $(window).resize(function () {
            $table.bootstrapTable('resetView', {
                height: getTableHeight()
            });
        });
    });
    function getTableHeight() {
        return 800;
        var window_height = $(window).height();
        var obj_off_y = $(".fit-body").offset().top();
        var result_height = window_height - obj_off_y;
        return result_height;
    }
    function refreshContent(options) {
        $table.bootstrapTable("refresh")
    }
    function actionFormatter(value, row) {
        str ='';
        return str
    }
    window.actionEvents = {
        'click .update': function (e, value, row) {
        },
    };
    function print() {
        rows = $table.bootstrapTable("getData");
        printTable = $("#print_table");
        printTbody = $("#print_tbody");
        trs = [];
        for (i in rows) {
            var row = rows[i];
            tr = wbSprintf('<tr> ' +
                '<td height="30" align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' ,
               row.gtype, row.gsmodel, "台", "1",row.num,row.emodel);
            trs.push(tr)
        }
        printTbody.html(trs.join(''));
        printTable.jqprint({operaSupport: false})
    }
    function expansion() {
        rows = $table.bootstrapTable("getData");
        expansionTable = $("#expansion_table");
        expansionTbody = $("#expansion_tbody");
        trs = [];
        for (i in rows) {
            var row = rows[i];
            tr = wbSprintf('<tr> ' +
                '<td height="30" align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' +
                ' <td align="center">%s</td>' ,
               row.gtype, row.gsmodel, "台", "1",row.num,row.emodel,row.emodel);
            trs.push(tr)
        }
        expansionTbody.html(trs.join(''));
        expansionTable.jqprint({operaSupport: false})
    }
</script>
</body>
</html>