@using YLErp.Enums;
@model client_margin_template

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

    var pageObj = new
    {
        isAdd = Model == null || Model.id == 0,
        marginTemplates = ViewBag.MarginTemplates,
        marginTemplate = ViewBag.MarginTemplate,
        clientMarginTemplate = Model
    };
}

@section CSS{
    <link href="~/Style/Css/margin_template_v2Edit.css?v=@(HtmlUtil.JsVersion)" rel="stylesheet" />
    @*<style>
        .search-group span {
            display: inline-block;
            min-width: 160px;
            margin: 0 8px 0 0;
            text-align: right;
            vertical-align: middle;
        }

        .search-group a span {
            text-align: left;
        }
    </style>*@
}

@section JS{
    <script type="text/javascript">
        const page = @Json.Serialize(pageObj);
    </script>
    <script src="@HtmlUtil.BasicDataJs("客户")"></script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/client/clientMarginTemplateEdit.js?v=@HtmlUtil.JsVersion"></script>
}

<form id="marginTemplateV2Form" method="post" onsubmit="return false;">
    <div class="row no-gutters">
        <div class="col form-layout tpl-base" style="height: 520px; overflow-y: auto;">
            <div class="border">
                <P>新模板信息</P>

                <div class="form-group">
                    <label class="formlabel">客户名称</label>
                    @if (pageObj.isAdd)
                    {
                        @*新增：客户多选（类似适用簿记账户），保存时按选中客户逐条调用原有单条保存接口*@
                        <select id="ClientId" class="chosen-select" multiple data-placeholder="请选择客户" style="width:260px;">
                            <option v-for="item in clientNames" v-bind:value="item.Value">{{item.Text}}</option>
                        </select>
                    }
                    else
                    {
                        @*编辑：单条绑定，仅改模板/日期，客户不可多选*@
                        <select v-model="clientMarginTemplate.ClientId" id="ClientId">
                            <option v-for="item in clientNames" v-bind:value="item.Value">{{item.Text}}</option>
                        </select>
                    }
                </div>

                <div class="form-group">
                    <label class="formlabel">模板名称</label>
                    <select v-model="clientMarginTemplate.MarginTemplateId" v-on:change="changeMarginTemplate()">
                        <option v-for="item in marginTemplates" v-bind:value="item.id">
                            {{item.Name}}
                        </option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="formlabel">适用结构</label>
                    <input class="text-box" v-model="marginTemplate.TradeTypes" id="suitableType" disabled />
                </div>

                <div class="form-group">
                    <label class="formlabel">生效日期</label>
                    <vue-datepicker v-model="clientMarginTemplate.ValueDate" class="text-box"></vue-datepicker>
                </div>

                <div class="form-group">
                    <label class="formlabel">规则类型</label>
                    <input class="text-box" v-model="marginTemplate.MarginTypeName" disabled />
                </div>
            </div>

            <div class="border">
                <div class="form-group">
                    <label class="formlabel">预付金规则</label>
                    <input class="text-box" v-model="marginTemplate.RuleTypeName" disabled />
                </div>

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

        <div class="col form-layout" style="height: 520px; overflow-y:auto;">
            @*区间追保结构（规则15）只读回显：参数组区块与 margin_template_v2Edit 同款样式（本页为绑定信息页，参数本身在预付金模板V2维护，故全部只读）*@
            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.区间追保结构)">
                <div v-for="blk in ruleRangeBlocks" v-bind:key="'spanblk'+blk.key" class="border spanBlk" style="padding:6px 10px; margin-top:10px;">
                    <p style="margin:4px 0; font-weight:bold;">
                        参数组{{blk.no}}：<span v-if="marginTemplate.UnderlyingSeperateType == @((int)UnderlyingSeperateTypeEnum.CustomInstrumentType)">资产类型：{{underlyingTypeNames(blk.ut)}}</span>
                        <span v-if="blk.etfKind">　ETF 子类：{{blk.etfKind}}</span>
                        <span v-if="blk.isTBond">（按期限分档：≤5y、(5y-10y]、(10y-30y]、&gt;30y，每个档位独立设置）</span>
                    </p>
                    <div v-for="sec in blk.sections" v-bind:key="sec.key">
                        <p v-if="blk.isTBond" style="margin:8px 0 2px; font-weight:bold;">期限档位：{{sec.termLabel}}</p>
                        <template v-if="sec.detail && sec.detail.SpanConfig">
                            <p style="margin:4px 0;">
                                预警线：<vue-number-input v-model="sec.detail.SpanConfig.WarnLine" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                　平仓线：<vue-number-input v-model="sec.detail.SpanConfig.CloseLine" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                            </p>
                            <p style="margin:4px 0;">多头方向（客户看多）</p>
                            <table class="table table-bordered" style="margin-bottom:6px;">
                                <thead>
                                    <tr><th>追保价格区间</th><th>追保金额</th></tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(tier, ti) in sec.detail.SpanConfig.LongSpans" v-bind:key="'long'+ti">
                                        <td>
                                            <template v-if="ti === 0">
                                                <vue-number-input v-model="tier.Lower" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).priceInit}} ≤ {{spanText(sec.detail).priceCur}}
                                            </template>
                                            <template v-else>
                                                <vue-number-input v-model="tier.Lower" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).priceInit}} ≤ {{spanText(sec.detail).priceCur}} &lt; <vue-number-input v-model="tier.Upper" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).priceInit}}
                                            </template>
                                        </td>
                                        <td>
                                            <vue-number-input v-model="tier.AmountRate" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).amountBase}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p style="margin:4px 0;">空头方向（客户看空）</p>
                            <table class="table table-bordered" style="margin-bottom:0;">
                                <thead>
                                    <tr><th>追保价格区间</th><th>追保金额</th></tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(tier, ti) in sec.detail.SpanConfig.ShortSpans" v-bind:key="'short'+ti">
                                        <td>
                                            <template v-if="ti === 0">
                                                {{spanText(sec.detail).priceCurShort1}} ≤ <vue-number-input v-model="tier.Upper" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).priceInit}}
                                            </template>
                                            <template v-else>
                                                <vue-number-input v-model="tier.Lower" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).priceInit}} &lt; {{spanText(sec.detail).priceCurShort}} ≤ <vue-number-input v-model="tier.Upper" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).priceInit}}
                                            </template>
                                        </td>
                                        <td>
                                            <vue-number-input v-model="tier.AmountRate" v-bind:format="inputFormatPercent" disabled></vue-number-input> × {{spanText(sec.detail).amountBase}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </template>
                    </div>
                </div>
            </template>
            <template v-for="(detail,index) in marginTemplate.Details">
                <div class="border detail" v-show="marginTemplate.RuleType != @((int)MarginRuleTypeEnum.区间追保结构)">
                    <div class="row no-gutters">
                        <div class="col">
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.按固定利率) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.按浮动盈亏)">
                                <div class="form-group">
                                    <label class="formlabel">持仓预付金率</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用持仓名义本金</label>
                                    <select v-model="detail.UsePositionStockEqvNotional" disabled>
                                        <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" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">临时预付金率1</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">临时预付金率2</label>
                                    <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">临时预付金率3</label>
                                    <vue-number-input v-model="detail.MarginRatio4" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否内含价值</label>
                                    <select v-model="detail.IsIntrinsicValue" disabled>
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </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" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">维持预付金率</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">触发追保跌幅</label>
                                    <vue-number-input v-model="detail.RedeemPriceLimit" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用行权价</label>
                                    <select v-model="detail.IsUseStrike" disabled>
                                        <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" disabled></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" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">持仓预付金比率</label>
                                    <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用持仓名义本金</label>
                                    <select v-model="detail.UsePositionStockEqvNotional" disabled>
                                        <option value="false">否</option>
                                        <option value="true">是</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">涨跌幅类型</label>
                                    <select v-model="detail.PriceLimitType" disabled>
                                        <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" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否使用行权价</label>
                                    <select v-model="detail.IsUseStrike" disabled>
                                        <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" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">追加比例</label>
                                    <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                                </div>
                            </template>
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.标准SPAN)">
                                <div class="form-group">
                                    <label class="formlabel">标的价格变化幅度a</label>
                                    <select v-model="detail.IsUsePriceLimit" disabled>
                                        <option value="true">单日标的涨跌幅配置</option>
                                        <option value="false">无</option>
                                    </select> * <vue-number-input v-model="detail.MarginRatio1" v-bind:format="inputFormatPercent" disabled></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" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <div style="margin-left: 25px;">
                                        当计算维持预付金时，最后与初始预付金的 <vue-number-input v-model="detail.ComparedInitialMarginRate" v-bind:format="inputFormatPercentNegative" disabled></vue-number-input> 取较大值。
                                    </div>
                                </div>
                            </template>
                            <template v-if="marginTemplate.RuleType == @((int)MarginRuleTypeEnum.买入自动赎回规则1) || marginTemplate.RuleType == @((int)MarginRuleTypeEnum.卖出自动赎回规则1)">
                                <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" disabled></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" disabled></vue-number-input>
                                </div>
                                <div class="form-group">
                                    <label class="formlabel">是否取与保底金额孰小</label>
                                    <select v-model="detail.IsNeedCompare" disabled>
                                        <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" disabled></vue-number-input> 取较大值。
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <div class="form-buttons">
        <button class="btn btn-primary" type="button" v-on:click="saveMarginTemplateV2">保存</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" disabled></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" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用持仓名义本金</label>
                        <select v-model="detail.UsePositionStockEqvNotional" disabled>
                            <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" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">临时预付金率1</label>
                        <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">临时预付金率2</label>
                        <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">临时预付金率3</label>
                        <vue-number-input v-model="detail.MarginRatio4" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否内含价值</label>
                        <select v-model="detail.IsIntrinsicValue" disabled>
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </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" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">维持预付金率</label>
                        <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">触发追保跌幅</label>
                        <vue-number-input v-model="detail.RedeemPriceLimit" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用行权价</label>
                        <select v-model="detail.IsUseStrike" disabled>
                            <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" disabled></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" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">持仓预付金比率</label>
                        <vue-number-input v-model="detail.MarginRatio3" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用持仓名义本金</label>
                        <select v-model="detail.UsePositionStockEqvNotional" disabled>
                            <option value="false">否</option>
                            <option value="true">是</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">涨跌幅类型</label>
                        <select v-model="detail.PriceLimitType" disabled>
                            <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" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">是否使用行权价</label>
                        <select v-model="detail.IsUseStrike" disabled>
                            <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" disabled></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel">追加比例</label>
                        <vue-number-input v-model="detail.MarginRatio2" v-bind:format="inputFormatPercent" disabled></vue-number-input>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>