@{

}
<style type="text/css">
    #formCtrn .control-label {
        padding-top: 0px;
        padding-bottom: 5px;
    }

    .btn-p {
        padding: 6px 12px;
    }

    .btn-default {
        border-radius: 0px !important;
    }

    .fa-plus, .fa-remove, .fa-save {
        margin-right: 5px;
    }
    .three-btn{
        margin-top:15px;
    }
</style>
<div class="top-navigation">
    <div id="wrapper">
        <div class="gray-bg">
            <div class="wrapper wrapper-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                            </div>
                            <div class="ibox-content">
                                <table id="table1"
                                       data-toggle="table"
                                       data-show-refresh="false"
                                       data-show-toggle="false"
                                       data-show-columns="false"
                                       data-url="@Url.Action("OrderListData")"
                                       data-content-type="application/x-www-form-urlencoded"
                                       data-pagination="false"
                                       data-single-select="true"
                                       data-click-to-select="true"
                                       data-method="post">
                                    <thead>
                                        <tr>
                                            <th data-field="Check" data-checkbox="true"></th>
                                            <th data-field="CTNALL">@Resources.LangAll.LabelCtrnType</th>
                                            <th data-field="CTNNUM">@Resources.LangAll.LabelCtrnNum</th>
                                            <th data-field="CNTRNO">@Resources.LangAll.LabelCNTRNO</th>
                                            <th data-field="SEALNO">@Resources.LangAll.LabelSEALNO</th>
                                            <th data-field="PKGS">@Resources.LangAll.LabelPKGS</th>
                                            <th data-field="KINDPKGS">@Resources.LangAll.LabelKINDPKGS</th>
                                            <th data-field="KGS">@Resources.LangAll.LabelKGS</th>
                                            <th data-field="CBM">@Resources.LangAll.LabelCBM</th>
                                            <th data-field="TAREWEIGHT">@Resources.LangAll.LabelTAREWEIGHT</th>
                                            <th data-field="REMARK">@Resources.LangAll.LabelREMARK</th>
                                        </tr>
                                    </thead>
                                </table>


                                <div class="form-horizontal clearfix">
                                    <div class="form-group col-md-4 three-btn">
                                        <a href="javascript:;" class="btn btn-primary btn-sm" id="btnAdd"><i class="fa fa-plus"></i>@Resources.LangAll.BtnNew</a>
                                        <a href="javascript:;" class="btn btn-primary btn-sm" id="btnDel"><i class="fa fa-remove"></i>@Resources.LangAll.BtnDel</a>
                                        <a href="javascript:;" class="btn btn-primary btn-sm" id="btnSave"><i class="fa fa-save"></i>@Resources.LangAll.BtnSave</a>
                                    </div>
                                </div>

                                <table id="table2"
                                       data-toggle="table"
                                       data-show-refresh="false"
                                       data-show-toggle="false"
                                       data-show-columns="false"
                                       data-content-type="application/x-www-form-urlencoded"
                                       data-pagination="false"
                                       data-query-params="queryParams"
                                       data-method="post">
                                    <thead>
                                        <tr>
                                            <th data-checkbox="true"></th>
                                            <th data-field="PKGS" data-sortable="true">@Resources.LangAll.LabelPKGS</th>
                                            <th data-field="KINDPKGS" data-sortable="true">@Resources.LangAll.LabelKINDPKGS</th>
                                            <th data-field="KGS" data-sortable="true">@Resources.LangAll.LabelKGS</th>
                                            <th data-field="CBM" data-sortable="true">@Resources.LangAll.LabelCBM</th>
                                            <th data-field="HSCODE" data-sortable="true">@Resources.LangAll.LabelHSCODE</th>
                                            <th data-field="MARKS" data-sortable="true">@Resources.LangAll.LabelMARKS</th>
                                            <th data-field="DESCRIPTION" data-sortable="true">@Resources.LangAll.LabelDESCRIPTION</th>
                                            <th data-field="REMARK" data-sortable="true">@Resources.LangAll.LabelREMARK</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="ctrnModel" tabindex="-1" role="dialog" aria-labelledby="ctrnModelLabel">
    <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="ctrnModelLabel">@Resources.LangAll.LabelCtrn</h4>
            </div>
            <div class="modal-body clearfix">
                <form id="formCtrn" class="form-horizontal">
                    <div class="form-group col-md-3">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelPKGS</label>
                        <input type="text" class="form-control" id="modelCtrnPKGS" name="PKGS">
                    </div>
                    <div class="form-group col-md-3">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelKINDPKGS</label>
                        <div class="input-group">
                            <input type="text" class="form-control input-w" id="modelCtrnKINDPKGS" name="KINDPKGS" autocomplete="off">
                            <div class="input-group-btn" style="position:unset">
                                <button type="button" class="btn-p btn btn-white dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelKGS</label>
                        <input type="text" class="form-control" id="modelCtrnKGS" name="KGS">
                    </div>
                    <div class="form-group col-md-3">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelCBM</label>
                        <input type="text" class="form-control" id="modelCtrnCBM" name="CBM">
                    </div>
                    <div class="form-group col-md-3">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelHSCODE</label>
                        <input type="text" class="form-control" id="modelCtrnHSCODE" name="HSCODE">
                    </div>
                    <div class="form-group col-md-12">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelMARKS</label>
                        <textarea type="text" class="form-control" id="modelCtrnMARKS" name="MARKS"></textarea>
                    </div>
                    <div class="form-group col-md-12">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelDESCRIPTION</label>
                        <textarea class="form-control" id="modelCtrnDESCRIPTION" name="DESCRIPTION"></textarea>
                    </div>
                    <div class="form-group col-md-12">
                        <label for="message-text" class="control-label">@Resources.LangAll.LabelREMARK</label>
                        <textarea type="text" class="form-control" id="modelCtrnREMARK" name="REMARK"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">@Resources.LangAll.BtnClose</button>
                <button type="button" class="btn btn-primary" id="modelBtnSave">@Resources.LangAll.BtnSave</button>
            </div>
        </div>
    </div>
</div>

@section styles
{

    <link type="text/css" rel="stylesheet" href="~/Content/hplus/css/plugins/datapicker/datepicker3.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/css/orderlist.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/hplus/css/plugins/footable/footable.core.css" />
}

@section scripts{
    <script src="~/Content/hplus/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/Content/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="~/Content/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="~/Content/js/validatorConfig.js"></script>
    <script src="~/Content/js/jquery.form.js"></script>
    <script src="~/Content/js/common.js"></script>
    <script>
        var ctrnData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.CtnList));
        var siJson = @Html.Raw(ViewBag.SiObject);

        $(function () {
            $('#table1').bootstrapTable();
            $('#table2').bootstrapTable();

            $("#table1").bootstrapTable('load', ctrnData)
            $('#table1').on('check.bs.table', function (row, data) {
                $('#table2').bootstrapTable('load', data.DetailList)
            })

            $("#btnAdd").click(function () {
                if ($("#table1").bootstrapTable('getSelections').length == 0) {
                    layer.alert('@Resources.LangAll.MsgChooseOneOperate');
                    return;
                }
                $("#ctrnModel").modal('show')
                $("#table2").bootstrapTable('uncheckAll')
                $("#formCtrn").resetForm()
                $("#modelCtrnHSCODE").val(siJson.HSCODE)
                $("#modelCtrnMARKS").val(siJson.MARKS)
                $("#modelCtrnDESCRIPTION").val(siJson.DESCRIPTION)

            })

            $("#btnDel").click(function () {
                var ids = $.map($("#table2").bootstrapTable('getSelections'), function (row) {
                    return row.GID
                })
                if (ids.length > 0) {
                    $("#table2").bootstrapTable('remove', { field: 'GID', values: ids });
                }
            })
            $("#table2").on('dbl-click-row.bs.table', function (row, $element, field) {
                $("#ctrnModel").modal('show')
                $("#table2").bootstrapTable('uncheckAll')
                $("#table2").bootstrapTable('checkBy', { field: 'GID', values: [$element.GID] })

                $("#formCtrn").loadData($element);
            })
            //对话框确定
            $("#modelBtnSave").click(function () {
                var json = $("#formCtrn").toJson();
                var sel = $("#table1").bootstrapTable('getSelections')[0];

                var selList = $("#table2").bootstrapTable('getSelections');

                if (selList.length == 0) {
                    json.GID = sel.DetailList.length + 1;
                    sel.DetailList.push(json);
                } else {
                    selList[0].PKGS = json.PKGS;
                    selList[0].KINDPKGS = json.KINDPKGS;
                    selList[0].KGS = json.KGS;
                    selList[0].CBM = json.CBM;
                    selList[0].HSCODE = json.HSCODE;
                    selList[0].MARKS = json.MARKS;
                    selList[0].DESCRIPTION = json.DESCRIPTION;
                    selList[0].REMARK = json.REMARK;
                }

                $('#table2').bootstrapTable('load', sel.DetailList)
                $("#ctrnModel").modal('hide')
            })

            //保存数据
            $("#btnSave").click(function () {
                var hasErr = false;
                $.each(ctrnData, function (idx, item) {
                    if (item.DetailList.length > 0) {
                        var cPKGS = 0;
                        var cKGS = 0;
                        var cCBM = 0;
                        $.each(item.DetailList, function (subIdx, subItem) {
                            cPKGS += parseInt(subItem.PKGS);
                            cKGS += parseFloat(subItem.KGS);
                            cCBM += parseFloat(subItem.CBM);
                        })

                        if (cPKGS != item.PKGS || cKGS != item.KGS || cCBM != item.CBM) {
                            hasErr = true;
                            layer.alert('@Resources.LangConfirm.MsgCtrnDetailNotEqual');
                            return false;
                        }
                    }
                })

                if (hasErr)
                    return;

                $.ajax({
                    method: 'POST',
                    url: '@Url.Action("SaveDetailData")',
                    contentType: 'application/json',
                    data: JSON.stringify(ctrnData),
                    success: function (data) {
                        layer.alert(data.Message, function () {
                            location.reload()
                        })
                    }
                })
            })

            $("#modelCtrnKINDPKGS").bsSuggest({
                url: "@Url.Action("SuggestPackage", "Common")?keyword=",
                idField: "FRT",
                keyField: "PKGS",
                getDataMethod: 'url',
                effectiveFields: ["PKGS"]
            }).on('onSetSelectValue', function (e, model) {
                console.log('onSetSelectValue: ', model);
                });
        });


        function queryParams(params) {
            var sel=$("#table1").bootstrapTable('getSelections');
            if (sel.length > 0) {
                params.ctnId = sel[0].CTN_ID;
            }

            return params
        }

    </script>
}