@using YLErp.Enums;
@model margin_template_v2

@{
    ViewBag.Title = "预付金模板 | 编辑";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";

    var pageObj = new
    {
        isAdd = Model == null || Model.id == 0,
        marginTemplate = Model,
        detail = new margin_template_detail() { ValueDate = new DateTime(2020, 1, 1) },
        isGFSM = PS.Config.Company == CompanyEnum.广发商贸
    };
}

@section CSS{
    <link href="~/Style/Css/margin_template_v2Edit.css?v=@(HtmlUtil.JsVersion)" rel="stylesheet" />
}

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

    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/marginTemplate/marginTemplateV2DefaultEdit.js?v=@HtmlUtil.JsVersion"></script>
}

<form id="marginTemplateV2Form" method="post" onsubmit="return false;">
    <div class="row no-gutters">
        <div class="col form-layout" style="height: 720px; overflow-y: auto;">
            <div class="border">
                <p>新模板信息</p>                                 
                <div class="form-group">
                    <label class="formlabel">模板名称</label>
                    <input class="text-box" v-model="marginTemplate.Name" />
                </div>

                <div class="form-group">
                    <label class="formlabel">适用结构</label>
                    <select class="chosen-select" id="tradeTypes" multiple>
                        <option value="香草期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("香草期权") ? "selected" : "")>香草期权</option>
                        <option value="障碍期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("障碍期权") ? "selected" : "")>障碍期权</option>
                        <option value="二元期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("二元期权") ? "selected" : "")>二元期权</option>
                        <option value="亚式期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("亚式期权") ? "selected" : "")>亚式期权</option>
                        <option value="彩虹期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("彩虹期权") ? "selected" : "")>彩虹期权</option>
                        <option value="合成价差期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("合成价差期权") ? "selected" : "")>合成价差期权</option>
                        <option value="远期" @(Model.TradeTypes != null && Model.TradeTypes.Contains("远期") ? "selected" : "")>远期</option>
                        <option value="双鲨期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("双鲨期权") ? "selected" : "")>双鲨期权</option>
                        <option value="凤凰期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("凤凰期权") ? "selected" : "")>凤凰期权</option>
                        <option value="雪球期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("雪球期权") ? "selected" : "")>雪球期权</option>
                        <option value="气囊结构" @(Model.TradeTypes != null && Model.TradeTypes.Contains("气囊结构") ? "selected" : "")>气囊结构</option>
                        <option value="收益互换" @(Model.TradeTypes != null && Model.TradeTypes.Contains("收益互换") ? "selected" : "")>收益互换</option>
                        <option value="区间累积期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("区间累积期权") ? "selected" : "")>区间累积期权</option>
                        <option value="累计期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("累计期权") ? "selected" : "")>累计期权</option>
                        <option value="Risky期权" @(Model.TradeTypes != null && Model.TradeTypes.Contains("Risky期权") ? "selected" : "")>Risky期权</option>
                        <option value="自定义交易" @(Model.TradeTypes != null && Model.TradeTypes.Contains("自定义交易") ? "selected" : "")>自定义交易</option>
                    </select>
                </div>

                @if (PS.Config.Company != CompanyEnum.广发商贸)
                {
                    <div class="form-group">
                    <label class="formlabel">适用买卖方向</label>
                    <select class="chosen-select" id="BuySellType" multiple>
                        <option value="1" @((Model.BuySellType & BuySellEnum.Buy) > 0 ? "selected" : "")>买入</option>
                        <option value="2" @((Model.BuySellType & BuySellEnum.Sell) > 0 ? "selected" : "")>卖出</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="formlabel">适用预付金场景</label>
                    <select class="chosen-select" id="MarginScenarios" multiple>
                        <option value="1" @((Model.MarginScenarios & MarginScenarioEnum.Initial) > 0 ? "selected" : "")>初始预付金</option>
                        <option value="2" @((Model.MarginScenarios & MarginScenarioEnum.Position) > 0 ? "selected" : "")>持仓预付金</option>
                    </select>
                </div>

                <div class="form-group" v-show="marginTemplate.RuleType==5 || marginTemplate.RuleType==6">
                    <label class="formlabel">参数类型</label>
                    <select v-model="marginTemplate.DefaultParameterType" v-bind:disabled="!isAdd">
                        <option value="@((int)DefaultMarginParameterTypeEnum.个股)">@DefaultMarginParameterTypeEnum.个股.ToString()</option>
                        <option value="@((int)DefaultMarginParameterTypeEnum.指数)">@DefaultMarginParameterTypeEnum.指数.ToString()</option>
                    </select>
                </div>

                }
                

                <div class="form-group">
                    <label class="formlabel">是否生效</label>
                    <select v-model="marginTemplate.IsValid">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>
            </div>

            <div class="border">
                <div class="form-group">
                    <label class="formlabel">预付金规则</label>
                    @if (PS.Config.Company != CompanyEnum.厦门象屿)
                    {
                        <select v-model="marginTemplate.RuleType" v-bind:disabled="!isAdd" v-on:change="changeRuleType()">
                            @if(PS.Config.Company == CompanyEnum.广发商贸){
                                <option value="@((int)MarginRuleTypeEnum.默认预付金规则)">@MarginRuleTypeEnum.默认预付金规则.ToString()</option>
                            }
                           else{
                               @*<option value="@((int)MarginRuleTypeEnum.无预付金)">@MarginRuleTypeEnum.无预付金.ToString()</option>
                                <option value="@((int)MarginRuleTypeEnum.按固定利率)">@MarginRuleTypeEnum.按固定利率.ToString()</option>
                                <option value="@((int)MarginRuleTypeEnum.按浮动盈亏)">@MarginRuleTypeEnum.按浮动盈亏.ToString()</option>
                                <option value="@((int)MarginRuleTypeEnum.类香草预付金规则)">@MarginRuleTypeEnum.类香草预付金规则.ToString()</option>*@
                            <option value="@((int)MarginRuleTypeEnum.触发条件预付金规则1)">@MarginRuleTypeEnum.触发条件预付金规则1.ToString()</option>
                            @*<option value="@((int)MarginRuleTypeEnum.触发条件预付金规则2)">@MarginRuleTypeEnum.触发条件预付金规则2.ToString()</option>*@
                            <option value="@((int)MarginRuleTypeEnum.触发条件预付金规则3)">@MarginRuleTypeEnum.触发条件预付金规则3.ToString()</option>
                            @*<option value="@((int)MarginRuleTypeEnum.含赔付预付金计算规则)">@MarginRuleTypeEnum.含赔付预付金计算规则.ToString()</option>*@
                           }
                            
                        </select>
                    }
                </div>

                <div class="form-group">
                    <label class="formlabel">规则描述</label>
                    <textarea class="text-box" rows="3" style="width: 320px; text-align:left;" v-model="marginTemplate.Comments" v-bind:title="marginTemplate.Comments" disabled>
                    </textarea>
                </div>

                 @if (PS.Config.Company != CompanyEnum.广发商贸)
                {
                    <div class="form-group">
                        <label class="formlabel">是否按标的分类设置参数</label>
                        <select v-model="marginTemplate.UnderlyingSeperateType" v-on:change="changeUnderlyingSeperateType()" v-bind:disabled="marginTemplate.RuleType != @((int)MarginRuleTypeEnum.按固定利率) && marginTemplate.RuleType != @((int)MarginRuleTypeEnum.标准SPAN) && marginTemplate.RuleType != @((int)MarginRuleTypeEnum.卖出自动赎回规则1)">
                            <option value="@((int)UnderlyingSeperateTypeEnum.None)">不区分</option>
                            <option value="@((int)UnderlyingSeperateTypeEnum.CustomStock)">按自定义权益分类</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel"></label>
                        <textarea class="text-box" rows="5" style="width: 460px; text-align:left;" v-model="marginTemplate.UnderlyingSeperateComments" v-bind:title="marginTemplate.UnderlyingSeperateComments" disabled>
                        </textarea>
                    </div>

                }
                
            </div>

        </div>
        <div class="col form-layout" style="height: 720px; overflow-y:auto;">
            <template v-for="(detail,index) in marginTemplate.Details">
                <div class="border detail">
                    <div class="row no-gutters">
                        <div class="col">
                            @if (PS.Config.Company == CompanyEnum.广发商贸)
                            {
                                <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.默认预付金规则)">
                                    <div class="form-group">
                                        <label class="formlabel">Span涨跌幅选择</label>
                                        <select v-model="detail.SpanConfig.SpanRateType">
                                            <option value="@((int)DetailSpanRateTypeEnum.Span涨跌幅度)">@DetailSpanRateTypeEnum.Span涨跌幅度.ToString()</option>
                                            <option value="@((int)DetailSpanRateTypeEnum.Span涨跌幅度2)">@DetailSpanRateTypeEnum.Span涨跌幅度2.ToString()</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="formlabel">初始预付金系数</label>
                                        <input class="text-box" v-model="detail.SpanConfig.InitialMarginFactor" />
                                    </div>
                                    <div class="form-group">
                                        <label class="formlabel">发生追保时系数</label>
                                        <input class="text-box" v-model="detail.SpanConfig.CoefficientFactor" />
                                    </div>
                                </template>
                            }
                             
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.按固定利率) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.按浮动盈亏)">
                                <div class="form-group" v-show="marginTemplate.UnderlyingSeperateType == @((int)UnderlyingSeperateTypeEnum.CustomStock) && marginTemplate.RuleType == @((int)MarginRuleTypeEnum.按固定利率)">
                                    <label class="formlabel">当标的分类为</label>

                                    <select class="chosen-select" :id="'UnderlyingType'+index" multiple>
                                        <option value="1" :selected="(detail.UnderlyingType & 1)>0?true:false">指数</option>
                                        <option value="2" :selected="(detail.UnderlyingType & 2)>0?true:false">个股/ETF-核准制发行</option>
                                        <option value="4" :selected="(detail.UnderlyingType & 4)>0?true:false">个股/ETF-非核准制发行</option>
                                        <option value="8" :selected="(detail.UnderlyingType & 8)>0?true:false">其他</option>
                                    </select> 时，
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">持仓预付金率</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用持仓名义本金</label>
                                    <select v-model="detail.UsePositionStockEqvNotional">
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                            </template>
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.类香草预付金规则)">
                                <div class="form-group">
                                    <label class="formlabel">初始预付金率</label>
                                    <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">临时预付金率1</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">临时预付金率2</label>
                                    <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">临时预付金率3</label>
                                    <vue-number-input v-model="detail.MarginRatio4" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否内含价值</label>
                                    <select v-model="detail.IsIntrinsicValue">
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">组合预付金率</label>
                                    <vue-number-input v-model="detail.GroupRatio" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">总名义本金</label>
                                    <vue-number-input v-model="detail.StockEqvNotional"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">单一标的持仓名义本金</label>
                                    <vue-number-input v-model="detail.SingleStockEqvNotional"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">持仓标的分散程度</label>
                                    <vue-number-input v-model="detail.PositionUnderlyingAmount"></vue-number-input>
                                </div>
                            </template>
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.触发条件预付金规则1) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.触发条件预付金规则2)">
                                <div class="form-group">
                                    <label class="formlabel">初始预付金率</label>
                                    <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">维持预付金率</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">触发追保跌幅</label>
                                    <vue-number-input v-model="detail.RedeemPriceLimit" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用行权价</label>
                                    <select v-model="detail.IsUseStrike">
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">最大跌幅限制</label>
                                    <vue-number-input v-model="detail.RedeemPriceMax" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">持仓标的分散程度</label>
                                    <vue-number-input v-model="detail.PositionUnderlyingAmount"></vue-number-input>
                                </div>
                            </template>
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.触发条件预付金规则3)">
                                <div class="form-group">
                                    <label class="formlabel">预付金比率</label>
                                    <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">持仓预付金比率</label>
                                    <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用持仓名义本金</label>
                                    <select v-model="detail.UsePositionStockEqvNotional">
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">涨跌幅类型</label>
                                    <select v-model="detail.PriceLimitType">
                                        <option value="0">跌幅</option>
                                        <option value="1">涨幅</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">触发追保比例</label>
                                    <vue-number-input v-model="detail.RedeemPriceLimit" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用行权价</label>
                                    <select v-model="detail.IsUseStrike">
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">最大涨跌幅限制</label>
                                    <vue-number-input v-model="detail.RedeemPriceMax" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">追加比例</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">持仓标的分散程度</label>
                                    <vue-number-input v-model="detail.PositionUnderlyingAmount"></vue-number-input>
                                </div>
                            </template>
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.标准SPAN)">
                                <div class="form-group" v-show="marginTemplate.UnderlyingSeperateType == @((int)UnderlyingSeperateTypeEnum.CustomStock)">
                                    <label class="formlabel">当标的分类为</label>

                                    <select class="chosen-select" :id="'UnderlyingType'+index" multiple>
                                        <option value="1" :selected="(detail.UnderlyingType & 1)>0?true:false">指数</option>
                                        <option value="2" :selected="(detail.UnderlyingType & 2)>0?true:false">个股/ETF-核准制发行</option>
                                        <option value="4" :selected="(detail.UnderlyingType & 4)>0?true:false">个股/ETF-非核准制发行</option>
                                        <option value="8" :selected="(detail.UnderlyingType & 8)>0?true:false">其他</option>
                                    </select> 时，
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">标的价格变化幅度a</label>
                                    <select v-model="detail.IsUsePriceLimit">
                                        <option value="true">单日标的涨跌幅配置</option>
                                        <option value="false">无</option>
                                    </select> * <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent"></vue-number-input> * St
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">标的波动率变化幅度b</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <div style="margin-left: 25px;">
                                        当计算维持预付金时，最后与初始预付金的 <vue-number-input v-model="detail.ComparedInitialMarginRate" v-bind:format="inputFormatPercentNegative"></vue-number-input> 取较大值。
                                    </div>
                                </div>
                            </template>
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.买入自动赎回规则1) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.卖出自动赎回规则1)">
                                <div class="form-group" v-show="marginTemplate.UnderlyingSeperateType == @((int)UnderlyingSeperateTypeEnum.CustomStock) && marginTemplate.RuleType == @((int)MarginRuleTypeEnum.卖出自动赎回规则1)">
                                    <label class="formlabel">当标的分类为</label>

                                    <select class="chosen-select" :id="'UnderlyingType'+index" multiple>
                                        <option value="1" :selected="(detail.UnderlyingType & 1)>0?true:false">指数</option>
                                        <option value="2" :selected="(detail.UnderlyingType & 2)>0?true:false">个股/ETF-核准制发行</option>
                                        <option value="4" :selected="(detail.UnderlyingType & 4)>0?true:false">个股/ETF-非核准制发行</option>
                                        <option value="8" :selected="(detail.UnderlyingType & 8)>0?true:false">其他</option>
                                    </select> 时，
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">x</label>
                                    <vue-number-input v-model="detail.MarginRatio1" v-bind:format="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.买入自动赎回规则1) ? inputFormatNegative : inputFormatPercentNegative"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">y</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.买入自动赎回规则1) ? inputFormatNegative : inputFormatPercentNegative"></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否取与保底金额孰小</label>
                                    <select v-model="detail.IsNeedCompare">
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div style="margin-left: 25px;">
                                        当计算维持预付金时，最后与初始预付金的 <vue-number-input v-model="detail.ComparedInitialMarginRate" v-bind:format="inputFormatPercentNegative"></vue-number-input> 取较大值。
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="col-auto" v-show="index + 1 == marginTemplate.Details.length">
                            <button class="delBtn" v-show="marginTemplate.UnderlyingSeperateType == @((int)UnderlyingSeperateTypeEnum.CustomStock)" v-on:click="deleteDetail(index)">- 刪除</button>
                        </div>
                    </div>
                </div>
            </template>
            <button class="addBtn" v-show="marginTemplate.UnderlyingSeperateType == @((int)UnderlyingSeperateTypeEnum.CustomStock)" v-on:click="addDetail()" v-bind:disabled="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.无预付金) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.自动赎回买入预付金规则) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.保底预付金规则) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.含赔付预付金计算规则)">+ 新增参数组</button>
        </div>
    </div>
    <div class="form-buttons">
        <button class="btn btn-primary" type="button" v-on:click="saveMarginTemplateV2(true)">保存</button>
        <button class="btn btn-primary" type="button" onclick="layer.closeMe()">关闭</button>
    </div>
</form>


<div class="modal fade" id="myModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">参数设置</h4>
                <button type="button" class="close" v-on:click="closeModal()">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="form-group">
                    <label class="formlabel">生效日期</label>
                    <vue-datepicker v-model="detail.ValueDate" class="text-box" v-bind:disabled="!isAdd"></vue-datepicker>
                </div>
                <template v-if="ruleType == @((int)MarginRuleTypeEnum.按固定利率) || ruleType == @((int)MarginRuleTypeEnum.按浮动盈亏)">
                    <div class="form-group">
                        <label class="formlabel">持仓预付金率</label>
                        <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用持仓名义本金</label>
                        <select v-model="detail.UsePositionStockEqvNotional">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                </template>
                <template v-if="ruleType == @((int)MarginRuleTypeEnum.类香草预付金规则)">
                    <div class="form-group">
                        <label class="formlabel">初始预付金率</label>
                        <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">临时预付金率1</label>
                        <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">临时预付金率2</label>
                        <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">临时预付金率3</label>
                        <vue-number-input v-model="detail.MarginRatio4" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否内含价值</label>
                        <select v-model="detail.IsIntrinsicValue">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">组合预付金率</label>
                        <vue-number-input v-model="detail.GroupRatio" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">总名义本金</label>
                        <vue-number-input v-model="detail.StockEqvNotional"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">单一标的持仓名义本金</label>
                        <vue-number-input v-model="detail.SingleStockEqvNotional"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">持仓标的分散程度</label>
                        <vue-number-input v-model="detail.PositionUnderlyingAmount"></vue-number-input>
                    </div>
                </template>
                <template v-if="ruleType == @((int)MarginRuleTypeEnum.触发条件预付金规则1) || ruleType == @((int)MarginRuleTypeEnum.触发条件预付金规则2)">
                    <div class="form-group">
                        <label class="formlabel">初始预付金率</label>
                        <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">维持预付金率</label>
                        <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">触发追保跌幅</label>
                        <vue-number-input v-model="detail.RedeemPriceLimit" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用行权价</label>
                        <select v-model="detail.IsUseStrike">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">最大跌幅限制</label>
                        <vue-number-input v-model="detail.RedeemPriceMax" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">持仓标的分散程度</label>
                        <vue-number-input v-model="detail.PositionUnderlyingAmount"></vue-number-input>
                    </div>
                </template>
                <template v-if="ruleType == @((int)MarginRuleTypeEnum.触发条件预付金规则3)">
                    <div class="form-group">
                        <label class="formlabel">预付金比率</label>
                        <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">持仓预付金比率</label>
                        <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用持仓名义本金</label>
                        <select v-model="detail.UsePositionStockEqvNotional">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">涨跌幅类型</label>
                        <select v-model="detail.PriceLimitType">
                            <option value="0">跌幅</option>
                            <option value="1">涨幅</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">触发追保比例</label>
                        <vue-number-input v-model="detail.RedeemPriceLimit" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用行权价</label>
                        <select v-model="detail.IsUseStrike">
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">最大涨跌幅限制</label>
                        <vue-number-input v-model="detail.RedeemPriceMax" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">追加比例</label>
                        <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">持仓标的分散程度</label>
                        <vue-number-input v-model="detail.PositionUnderlyingAmount"></vue-number-input>
                    </div>
                </template>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn" v-on:click="saveModal()">保存</button>
            </div>

        </div>
    </div>
</div>