@{
    string erpServer = ViewData["DsErpApiServer"].ToString();
}
<style type="text/css">
    .form-margin {
        margin-top: 10px;
        margin-bottom: 10px;
    }
</style>

<div class="ibox-content">
    <div class="row row-lg">
        <div class="bootstrap-table col-sm-12" style="overflow-x:scroll;">
            <div id="toolbar">
                <div class="form-inline" role="form">
                    <div class="form-group">
                        <span>起始会计日期: </span>
                        <input name="ACCDATE_START" id="iptACCDATE_START" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>结束会计日期: </span>
                        <input name="ACCDATE_END" id="iptACCDATE_END" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>起始开船日期: </span>
                        <input name="KaiChuanRi_START" id="iptKaiChuanRi_START" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>结束开船日期: </span>
                        <input name="KaiChuanRi_END" id="iptKaiChuanRi_END" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>起始装货时间: </span>
                        <input name="FACTRYTIME_START" id="iptFACTRYTIME_START" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>结束装货时间: </span>
                        <input name="FACTRYTIME_END" id="iptFACTRYTIME_END" class="form-control w70" type="text">
                    </div>
                    <button id="btnSearch" type="submit" class="btn btn-primary">查询</button>
                </div>
            </div>
            <div>
                `
                <table id="table"
                       data-toggle="table"
                       data-toolbar="#toolbar"
                       data-show-refresh="false"
                       data-show-toggle="false"
                       data-show-columns="true"
                       data-query-params="queryParams"
                       data-url="@Url.Action("OpSeaeReport")"
                       data-pagination="false"
                       data-side-pagination="server"
                       data-data-field="Data"
                       data-sortable="true"
                       data-sort-class="table-active"
                       data-silent-sort="false"
                       data-method="post"
                       data-detail-view="true"
                       data-detail-formatter="detailFormatter">
                    <thead>
                        <tr>
                            <th data-field="MBLNO" data-sortable="true">提单号</th>
                            <th data-field="INVNO" data-sortable="true">发票号</th>
                            <th data-field="KaiChuanRi" data-sortable="true">开船日期</th>
                            <th data-field="ACCDATE" data-sortable="true">会计日期</th>
                            <th data-field="CARGODATE" data-sortable="true">装货日期</th>
                            <th data-field="CNTRTOTAL" data-sortable="true">箱型箱量</th>
                            @*<th data-field="AMOUNT_RMB" data-sortable="true"> RMB合计</th>
                                <th data-field="AMOUNT_USD" data-sortable="true">USD合计</th>*@
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

</div>

<script>
    $(function () {
        $('#table').bootstrapTable({ height: $(window).height() - 53 });

        $("#btnSearch").click(function () {
            $('#table').bootstrapTable('refresh')
        })

        $('#table').on('expand-row.bs.table', function (index, row, $detail) {
            $("#detailTable_" + $detail.BSNO + " tbody").append("<tr style='background-color:#eee;text-align:right;'><td colspan='6'><b>票数：</b>" + $detail.FeeList.length + " <b>RMB合计：</b>" + $detail.AMOUNT_RMB + " <b>USD合计：</b>" + $detail.AMOUNT_USD)
        })

        $("#iptACCDATE_START").datepicker({ autoclose: true, format:"yyyy-mm" })
        $("#iptACCDATE_END").datepicker({ autoclose: true, format: "yyyy-mm" })
        $("#iptKaiChuanRi_START").datepicker({ autoclose: true })
        $("#iptKaiChuanRi_END").datepicker({ autoclose: true })
        $("#iptFACTRYTIME_START").datepicker({ autoclose: true })
        $("#iptFACTRYTIME_END").datepicker({ autoclose: true })
    })

    function queryParams(params) {
        var condition = {};
        $('#toolbar').find('input[name]').each(function () {
            condition[$(this).attr('name')] = $(this).val()
        })
        params.condition = JSON.stringify(condition);

        return params
    }

    function detailFormatter(index, row) {
        var html;

        if (row.FeeList.length > 0) {
            html = '<table class="table" id="detailTable_' + row.BSNO + '"><thead><tr>';
            var arr = [
                '费用名称',
                '单位标准',
                '单价',
                '数量',
                '金额',
                '币别'
            ];

            for (var idx in arr) {
                html += '<td>' + arr[idx] + '</td>'
            }

            html += '</tr></thead><tbody>';

            for (var i = 0; i < row.FeeList.length; i++) {
                html += '<tr>';
                html += '<td>' + row.FeeList[i].FeeName + '</td>';
                html += '<td>' + row.FeeList[i].Unit + '</td>';
                html += '<td>' + row.FeeList[i].UnitPrice + '</td>';
                html += '<td>' + row.FeeList[i].Quantity + '</td>';
                html += '<td>' + row.FeeList[i].Amount + '</td>';
                html += '<td>' + row.FeeList[i].Currency + '</td>';
                html += '</tr>';
            }
            html += '</tbody></table>';
        } else {
            html = '<span>没有费用数据</span>'
        }
        return html;


    }
</script>