@model trade_report
@{
    ViewBag.Title = "报送相关字段填写";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var jsClients = JsDataModel.GetClients();
    var jsClient = Model.clientId > 0 ? jsClients.FirstOrDefault(n => n.id == Model.clientId) : null;
    var pageObj = new
    {
        trade_report = Model,
        client = jsClient,
        isreport = ViewBag.isreport
    };
}
@section CSS{
    <style>
        .mainform {
            background-color: white;
        }

        .yc-panel {
            padding: 0;
            border-bottom: solid 0.5px #dee2e6;
        }

        div .form-group {
            margin: 0 !important;
            border-top: solid 0.5px #dee2e6;
            border-left: solid 0.5px #dee2e6;
            border-right: solid 0.5px #dee2e6;
        }

        .half {
            padding: unset;
            text-align: center;
            vertical-align: middle;
            border-right: solid 0.5px #dee2e6;
            width: 48%;
        }

        .form-group input, .form-group select {
            text-align: center;
            width: 49.9% !important;
            border: none;
        }
    </style>
    <link href="~/Style/Css/settag.css?v=@(HtmlUtil.JsVersion)" rel="stylesheet" />
}

@section JS{
    <script type="text/javascript">
        const page = @Json.Serialize(pageObj);

        const inputFormat = Object.freeze({ precision: 2, append: '' });

        var vue = new Vue({
            el: '#tradeSubmissionFieldsForm',
            data: {
                trade_report: _.cloneDeep(page.trade_report),
            },
            watch: {
            },
            created: function () {

            },
            mounted() {
                if (!page.isreport) {
                    this.getMainProtocolCode();
                    $("#MainProtocolCode").val(this.trade_report.MainProtocolCode);
                    this.getSupProtocolCode();
                    $("#SupProtocolCode").val(this.trade_report.SupProtocolCode);
                }
            },
            methods: {
                changeMainProtocolCode() {
                    this.getSupProtocolCode();
                },
                getMainProtocolCode() {
                    $("#MainProtocolCode option").remove();
                    main.post("/Client/getMainProtocolCodes", { clientId: this.trade_report.clientId }, { async: false }).done(function (resp) {
                        var obj = $("#MainProtocolCode");
                        if (page.client != null && page.client.MainProtocolCode != null && page.client.MainProtocolCode != '') {
                            obj.append("<option >" + page.client.MainProtocolCode + "</option>");
                        }
                        _.forEach(resp, (v) => {
                            obj.append("<option >" + v.Text + "</option>");
                        })
                    });
                    this.getSupProtocolCode()
                },
                getSupProtocolCode() {
                    $("#SupProtocolCode option").remove();
                    if ($("#MainProtocolCode").val()) {
                        main.post("/Client/getSideProtocols", { mainProtocol: $("#MainProtocolCode").val() }, { async: false }).done(function (resp) {
                            var obj = $("#SupProtocolCode");
                            if (page.client != null && page.client.SupProtocolCode != null && page.client.SupProtocolCode != '') {
                                obj.append("<option >" + page.client.SupProtocolCode + "</option>");
                            }
                            _.forEach(resp, (v) => {
                                obj.append("<option >" + v + "</option>");
                            })
                        });
                    }
                },
                savetrade() {
                    this.trade_report.MainProtocolCode = $("#MainProtocolCode").val();
                    this.trade_report.SupProtocolCode = $("#SupProtocolCode").val();
                    main.post("/trade/tradeSubmissionJson", this.trade_report).done(function (resp) {
                        this.trade_report = _.cloneDeep(resp.obj);
                    });
                },
                changePerformanceGuarantee() {
                    if (this.trade_report.PerformanceGuarantee == '') {
                        this.trade_report.PerformanceCollProvider = '';
                        this.trade_report.IsUsePerformanceColl = '';
                        this.trade_report.PerformanceExplain = '';
                        this.trade_report.IsPerformanceCollInterest = '';
                        this.trade_report.InitialPerformanceColl = '';
                        this.trade_report.InitialPerformanceCollCash = '';
                        this.trade_report.RecoveryPerformanceColl = '';
                        this.trade_report.UnwindPerformanceColl = '';
                        this.trade_report.EodPerformanceColl = '';
                        this.trade_report.PerformanceRemark = '';
                        this.trade_report.PerformanceCollType = '';
                        this.trade_report.PerformanceCollRange = '';
                        this.trade_report.PerformanceCollCode = '';
                        this.trade_report.PerformanceCollRemark = '';
                    }
                }
            },
            computed: {
                isShowOtherTradingPlace() {
                    return this.trade_report.TradingPlace === "其他交易场所";
                },
                isShowPerformanceGuaranteePlace() {
                    return this.trade_report.PerformanceGuarantee === "部分担保" || this.trade_report.PerformanceGuarantee === "全额担保";
                },
                isSwap() {
                    return this.trade_report.TradeType === "收益互换";
                },
            },
            components: {
                'vue-number-input': FastVue.vueNumberInput(),
            },
            destroyed() {
            }
        });
    </script>
}

<form id="tradeSubmissionFieldsForm" class="mainform">
    <div class="row no-gutters">
        <div class="col">
            <div class="yc-panel">
                @if (!ViewBag.isreport)
                {
                    <div class="form-group">
                        <label class="formlabel half">主协议编号</label>
                        <select name="MainProtocolCode" id="MainProtocolCode" v-on:change="changeMainProtocolCode">
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="formlabel half">补充协议编号</label>
                        <select name="SupProtocolCode" id="SupProtocolCode">
                        </select>
                    </div>
                }
                else
                {
                    <div class="form-group">
                        <label class="formlabel half">主协议编号</label>
                        <input name="MainProtocolCode" id="MainProtocolCode" class="text-box" type="text" value="@Model.MainProtocolCode" readonly>
                    </div>

                    <div class="form-group">
                        <label class="formlabel half">补充协议编号</label>
                        <input name="SupProtocolCode" id="SupProtocolCode" class="text-box" type="text" value="@Model.SupProtocolCode" readonly>
                    </div>
                }

                <div class="form-group">
                    <label class="formlabel half">填报方角色</label>
                    <input name="FillingPartyRole" v-model="trade_report.FillingPartyRole" class="text-box" type="text" readonly>
                </div>

                <div class="form-group">
                    <label class="formlabel half">清算机构</label>
                    <select name="ClearingAgency" v-model="trade_report.ClearingAgency">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.ClearingAgencyMapDisplay)
                        {
                            <option>@item.Key</option>
                        }
                    </select>
                </div>
                <div class="form-group">
                    <label class="formlabel half">交易场所</label>
                    <select v-model="trade_report.TradingPlace">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.TradingPlaceMapDisplay)
                        {
                            <option>@item.Key</option>
                        }
                    </select>
                </div>
                <div class="form-group" v-show="isShowOtherTradingPlace">
                    <label class="formlabel half">交易场所(其他)</label>
                    <input name="OtherTradingPlace" v-model="trade_report.OtherTradingPlace" class="text-box" type="text">
                </div>

                <div class="form-group">
                    <label class="formlabel half">履约担保类型</label>
                    <select v-model="trade_report.PerformanceGuarantee" v-on:change="changePerformanceGuarantee">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.PerformanceGuaranteeMapDisplay)
                        {
                            <option>@item.Key</option>
                        }
                    </select>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">履约担保品提供方</label>
                    <select v-model="trade_report.PerformanceCollProvider">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.PerformanceCollProviderMapDisplay)
                        {
                            <option>@item.Key</option>
                        }
                    </select>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">担保品收取方是否可使用担保品</label>
                    <select v-model="trade_report.IsUsePerformanceColl">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.BoolMapDisplay)
                        {
                            <option>@item.Key</option>
                        }
                    </select>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace&&trade_report.IsUsePerformanceColl!='否'">
                    <label class="formlabel half">担保品使用说明</label>
                    <input name="PerformanceExplain" v-model="trade_report.PerformanceExplain" class="text-box" type="text" value="">
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">是否计算担保品价值产生利息</label>
                    <select v-model="trade_report.IsPerformanceCollInterest">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.BoolMapDisplay)
                        {
                            <option>@item.Key</option>
                        }
                    </select>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace||isSwap">
                    <label class="formlabel half">履约担保品初始比率（%）</label>
                    <vue-number-input v-model="trade_report.InitialPerformanceColl" v-bind:format="inputFormat"></vue-number-input>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace&&!isSwap">
                    <label class="formlabel half">履约担保品初始比率（现金部分）（%）</label>
                    <vue-number-input v-model="trade_report.InitialPerformanceCollCash" v-bind:format="inputFormat"></vue-number-input>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">履约担保品追保比率（%）</label>
                    <vue-number-input v-model="trade_report.RecoveryPerformanceColl" v-bind:format="inputFormat"></vue-number-input>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">履约担保品平仓比率（%）</label>
                    <vue-number-input v-model="trade_report.UnwindPerformanceColl" v-bind:format="inputFormat"></vue-number-input>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace||isSwap">
                    <label class="formlabel half">维持担保比率（%）</label>
                    <vue-number-input v-model="trade_report.EodPerformanceColl" v-bind:format="inputFormat"></vue-number-input>
                </div>

                <div class="form-group">
                    <label class="formlabel half">履约担保备注</label>
                    <input name="PerformanceRemark" v-model="trade_report.PerformanceRemark" class="text-box" type="text" value="">
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">履约担保品类型</label>
                    <select v-model="trade_report.PerformanceCollType">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.PerformanceCollTypeMapDisplay)
                        {
                            <option value="@item.Value">@item.Key</option>
                        }
                    </select>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">担保品担保范围</label>
                    <select v-model="trade_report.PerformanceCollRange">
                        @foreach (var item in YLErp.DBModels.Consts.ConsReport.PerformanceCollRangeMapDisplay)
                        {
                            <option value="@item.Value">@item.Key</option>
                        }
                    </select>
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">多笔担保交易确认书编号</label>
                    <input name="PerformanceCollCode" v-model="trade_report.PerformanceCollCode" class="text-box" type="text" value="">
                </div>

                <div class="form-group" v-show="isShowPerformanceGuaranteePlace">
                    <label class="formlabel half">备注(履约担保明细表)</label>
                    <input name="PerformanceCollRemark" v-model="trade_report.PerformanceCollRemark" class="text-box" type="text" value="">
                </div>

            </div>
            <div class="text-center">
                <button class="btn btn-primary " type="button" v-on:click="savetrade">保存</button>
                <button class="btn btn-primary " type="button" onclick="layer.closeMe();">关闭</button>
            </div>
        </div>
    </div>
</form>