@{
    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="VESSEL" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>航次: </span>
                        <input name="VOYNO" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>提单号: </span>
                        <input name="MBLNO" class="form-control w70" type="text">
                    </div>
                    <div class="form-group">
                        <span>发票号: </span>
                        <input name="INVNO" class="form-control w70" type="text">
                    </div>
                    <button id="btnSearch" type="submit" class="btn btn-primary">查询</button>
                </div>
            </div>
            <div style="width:2000px;">
                <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="15"
                       data-sortable="true"
                       data-sort-class="table-active"
                       data-silent-sort="false"
                       data-method="post">
                    <thead>
                        <tr>
                            <th data-field="LAST_STATUS" data-sortable="true">当前状态</th>
                            <th data-field="VESSEL" data-sortable="true">船名</th>
                            <th data-field="VOYNO" data-sortable="true">航次</th>
                            <th data-field="MBLNO" data-sortable="true">提单号</th>
                            <th data-field="INVNO" data-sortable="true">发票号</th>
                            <th data-field="SERVICECONTRACTNO" data-sortable="true">报关单号</th>
                            <th data-field="CNTRTOTAL" data-sortable="true">箱型箱量</th>
                            <th data-field="CARGODATE" data-sortable="true">装货时间</th>
                            @*<th data-field="STA_ZXFC" data-sortable="true">返场信息</th>
                    <th data-field="STA_HGFX" data-sortable="true">通关放行信息</th>*@
                            <th data-field="KaiChuanRi" data-sortable="true">开船日</th>
                            <th data-field="ETA" data-sortable="true">到港日</th>
                            @*<th data-field="KGS" data-sortable="true">吨位</th>*@
                            <th data-field="YARD" data-sortable="true">场站</th>
                            <th data-field="CNTRSEALNO" data-sortable="true" data-formatter="cntrSealNOFmt">箱封号</th>
                            <th data-field="FACTORYADDR" data-sortable="true" data-formatter="facAddrFmt">装货地址</th>
                            <th data-field="BSNO" data-formatter="operateFmt">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>



    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="feeModal" tabindex="-1" role="dialog" aria-labelledby="feeLabel">
        <div class="modal-dialog modal-lg" role="document">
            <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" id="feeLabel">费用信息</h4>
                </div>
                <div class="modal-body" id="feeModelBody">
                    <div class="row row-lg">
                        <div class="order_status">
                            <span class="s-step">
                                <b>
                                    <b></b>
                                </b>
                                <p class="active"></p>
                                <em></em>
                                <div>空箱出场</div>
                            </span>
                            <span class="s-step">
                                <b>
                                    <b></b>
                                </b>
                                <p class="active"></p>
                                <em></em>
                                <div>重箱返场</div>
                            </span>
                            <span class="s-step">
                                <b>
                                    <b></b>
                                </b>
                                <p class="active"></p>
                                <em></em>
                                <div>海关放行</div>
                            </span>
                            <span class="s-step">
                                <b><b></b></b>
                                <p class="active"></p>
                                <em></em>
                                <div>码头放行</div>
                            </span>
                            <span class="s-step">
                                <b>
                                    <b></b>
                                </b>
                                <em></em>
                                <div>装船出运</div>
                            </span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <b>到港日:</b><span id="spanATD"></span>
                        </div>
                        <div class="col-md-4">
                            <b>吨位:</b><span id="spanKGS"></span>
                        </div>
                        <div class="col-md-4">
                            <b>场站:</b><span id="spanYARD"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <b>箱封号:</b><span id="spanCNTRSEALNO"></span>
                        </div>
                        <div class="col-md-8">
                            <b>装货地址:</b><span id="spanFACTORYADDR"></span>
                        </div>
                    </div>

                    <div class="row row-lg">
                        <div class="col-sm-12">
                            <table id="feeTable"
                                   data-toggle="feeTable"
                                   data-height="350"
                                   data-show-refresh="false"
                                   data-show-toggle="false"
                                   data-show-columns="false"
                                   data-data-field="Data"
                                   data-method="post">
                                <thead>
                                    <tr>
                                        <th data-field="FeeName">费用名称</th>
                                        <th data-field="Unit">单位标准</th>
                                        <th data-field="UnitPrice">单价</th>
                                        <th data-field="Quantity">数量</th>
                                        <th data-field="Amount">金额</th>
                                        <th data-field="Currency">币别</th>
                                        @*<th data-field="ExChangerate">汇率</th>*@
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bs-example-modal-lg" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileLabel">
        <div class="modal-dialog modal-lg" role="document">
            <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" id="fileLabel">文件列表</h4>
                </div>
                <div class="modal-body" id="fileModelBody">
                    <div class="row row-lg">
                        <div class="col-sm-12">
                            <table id="fileTable"
                                   data-toggle="fileTable"
                                   data-height="350"
                                   data-show-refresh="false"
                                   data-show-toggle="false"
                                   data-show-columns="false"
                                   data-data-field="Data"
                                   data-method="post">
                                <thead>
                                    <tr>
                                        <th data-field="URL">文件名称</th>
                                        <th data-field="MODIFIEDTIME">上传时间</th>
                                        <th data-field="Driect_URL" data-formatter="downloadFmt">操作</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

        $('#feeModal').on('shown.bs.modal', function (e) {
            var modelWidth = $("#feeModelBody").width();
            var padding = (modelWidth - 680) / 2;
            $("div.order_status").prop("style", "padding-left:" + padding+"px;");
        })

        //var width = $(window).width()*0.8;
        //var height = $(window).height()*0.8;

        $('#table').on('dbl-click-row.bs.table', function (row, $element, field) {
            @*layer.open({
                skin: 'layui-layer-molv',
                title:'费用信息',
                type: 2,
                area: [width + 'px', height+'px'],
                btn:'关闭',
                content: '@Url.Action("OpFeeList")?BSNO=' + $element.BSNO
            });*@


            $('#feeModal').modal('show');

            $(".order_status span.s-step b b").removeClass("active");
            $(".order_status span.s-step em").html("");

            $.ajax({
                type: "POST",
                url: "@Url.Action("OpStatusListData")?BSNO=" + $element.BSNO,
                dataType: "json",
                success: function (data) {
                    var spans = $(".order_status").find("span.s-step");
                    $(spans).each(function (idx, v) {
                        var findName = $(v).find("div:first").html();
                        var time = findStatusTime(data.Data, findName);
                        if (time) {
                            $(v).find("em:first").html(time);
                            $(v).find("b b").addClass("active");
                        }
                    });
                }
            });

            $('#feeTable').bootstrapTable('refresh', { url: "@Url.Action("OpFeeListData")?BSNO=" + $element.BSNO });

            $("#spanDGR").html($element.ATD);
            $("#spanKGS").html($element.KGS);
            $("#spanCNTRSEALNO").html($element.CNTRSEALNO);
            $("#spanYARD").html($element.YARD);
            $("#spanFACTORYADDR").html($element.FACTORYADDR);

        });

    })

    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 facAddrFmt(value, row, index) {
        if (value.length > 10) {
            var subStr = value.substr(0, 10) + "...";
            var valNoHtml = value.replace(/<[^>]+>/g, "&#10;");
            return [
                '<span title=' + valNoHtml + '>' + subStr+'</span>'
            ].join('')
        } else {
            return [
                value
            ].join('')
        }
    }

    function operateFmt(value, row, index) {
        return [
            '<a href="javascript:void(0);" onclick="showFileModal(\'' + value + '\')">文件列表</a>'
            ].join('')
    }

    function cntrSealNOFmt(value, row, index) {
        var valWithNextLine = value.replace(/\s/g, "<br/>");
        return valWithNextLine
    }

    function findStatusTime(arr, name) {
        for (var idx = 0; idx < arr.length; idx++) {
            if (arr[idx].STATUS == name) {
                return arr[idx].COMPTIME;
            }
        }
    }

    function showFileModal(bsno) {
        $('#fileModal').modal('show');
        $('#fileTable').bootstrapTable('refresh', { url: "@Url.Action("FileListData")?BSNO=" + bsno });
    }

    function downloadFmt(value, row, index) {
        return [
            '<a href="@erpServer/' + value + '" target="_blank">下载</a>'
        ].join('')
    }

    
</script>