@{

}
<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">
            <div id="toolbar">
                <div class="ibox-title">
                    <h5>费用</h5>
                </div>
                <div class="ibox-content" role="form">
                    <div class="form-group col-md-3 col-sm-12">
                        <label class="col-lg-3 col-md-4 col-sm-2 control-label">@Resources.LangAll.LabelVESSEL</label>
                        <div class="col-lg-9 col-md-8 col-sm-10">
                            <input name="VESSEL" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group col-md-3 col-sm-12">
                        <label class="col-lg-3 col-md-4 col-sm-2 control-label">@Resources.LangAll.LabelVOYNO</label>
                        <div class="col-lg-9 col-md-8 col-sm-10">
                            <input name="VOYNO" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group col-md-2 col-sm-12">
                        <label class="col-lg-4 col-md-4 col-sm-2 control-label">@Resources.LangAll.LabelMBLNO</label>
                        <div class="col-lg-8 col-md-8 col-sm-10">
                            <input name="MBLNO" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group col-md-2 col-sm-12">
                        <label class="col-lg-4 col-md-4 col-sm-2 control-label">@Resources.LangAll.LabelINVNO</label>
                        <div class="col-lg-8 col-md-8 col-sm-10">
                            <input name="INVNO" class="form-control" type="text">
                        </div>
                    </div>
                    <div class="form-group col-md-1 col-sm-12">
                        <button id="btnSearch" type="submit" class="btn btn-primary">@Resources.LangAll.BtnQuery</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("OpSeaeList")"
                   data-pagination="true"
                   data-side-pagination="server"
                   data-total-field="Total"
                   data-data-field="Data"
                   data-page-number="1"
                   data-page-size="10"
                   data-sortable="true"
                   data-sort-class="table-active"
                   data-silent-sort="false"
                   data-method="post">
                <thead>
                    <tr>
                        <th data-field="VESSEL" data-sortable="true">@Resources.LangAll.LabelVESSEL</th>
                        <th data-field="VOYNO" data-sortable="true">@Resources.LangAll.LabelVOYNO</th>
                        <th data-field="MBLNO" data-sortable="true" data-formatter="mblnoFormatter">@Resources.LangAll.LabelMBLNO</th>
                        <th data-field="INVNO" data-sortable="true">@Resources.LangAll.LabelINVNO</th>
                        <th data-field="CUSTOMNO" data-sortable="true">@Resources.LangAll.LabelCUSTOMNO</th>
                        <th data-field="CNTRTOTAL" data-sortable="true">@Resources.LangAll.LabelCtrnTypeNum</th>
                        <th data-field="ETD" data-sortable="true">@Resources.LangAll.LabelETD</th>
                        <th data-field="ATD" data-sortable="true">@Resources.LangAll.LabelETA</th>
                        <th data-field="YARD" data-sortable="true">@Resources.LangAll.LabelYARD</th>
                        <th data-field="AMOUNT_RMB" data-sortable="true" class="text-right">@Resources.LangFee.LabelFeeRMB</th>
                        <th data-field="AMOUNT_USD" data-sortable="true" class="text-right">@Resources.LangFee.LabelFeeUSD</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

</div>
@section styles
{

    <link type="text/css" rel="stylesheet" href="~/Content/css/opseaelist.css" />
}

@section scripts{

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

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

        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 mblnoFormatter(value, row, index) {
                return [
                    '<a class="audit tabs" data-url="@Url.Action("OpFeeList")?BSNO=' + row.BSNO + '" data-title="@Resources.LangFee.TextFeeInfo">',
                    row.MBLNO,
                    '</a>'
                ].join('');
        }

    </script>
}