@using YLErp.Modules.CalcPriceShowConfigModule
@*定价模板*@
@model PricingModel
@{
    Layout = null;
    var calcQuotas = CalcPriceShowConfigService.GetShowCalcQuota();
}

<template id="pricingItem_tpl">
    <div v-bind:class="isTitle?'pricing-titles':'pricing-trade'">
        <div class="ptitle screenshot-hide" v-if="!pageVue.IsImport">交易序号</div>

        <template v-if="pageVue.ClientUsedForCalc">
            <div class="ptitle">客户名称</div>
            <div class="pitem pitem-cash">
                <vue-client v-model="trade.ClientId" v-on:input="changeClient" :key="updateKey.client" />
            </div>
        </template>

        <div class="ptitle">期权类型</div>
        <div class="pitem">
            <vue-tradetype v-model="trade.TradeType" v-on:input="changeTradeType" v-bind:disabled="!!trade.StructureType" />
        </div>
        <div class="pitem-cash">
            <span>现金流</span>
        </div>

        <div class="ptitle" style="display:none">标的类型</div>
        <div class="pitem" style="display:none">
            <vue-niceselect name="UnderlyingInstrumentType" :items="tradeHelper.InstrumentTypes" v-model="trade.UnderlyingInstrumentType" v-on:input="changeInstrumentType" />
        </div>
        <div class="pitem-cash" style="display:none"></div>

        <div class="ptitle">标的品种</div>
        <div class="pitem">
            <vue-variety v-bind:variety="viewState.variety" v-on:change-variety="changeVariety" />
        </div>
        <div class="pitem-cash"></div>

        <div class="ptitle">标的代码</div>
        <div class="pitem">
            <vue-underlying v-bind:underlying="viewState.underlying" v-on:change-underlying="changeUnderlying" />
        </div>
        <div class="pitem-cash"></div>

        <div class="ptitle">交易方向</div>
        <div class="pitem pitem-cash">
            <vue-niceselect name="BuySell" :items="consBuysellTypes" v-model="trade.BuySell" v-on:input="changeBuySell" />
        </div>

        <template v-if="!floating||fieldState.ExerciseMode">
            <div class="ptitle">行权方式</div>
            <div class="pitem">
                <vue-niceselect name="ExerciseMode" :items="ExerciseModes" v-model="trade.ExerciseMode" v-on:input="changeExerciseMode" v-if="showExerciseMode" v-bind:disabled="showExerciseMode===1" />
            </div>
            <div class="pitem-cash"></div>
        </template>

        <template v-if="!floating||fieldState.OptionType">
            <div class="ptitle">看涨看跌</div>
            <div class="pitem">
                <vue-niceselect name="OptionType" :items="tradeHelper.OptionTypes" v-model="trade.OptionType" v-if="showOptionType" v-bind:disabled="fieldState.RiskyOption" />
            </div>
            <div class="pitem-cash"></div>
        </template>

        <div class="ptitle">交易日期</div>
        <div class="pitem pitem-cash">
            <vue-datepicker :maxdate="trade.ExerciseDate" v-model="trade.TradeDate" :noholiday="fieldState.Cashflow" v-on:input="changeTradeDate" />
        </div>

        <template v-if="floating||!topVue.simpleMode">
            <div class="ptitle screenshot-hide">定价日期</div>
            <div class="pitem pitem-cash screenshot-hide">
                <vue-datepicker name="ValueDate" v-model="trade.ValueDate" :noholiday="fieldState.Cashflow" v-on:input="changeValueDate" />
            </div>
        </template>

        <div class="ptitle">到期日期</div>
        <div class="pitem pitem-cash">
            <vue-datepicker :maxdate="trade.MaturityDate" v-model="trade.ExerciseDate" :noholiday="fieldState.Cashflow" v-on:input="changeExerciseDate" />
        </div>

        <template v-if="floating||!topVue.simpleMode">
            <div class="ptitle">结算日期</div>
            <div class="pitem pitem-cash">
                <vue-datepicker v-model="trade.SettlementDate" :noholiday="fieldState.Cashflow" v-on:input="changeSettlementDate" />
            </div>
        </template>

        <div class="ptitle">期初标的价格</div>
        <div class="pitem seal">
            <div class="yt-input-group" v-bind:class="viewState.SpotPrice">
                <input type="number" class="has-popover-syn" v-model="trade.SpotPrice" v-on:input="changeSpotPrice(true)" v-on:blur="blurSpotPrice" v-bind:step="getPriceTick()" v-bind:readonly="!!viewState.synthetic" v-bind:data-calcid="trade.CalcId" max="999999" min="-999999" />
                <a href="javascript:;" v-on:click="getSpotPrice" title="获取系统的期初标的价格" class="yt-input-group-append s1" tabindex="-1">
                    <i class="fa fa-refresh"></i>
                </a>
            </div>
        </div>
        <div class="pitem-cash seal"><span class="sr-only">期初标的价格</span></div>

        <template v-if="floating||!topVue.simpleMode">
            <div class="ptitle screenshot-hide">标的价格</div>
            <div class="pitem seal screenshot-hide">
                <div class="yt-input-group">
                    <input type="number" v-model="trade.UnderlyingPrice" max="999999" min="-999999" step="0.01" />
                    <a href="javascript:;" v-on:click="getUnderlyingPrice" title="获取系统的标的价格" class="yt-input-group-append s1" tabindex="-1">
                        <i class="fa fa-refresh"></i>
                    </a>
                </div>
            </div>
            <div class="pitem-cash seal screenshot-hide"><span class="sr-only">标的价格</span></div>
        </template>
        <div class="ptitle" v-show="!floating||!fieldState.AutoCall&&!fieldState.SnowBall&&(!fieldState.ShowSanDuanShi)&&!fieldState.RiskyOption">执行价格</div>
        <div class="pitem seal" v-show="!floating||!fieldState.AutoCall&&!fieldState.SnowBall&&(!fieldState.ShowSanDuanShi)&&!fieldState.RiskyOption">
            <div class="yt-input-group" v-if="!fieldState.AutoCall&&(!fieldState.Accumulator||_.trim(trade.AccumulatorStructureType) === '0')&&!fieldState.RiskyOption&&!fieldState.SnowBall&&trade.StrikeType!=='Floating'">
                <vue-number-input name="Strike" v-model="trade.Strike" v-on:input="changeStrike" v-bind:format="inputFormatStrike"></vue-number-input>
                <span class="yt-input-group-append" tabindex="-1">
                    <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格">%</a>
                    <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比">￥</a>
                </span>
            </div>
        </div>
        <div class="pitem-cash"><span class="sr-only">执行价格</span></div>

        <div class="ptitle">权利金</div>
        <div class="pitem yt-input-group">
             <template v-if="trade.TradeType==='累计期权'">
                <vue-number-input name="TradeSinglePrice" v-model="trade.TradeSinglePrice" v-on:input="changeTradeSinglePrice" v-bind:format="inputFormatSinglePriceOnly"></vue-number-input>
            </template>
            <template v-else-if="trade.IsUsePremiumRate">
                <vue-number-input name="PremiumRate" v-model="trade.PremiumRate" v-on:input="changePremiumRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                <a href="javascript:;" title="点击后切换成绝对值权利金" v-on:click="showAbsPrice" class="yt-input-group-append" tabindex="-1">%</a>
            </template>
            <template v-else>
                <vue-number-input name="TradeSinglePrice" v-model="trade.TradeSinglePrice" v-on:input="changeTradeSinglePrice" v-bind:format="inputFormatSinglePriceOnly"></vue-number-input>
                <a href="javascript:;" title="点击后切换成标的价格百分比" v-on:click="showPercentPrice" class="yt-input-group-append" tabindex="-1">￥</a>
            </template>
        </div>
        <div class="pitem-cash"></div>

        <template v-if="floating">
            <!--------------Risky期权---------------->
            <template v-if="fieldState.RiskyOption">
                <div class="ptitle">执行价格1</div>
                <div class="pitem">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.Strike1" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle">执行价格2</div>
                <div class="pitem">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.Strike2" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle">执行价格3</div>
                <div class="pitem">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.Strike3" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle">参与率1</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.ParticipationRate1" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="ptitle">参与率2</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.ParticipationRate2" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="ptitle">参与率3</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.ParticipationRate3" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
            </template>
        </template>

        <template v-if="floating">
            <div v-show="fieldState.ShowSanDuanShi" class="ptitle">执行价格1</div>
            <div v-show="fieldState.ShowSanDuanShi" class="pitem">
                <div class="yt-input-group">
                    <vue-number-input v-model="trade.Strike" v-bind:format="inputFormatStrike"></vue-number-input>
                    <span class="yt-input-group-append">
                        <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                        <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                    </span>
                </div>
            </div>
            <div v-show="fieldState.ShowSanDuanShi" class="ptitle">执行价格2</div>
            <div v-show="fieldState.ShowSanDuanShi" class="pitem">
                <div class="yt-input-group">
                    <vue-number-input v-model="trade.Strike2" v-bind:format="inputFormatStrike"></vue-number-input>
                    <span class="yt-input-group-append">
                        <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                        <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                    </span>
                </div>
            </div>
            <div v-show="fieldState.ShowSanDuanShi" class="ptitle">执行价格3</div>
            <div v-show="fieldState.ShowSanDuanShi" class="pitem">
                <div class="yt-input-group">
                    <vue-number-input v-model="trade.Strike3" v-bind:format="inputFormatStrike"></vue-number-input>
                    <span class="yt-input-group-append">
                        <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                        <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                    </span>
                </div>
            </div>
        </template>
        <!--简单模式-->
        <template v-if="floating||!topVue.simpleMode">
            <div class="ptitle" v-show="!floating||(!fieldState.RiskyOption&&!fieldState.Accumulator)">参与率</div>
            <div class="pitem" v-show="!floating||(!fieldState.RiskyOption&&!fieldState.Accumulator)">
                <vue-number-input v-if="!fieldState.RiskyOption&&!fieldState.Accumulator" v-model="trade.ParticipationRate" v-on:input="changeEffectRatio" v-bind:format="inputFormatPercent"></vue-number-input>
            </div>
            <div class="pitem-cash"></div>

            <div class="ptitle" v-bind:class="{ 'screenshot-hide': !pageVue.viewState.SS_SinglePrincipalWrite}">保底收益</div>
            <div class="pitem" v-bind:class="{ 'screenshot-hide': !pageVue.viewState.SS_SinglePrincipalWrite}">
                <template v-if="trade.IsUsePremiumRate">
                    <vue-number-input name="PrincipalRateWrite" v-bind:disabled="(!!fieldState.Accumulator)" v-model="trade.PrincipalRateWrite" v-on:input="changeEffectRatio" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                </template>
                <template v-else>
                    <vue-number-input name="SinglePrincipalWrite" v-bind:disabled="(!!fieldState.Accumulator)" v-model="trade.SinglePrincipalWrite" v-on:input="changeEffectRatio" v-bind:format="inputFormatSinglePrincipalOnly"></vue-number-input>
                </template>
            </div>
            <div class="pitem-cash" v-bind:class="{ 'screenshot-hide': !pageVue.viewState.SS_SinglePrincipalWrite}"></div>

            <div class="ptitle" v-bind:class="{ 'screenshot-hide': !pageVue.viewState.SS_PrincipalSum}">保底收益总额</div>
            <div class="pitem yt-input-group" v-bind:class="{ 'screenshot-hide': !pageVue.viewState.SS_PrincipalSum}">
                <vue-number-input name="OriginalPrincipalSum" v-bind:disabled="(!!fieldState.Accumulator)" v-model="trade.OriginalPrincipalSum" v-bind:format="inputFormatDouble2" v-on:input="changePrincipalSum"></vue-number-input>
                <a href="javascript:;" v-on:click="changeEffectRatio" title="计算保底收益总额" class="yt-input-group-append s1" tabindex="-1">
                    <i class="fa fa-refresh"></i>
                </a>
            </div>
            <div class="pitem-cash" v-bind:class="{ 'screenshot-hide': !pageVue.viewState.SS_PrincipalSum}"></div>
        </template>
        <div v-if="(!floating||!fieldState.Accumulator)" class="ptitle screenshot-hide">成交数量</div>
        <div v-if="(!floating||!fieldState.Accumulator)" class="pitem screenshot-hide">
            <vue-number-input v-if="!fieldState.Accumulator" v-model="trade.TradeAmountV" v-on:input="changeTradeAmountV" v-bind:format="inputFormatTradeAmountV" v-bind:disabled="(!!trade.IsUsePremiumRate)||(!!fieldState.Accumulator)"></vue-number-input>
        </div>
        <div class="pitem-cash screenshot-hide"></div>

        <div class="ptitle screenshot-hide" v-show="!floating||(!fieldState.RiskyOption&&!fieldState.Accumulator)">有效成交数量</div>
        <div class="pitem screenshot-hide" v-show="!floating||(!fieldState.RiskyOption&&!fieldState.Accumulator)">
            <vue-number-input v-if="!fieldState.RiskyOption&&!fieldState.Accumulator" v-model="trade.TradeAmount" v-on:input="changeTradeAmount" v-bind:format="inputFormatTradeAmount" v-bind:disabled="!!trade.IsUsePremiumRate"></vue-number-input>
        </div>
        <div class="pitem-cash screenshot-hide"></div>

        <!--名义本金-->
        <template v-if="(floating||!topVue.simpleMode)">
            <template v-if="!(floating&&fieldState.Accumulator)">
                <div class="ptitle screenshot-hide">名义本金</div>
                <div class="pitem pitem-cash screenshot-hide">
                    <input type="number" v-if="!fieldState.Accumulator" v-bind:disabled="!trade.IsUsePremiumRate" v-model="trade.StockEqvNotional" v-on:change="changeStockEqvNotional" />
                </div>
            </template>
        </template>
        <template v-if="!(floating&&fieldState.Accumulator)">
            <div class="ptitle screenshot-hide" v-show="!floating||!fieldState.RiskyOption">有效名义本金</div>
            <div class="pitem pitem-cash screenshot-hide" v-show="!floating||!fieldState.RiskyOption">
                <input type="number" v-if="!fieldState.RiskyOption && !fieldState.Accumulator" v-bind:disabled="!trade.IsUsePremiumRate" v-model="trade.StockEqvNotionalReal" v-on:change="changeStockEqvNotionalReal" />
            </div>
        </template>
        <div class="ptitle screenshot-hide">成交金额</div>
        <div class="pitem pitem-cash screenshot-hide">
            <input type="number" v-model="trade.TradePrice" v-bind:disabled="!fieldState.Cashflow" />
        </div>

        <!--初始预付金-->
        @if (Model.ShowInitialMargin)
        {
            <template v-if="topVue.calcMargin">
                <div class="ptitle screenshot-hide">初始预付金</div>
                <div class="pitem screenshot-hide">
                    <div class="yt-input-group" v-bind:class="viewState.InitialMargin">
                        <input type="number" v-on:change="changeInitialMargin" v-model="trade.InitialMargin" step="0.1" />
                        <a href="javascript:;" v-on:click="getInitialMargin" title="使用系统计算的初始预付金" class="yt-input-group-append s1">
                            <i class="fa fa-refresh"></i>
                        </a>
                    </div>
                </div>
                <div class="pitem-cash screenshot-hide"></div>
            </template>
        }

        <!--奇异期权-->
        <template v-if="floating">
            <!--------------二元期权---------------->
            <template v-if="fieldState.BinaryOption">
                <div class="ptitle">二元类型</div>
                <div class="pitem">
                    <vue-niceselect name="PayoffType" :items="binaryPayoffTypes" v-model="trade.PayoffType" v-on:input="changePayoffType" />
                </div>
                <div class="ptitle">补偿金额</div>
                <div class="pitem">
                    <vue-number-input v-if="trade.IsUsePremiumRate" v-model="trade.CashOrNothingAmountRate" v-bind:format="inputFormatPremiumRate" v-bind:disabled="trade.PayoffType==='AssetOrNothing'"></vue-number-input>
                    <vue-number-input v-else v-model="trade.CashOrNothingAmount" v-bind:format="inputFormatSinglePrice" v-bind:disabled="trade.PayoffType==='AssetOrNothing'"></vue-number-input>
                </div>
                <template v-if="fieldState.ExerciseMode>10">
                    <template v-if="fieldState.PayoffTypeShow">
                        <div class="ptitle">高障碍价格</div>
                        <div class="pitem">
                            <vue-number-input v-model="trade.BarrierHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                        </div>
                        <div class="ptitle">高障碍补偿金额</div>
                        <div class="pitem">
                            <div>
                                <vue-number-input v-if="trade.IsUsePremiumRate" v-model="trade.CashOrNothingAmountHighRate" v-bind:format="inputFormatPremiumRate" v-bind:disabled="trade.PayoffType=='DoubleNoTouch'&&trade.ExerciseMode=='American'"></vue-number-input>
                                <vue-number-input v-else v-model="trade.CashOrNothingAmountHigh" v-bind:format="inputFormatSinglePrice" v-bind:disabled="trade.PayoffType=='DoubleNoTouch'&&trade.ExerciseMode=='American'"></vue-number-input>
                                @*{{trade.PayoffType=='DoubleNoTouch'&&trade.ExerciseMode=='American'}}*@
                            </div>
                        </div>
                    </template>
                    <div class="ptitle">观察方式</div>
                    <div class="pitem">
                        <vue-niceselect name="MonitorType" :items="consMonitorTypes" v-model="trade.MonitorType" />
                    </div>
                    <div class="ptitle">补偿支付</div>
                    <div class="pitem">
                        <vue-niceselect name="RebateType" :items="binaryRebateTypes" v-model="trade.RebateType" />
                    </div>
                </template>
                <div class="ptitle">补偿按敲出日年化</div>
                <div class="pitem">
                    <vue-niceselect name="RebateAnnualizedAtKO" :items="consFalseAsNo" v-model="trade.RebateAnnualizedAtKO" v-bind:disabled="trade.ExerciseMode === 'European' || this.trade.PayoffType === 'UpNoTouch' || this.trade.PayoffType === 'DownNoTouch' || this.trade.PayoffType === 'DoubleNoTouch'" />
                </div>
                <div class="ptitle">补偿计息规则</div>
                <div class="pitem">
                    <vue-daycount v-if="trade.RebateAnnualizedAtKO" name="RebateDayCount" v-model="trade.RebateDayCount" />
                </div>
            </template>
            <!--------------障碍期权---------------->
            <template v-if="fieldState.BarrierOption">
                <div class="ptitle">障碍类型</div>
                <div class="pitem">
                    <vue-niceselect name="BarrierType" :items="consBarrierTypes" v-model="trade.BarrierType" v-on:input="changeFieldState" />
                </div>
                <div class="ptitle">障碍价格</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.BarrierLow" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">高障碍价格</div>
                <div class="pitem">
                    <vue-number-input v-if="(trade.BarrierType || '').startsWith('双')" v-model="trade.BarrierHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">补偿金额</div>
                <div class="pitem">
                    <vue-number-input v-if="trade.IsUsePremiumRate" v-model="trade.RebateRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <vue-number-input v-else v-model="trade.Rebate" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                </div>
                <div class="ptitle" v-show="fieldState.IsBarrierType">高障碍补偿金额</div>
                <div class="pitem" v-show="fieldState.IsBarrierType">
                    <vue-number-input v-if="trade.IsUsePremiumRate" v-model="trade.RebateHighRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <vue-number-input v-else v-model="trade.RebateHigh" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                </div>
                <div class="ptitle">障碍偏移</div>
                <div class="pitem">
                    <input type="number" v-model="trade.BarrierShift" />
                </div>
                <div class="ptitle">观察方式</div>
                <div class="pitem">
                    <vue-niceselect name="MonitorType" :items="consMonitorTypes" v-model="trade.MonitorType" />
                </div>
                <div class="ptitle">补偿支付</div>
                <div class="pitem">
                    <vue-niceselect name="RebateType" :items="consRebateTypes" v-model="trade.RebateType" />
                </div>
                <div class="ptitle">补偿按敲出日年化</div>
                <div class="pitem">
                    <vue-niceselect v-if="/^[^双]+敲出$/.test(trade.BarrierType || '')" name="RebateAnnualizedAtKO" :items="consFalseAsNo" v-model="trade.RebateAnnualizedAtKO" />
                </div>
                <div class="ptitle">补偿计息规则</div>
                <div class="pitem">
                    <vue-daycount v-if="trade.RebateAnnualizedAtKO" name="RebateDayCount" v-model="trade.RebateDayCount" />
                </div>
            </template>
            <!--------------双鲨期权---------------->
            <template v-if="fieldState.DBSharkOption">
                <div class="ptitle">障碍价格</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.BarrierLow" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">高障碍价格</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.BarrierHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">高行权价</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.StrikeHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">补偿金额</div>
                <div class="pitem">
                    <vue-number-input v-if="trade.IsUsePremiumRate" v-model="trade.RebateRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <vue-number-input v-else v-model="trade.Rebate" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                </div>
                <div class="ptitle">高障碍补偿金额</div>
                <div class="pitem">
                    <vue-number-input v-if="trade.IsUsePremiumRate" v-model="trade.RebateHighRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <vue-number-input v-else v-model="trade.RebateHigh" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                </div>
                <div class="ptitle">高参与率</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.CallParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="ptitle">低参与率</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.PutParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="ptitle">观察方式</div>
                <div class="pitem">
                    <vue-niceselect name="MonitorType" :items="consMonitorTypes" v-model="trade.MonitorType" />
                </div>

                <div class="ptitle">补偿支付</div>
                <div class="pitem">
                    <vue-niceselect name="RebateType" :items="consRebateTypes" v-model="trade.RebateType" />
                </div>
            </template>
            <!--------------亚式期权---------------->
            <template v-if="fieldState.AsiaOption">
                <div class="ptitle">均价起算日</div>
                <div class="pitem">
                    <vue-datepicker v-model="trade.AveragingPeriodStartDate" />
                </div>
                <div class="ptitle">均价计算</div>
                <div class="pitem">
                    <vue-niceselect name="PayoffType" :items="consAsiaPayoffType" v-model="trade.PayoffType" v-on:input="changePayOffType" />
                </div>
                <div class="ptitle" id="EnhancedPriceTitle" v-show="trade.PayoffType=='EnhancedArithmeticAverage'&&trade.StrikeType!='Floating'">增强价格</div>
                <div class="pitem" v-show="trade.PayoffType=='EnhancedArithmeticAverage'&&trade.StrikeType!='Floating'">
                    <vue-number-input v-model="trade.EnhancedPrice" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">结算类型</div>
                <div class="pitem">
                    <div v-if="trade.PayoffType=='EnhancedArithmeticAverage'">
                        <vue-niceselect name="SettleMode" :items="consAsiaSettleModes" v-model="trade.SettleMode" />
                    </div>
                </div>
                <div class="ptitle">行权价类型</div>
                <div class="pitem">
                    <vue-niceselect name="StrikeType" :items="consAsiaStrikeType" v-model="trade.StrikeType" v-on:input="changeStrikeType" />
                </div>
                <div class="ptitle">杠杆率</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.StrikeGearingFactor" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
            </template>
            <!----------------雪球期权---------------->
            <template v-if="fieldState.SnowBall">
                <!---雪球期权敲出--->
                <div class="ptitle">敲出障碍价格</div>
                <div class="pitem">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.KOBarrier" v-on:input="changeKOBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle">敲出赔付类别</div>
                <div class="pitem">
                    <vue-niceselect name="KOPayoffType" :items="snowballKOPayoffTypeEnums" v-model="trade.KOPayoffType" v-on:input="changeFieldState" />
                </div>
                <div class="ptitle" v-show="fieldState.IsFixedCoupon">票息年化</div>
                <div class="pitem" v-show="fieldState.IsFixedCoupon">
                    <vue-niceselect name="IsFixedCoupon" :items="consFalseAsYes" v-model="trade.IsFixedCoupon" />
                </div>
                <div class="ptitle" v-show="fieldState.KORebate">票息率</div>
                <div class="pitem yt-input-group" v-show="fieldState.KORebate">
                    <div><vue-number-input v-model="trade.KORebate" v-on:input="changeRebate" v-bind:format="inputFormatPremiumRate"></vue-number-input></div>
                    <a href="javascript:;" v-on:click="calcKORebate()" v-show="fieldState.showKnockinObservation" class="yt-input-group-append" tabindex="-1">
                        <span title="根据权利金反算票息" class="fa fa-refresh"></span>
                    </a>
                </div>
                <div class="ptitle" v-show="fieldState.IsFixedCoupon">票息日历规则</div>
                <div class="pitem" v-show="fieldState.IsFixedCoupon">
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                <div class="ptitle" v-show="fieldState.KORebate">票息包含首日</div>
                <div class="pitem" v-show="fieldState.KORebate">
                    <vue-niceselect name="CouponIncludeStartDate" :items="consFalseAsNo" v-model="trade.CouponIncludeStartDate" v-once />
                </div>
                <div class="ptitle" v-show="fieldState.KORebate">使用支付日计息</div>
                <div class="pitem" v-show="fieldState.KORebate">
                    <vue-niceselect name="CouponUsePaymentDate" :items="consFalseAsNo" v-model="trade.CouponUsePaymentDate" />
                </div>
                <div class="ptitle" v-show="fieldState.AnnualizedPremiumRate">年化期权费率</div>
                <div class="pitem yt-input-group " v-show="fieldState.AnnualizedPremiumRate">
                    <div><vue-number-input v-model="trade.AnnualizedPremiumRate" v-bind:format="inputFormatPremiumRate"></vue-number-input></div>
                    <a href="javascript:;" v-on:click="calcSnowballAnnualPremium()" class="yt-input-group-append" tabindex="-1">
                        <span title="保本雪球计算年化期权费率" class="fa fa-refresh"></span>
                    </a>
                </div>
                <div class="ptitle" v-show="fieldState.SpreadStrikeAtKO1">敲出行权价1</div>
                <div class="pitem" v-show="fieldState.SpreadStrikeAtKO1">
                    <vue-number-input v-model="trade.SpreadStrikeAtKO1" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle" v-show="fieldState.SpreadStrikeAtKO">敲出行权价2</div>
                <div class="pitem" v-show="fieldState.SpreadStrikeAtKO">
                    <vue-number-input v-model="trade.SpreadStrikeAtKO" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">敲出支付方式</div>
                <div class="pitem">
                    <vue-niceselect name="KORebateType" :items="consKORebateTypes" v-model="trade.KORebateType" />
                </div>
                <div class="ptitle screenshot-hide">敲出观察频率</div>
                <div class="pitem screenshot-hide">
                    <div class="yt-input-group">
                        <input type="text" v-model="koObservationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append show" title="设置观察日" v-on:click="setObservationDates('#KO')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <!---雪球期权敲入--->
                <div class="ptitle">初始敲入</div>
                <div class="pitem">
                    <vue-niceselect name="IsInitialKnockedIn" :items="consFalseAsNo" v-model="trade.IsInitialKnockedIn" v-on:input="changeFieldState" />
                </div>
                <div class="ptitle screenshot-hide" v-show="fieldState.showKnockinObservation">敲入观察频率</div>
                <div class="pitem screenshot-hide" v-show="fieldState.showKnockinObservation">
                    <div class="yt-input-group">
                        <input type="text" v-model="observationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append show" title="设置观察日" v-on:click="setObservationDates('#KI')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="ptitle" v-show="fieldState.showKnockinObservation">敲入障碍价格</div>
                <div class="pitem" v-show="fieldState.showKnockinObservation">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.KIBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle">敲入到期支付类别</div>
                <div class="pitem">
                    <vue-niceselect name="KIPayoffType" :items="snowballKIPayoffTypeEnums" v-model="trade.KIPayoffType" v-on:input="changeFieldState" :key="updateKey.KIPayoffType" />
                </div>
                <div class="ptitle" v-show="fieldState.SpreadStrike1">敲入行权价</div>
                <div class="pitem" v-show="fieldState.SpreadStrike1">
                    <vue-number-input v-model="trade.SpreadStrike1" v-bind:format="inputFormatStrike" v-on:input="changeSpreadStrike1"></vue-number-input>
                </div>
                <div class="ptitle" v-show="fieldState.SpreadStrike">封底/封顶行权价</div>
                <div class="pitem" v-show="fieldState.SpreadStrike">
                    <vue-number-input v-model="trade.SpreadStrike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">红利票息</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.Coupon" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                </div>
            </template>
            <!--------------凤凰期权---------------->
            <template v-if="fieldState.AutoCall">
                <div class="ptitle">票息年化</div>
                <div class="pitem">
                    <vue-niceselect name="IsFixedCoupon" :items="consFalseAsYes" v-model="trade.IsFixedCoupon" />
                </div>
                <div class="ptitle">票息率</div>
                <div class="pitem yt-input-group">
                    <vue-number-input name="Coupon" v-model="trade.Coupon" v-on:input="changeRebate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <a href="javascript:;" v-on:click="calcPhoenixCouponRate()" class="yt-input-group-append" tabindex="-1">
                        <span title="根据权利金反算票息" class="fa fa-refresh"></span>
                    </a>
                </div>
                <div class="ptitle">票息障碍价格</div>
                <div class="pitem">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.CouponBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle">票息日历规则</div>
                <div class="pitem">
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                <div class="ptitle">票息包含首日</div>
                <div class="pitem">
                    <vue-niceselect name="CouponIncludeStartDate" :items="consFalseAsNo" v-model="trade.CouponIncludeStartDate" v-once />
                </div>
                <div class="ptitle">票息结算方式</div>
                <div class="pitem">
                    <vue-niceselect name="CouponPayType" :items="consCouponPayTypes" v-model="trade.CouponPayType" v-on:input="changeCouponPayType" />
                </div>
                <div class="ptitle">敲出障碍价格</div>
                <div class="pitem">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.KOBarrier" v-on:input="changeKOBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle screenshot-hide">敲出观察频率</div>
                <div class="pitem screenshot-hide">
                    <div class="yt-input-group">
                        <input type="text" v-model="koObservationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append show" title="设置观察日" v-on:click="setObservationDates('#KO')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="ptitle screenshot-hide">敲入观察频率</div>
                <div class="pitem screenshot-hide">
                    <div class="yt-input-group">
                        <input type="text" v-model="observationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append show" title="设置观察日" v-on:click="setObservationDates('#KI')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="ptitle">敲入障碍价格</div>
                <div class="pitem">
                    <div class="yt-input-group">
                        <vue-number-input v-model="trade.KIBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.IsMoneynessOption==='是'" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle">敲入到期是否支付票息</div>
                <div class="pitem">
                    <div v-if="trade.CouponPayType===2">
                        <vue-niceselect name="IncludeCouponAfterKI" :items="consTrueAsYes" v-model="trade.IncludeCouponAfterKI" />
                    </div>
                    <div v-else>是</div>
                </div>
                <div class="ptitle">敲入到期支付类别</div>
                <div class="pitem">
                    <vue-niceselect name="KIPayoffType" :items="autocallKIPayoffTypeEnums" v-model="trade.KIPayoffType" v-on:input="changeFieldState" :key="updateKey.KIPayoffType" />
                </div>
                <div class="ptitle" v-show="fieldState.SpreadStrike1">敲入行权价</div>
                <div class="pitem" v-show="fieldState.SpreadStrike1">
                    <vue-number-input v-model="trade.SpreadStrike1" v-bind:format="inputFormatStrike" v-on:input="changeSpreadStrike1"></vue-number-input>
                </div>
                <div class="ptitle" v-show="fieldState.SpreadStrike">封顶/封底行权价</div>
                <div class="pitem" v-show="fieldState.SpreadStrike">
                    <vue-number-input v-model="trade.SpreadStrike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
            </template>
            <!--------------区间累计---------------->
            <template v-if="fieldState.RangeAcc">
                <div class="ptitle">区间下限</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.LowerRange" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">区间上限</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.UpperRange" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">区间收益</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.BonusRate" v-bind:format="inputFormatPercent4"></vue-number-input>
                </div>
            </template>
            <!--------------气囊结构---------------->
            <template v-if="fieldState.AirBag">
                <div class="ptitle">障碍价格</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.BarrierLow" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle">观察方式</div>
                <div class="pitem">
                    <vue-niceselect name="IsDiscreteMonitored" :items="consIsDiscreteMonitored" v-model="trade.IsDiscreteMonitored" />
                </div>
                <div class="ptitle">敲入参与率</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.KIParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="ptitle">收益封顶</div>
                <div class="pitem">
                    <vue-niceselect name="HasPayoffLimit" :items="consTrueAsYes" v-model="trade.HasPayoffLimit" />
                </div>
                <div class="ptitle">收益封顶价格</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.HighStrike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
            </template>
            <!--------------收益增强结构---------------->
            <template v-if="fieldState.UnEnhance">
                <div class="ptitle">年化增强收益</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.AnnualizedEnhanceRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
            </template>
            <!--------------累计期权---------------->
            <template v-if="fieldState.Accumulator">
                <div class="ptitle">沽购数量</div>
                <div class="pitem">
                    <vue-number-input v-model="trade.AccumuTradeAmount" v-on:input="changeAccumuTradeAmount" v-bind:format="inputFormatTradeAmountV"></vue-number-input>
                </div>

                <div class="ptitle">累计结构类型</div>
                <div class="pitem">
                    <vue-niceselect name="AccumulatorStructureType" :items="AccumulatorStructureTypeEnums" v-model="trade.AccumulatorStructureType" v-on:input="changePayoffType" />
                </div>
                <div class="ptitle">敲出障碍价格</div>
                <div class="pitem">
                    <vue-number-input name="KOBarrier" v-model="trade.KOBarrier" v-on:input="changeKOBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="ptitle screenshot-hide">观察日</div>
                <div class="pitem screenshot-hide">
                    <div class="yt-input-group">
                        <input type="text" v-model="koObservationRate" name="koObservationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append show" title="设置观察日" v-on:click="setObservationDates('#KO')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="ptitle">上端收益类型</div>
                <div class="pitem">
                    <vue-niceselect :items="AccumulatorPayoffTypeEnums" name="PayoffType" v-model="trade.PayoffType" v-on:input="changePayoffType" />
                </div>
                <div class="ptitle" v-show="fieldState.ShowCouponOption && !fieldState.ShowSanDuanShi">票息</div>
                <div class="ptitle" v-show="fieldState.ShowCouponOption && fieldState.ShowSanDuanShi">票息1</div>
                <div class="pitem" v-show="fieldState.ShowCouponOption">
                    <div class="yt-input-group">
                        <vue-number-input name="Coupon" v-model="trade.Coupon" v-bind:format="trade.CouponPercent?inputFormatPercent:inputFormatDouble2"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.CouponPercent" v-on:click="trade.CouponPercent=false" title="点击后切换成数值格式" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="trade.CouponPercent=true" title="点击后切换成百分比格式" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle" v-show="fieldState.ShowCouponOption && fieldState.ShowSanDuanShi">票息2</div>
                <div class="pitem" v-show="fieldState.ShowCouponOption && fieldState.ShowSanDuanShi">
                    <div class="yt-input-group">
                        <vue-number-input name="Coupon2" v-model="trade.Coupon2" v-bind:format="trade.CouponPercent?inputFormatPercent:inputFormatDouble2"></vue-number-input>
                        <span class="yt-input-group-append">
                            <a href="javascript:;" v-if="trade.CouponPercent" v-on:click="trade.CouponPercent=false" title="点击后切换成数值格式" tabindex="-1">%</a>
                            <a href="javascript:;" v-else v-on:click="trade.CouponPercent=true" title="点击后切换成百分比格式" tabindex="-1">￥</a>
                        </span>
                    </div>
                </div>
                <div class="ptitle" v-show="fieldState.ShowCouponOption">票息年化</div>
                <div class="pitem" v-show="fieldState.ShowCouponOption">
                    <vue-niceselect :items="AccumulatorIsFixedCouponEnums" name="IsFixedCoupon" v-model="trade.IsFixedCoupon" />
                </div>
                <div class="ptitle" v-show="fieldState.ShowCouponOption">票息日历规则</div>
                <div class="pitem" v-show="fieldState.ShowCouponOption">
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                <div v-show="fieldState.ShowSanDuanShi" class="ptitle">乘数1 </div>
                <div v-show="fieldState.ShowSanDuanShi" class="pitem">
                    <vue-number-input name="Multiplier" v-model="trade.Multiplier" v-bind:disabled="(trade.PayoffType==='固定' && trade.OptionType==='看跌')" v-bind:format="inputFormatDouble2"></vue-number-input>
                </div>
                <div v-show="fieldState.ShowSanDuanShi" class="ptitle">乘数2</div>
                <div v-show="fieldState.ShowSanDuanShi" class="pitem">
                    <vue-number-input name="Multiplier2" v-model="trade.Multiplier2" v-bind:disabled="(trade.PayoffType==='固定')" v-bind:format="inputFormatDouble2"></vue-number-input>
                </div>
                <div v-show="fieldState.ShowSanDuanShi" class="ptitle">乘数3</div>
                <div v-show="fieldState.ShowSanDuanShi" class="pitem">
                    <vue-number-input name="Multiplier3" v-model="trade.Multiplier3" v-bind:disabled="(trade.PayoffType==='固定' && trade.OptionType==='看涨')" v-bind:format="inputFormatDouble2"></vue-number-input>
                </div>
                @if (PS.Config.ErpElement.AccumulatorShowMultiplier1)
                {
                    <div v-show="!fieldState.ShowSanDuanShi" class="ptitle">杠杆倍数</div>
                    <div v-show="!fieldState.ShowSanDuanShi" class="pitem">
                        <vue-number-input name="StrikeGearingFactor" v-model="trade.StrikeGearingFactor" v-bind:format="inputFormatDouble2"></vue-number-input>
                    </div>
                }
                else
                {
                    <div v-show="!fieldState.ShowSanDuanShi" class="ptitle">看涨乘数</div>
                    <div v-show="!fieldState.ShowSanDuanShi" class="pitem">
                        <vue-number-input name="CallMultiplier" v-model="trade.CallMultiplier" v-bind:format="inputFormatDouble2"></vue-number-input>
                    </div>
                    <div v-show="!fieldState.ShowSanDuanShi" class="ptitle">看跌乘数</div>
                    <div v-show="!fieldState.ShowSanDuanShi" class="pitem">
                        <vue-number-input name="PutMultiplier" v-model="trade.PutMultiplier" v-bind:format="inputFormatDouble2"></vue-number-input>
                    </div>
                }
                <div class="ptitle">敲出是否终止</div>
                <div class="pitem">
                    <div v-if="!fieldState.ShowSanDuanShi">
                        <vue-niceselect :items="AccumulatorEarlyTerminateEnums" name="EarlyTerminate" v-model="trade.EarlyTerminate" />
                    </div>
                    <div v-else>否</div>
                </div>
            </template>
            <!--------------现金流交易-------------->
            <template v-if="fieldState.Cashflow">
                <div class="ptitle">利率</div>
                <div class="pitem-cash">
                    <vue-number-input name="ProfitRate" v-model="trade.ProfitRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                </div>
                <div class="ptitle">资金类型</div>
                <div class="pitem-cash">
                    <vue-niceselect name="DepositType" :items="consDepositType" v-model="trade.DepositType" v-on:input="changeDepositType" />
                </div>
                <div class="ptitle">利率类型</div>
                <div class="pitem-cash">
                    <vue-niceselect name="RateType" :items="consRateType" v-model="trade.RateType" />
                </div>
                <div class="ptitle">计算日历规则</div>
                <div class="pitem-cash">
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                <div class="ptitle">预付返还比例</div>
                <div class="pitem-cash">
                    <vue-number-input v-show="trade.DepositType=='0'" name="PrepayRatio" v-model="trade.PrepayRatio" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                </div>
            </template>
            <!--------------观察频率---------------->
            <template v-if="fieldState.ObservationDatesShow">
                <div class="ptitle screenshot-hide">观察频率</div>
                <div class="pitem screenshot-hide">
                    <div class="yt-input-group" v-if="trade.TradeType!=='二元期权'||(trade.TradeType==='二元期权'&&trade.ExerciseMode === 'American')">
                        <input type="text" v-model="observationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append show" title="设置观察日" v-on:click="setObservationDates('#KI')">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
            </template>
        </template>

        <!--收益结算-->
        <template v-if="floating||!topVue.simpleMode">
            <div class="ptitle screenshot-hide">收益结算</div>
            <div class="pitem screenshot-hide">
                <vue-niceselect name="SettlementType" :items="tradeHelper.SettlementTypes" v-model="trade.SettlementType" />
            </div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

        <!---波动率--->
        <template v-if="pageVue.IsTradeVol">
            <div class="ptitle screenshot-hide">成交波动率</div>
            <div class="pitem screenshot-hide yt-input-group" v-bind:class="viewState.VolState">
                <a v-if="viewState.VolLockState=='lock'" href="javascript:;" v-on:click="unlockVolState" title="解除锁定" class="yt-input-group-append-left" tabindex="-1">
                    <i class="fa fa-lock" style="color:#fa9f2f;"></i>
                </a>
                <a v-else href="javascript:;" v-on:click="lockVolState" title="锁定" class="yt-input-group-append-left" tabindex="-1">
                    <i class="fa fa-unlock" style="color:#fa9f2f;"></i>
                </a>
                <vue-number-input v-model="trade.TradeOpenVolatility" v-on:input="changeOpenVolatility" v-bind:format="inputFormatVolPercent"></vue-number-input>
                <a href="javascript:;" v-on:click="getTradeOpenVolatility" title="使用波动率曲面中的插值数据" class="yt-input-group-append" tabindex="-1">
                    <i class="fa fa-refresh"></i>
                </a>
                <a href="javascript:;" v-on:click="getTradeImpliedVol" title="计算隐含波动率" class="yt-input-group-append s1" tabindex="-1" v-show="trade.TradeType==='香草期权'">
                    <i class="fa fa-calculator"></i>
                </a>
            </div>
            <div class="pitem-cash screenshot-hide"></div>

            <template v-if="pageVue.SkewMapVol">
                <div class="ptitle screenshot-hide">目标波动率</div>
                <div class="pitem screenshot-hide">
                    <vue-number-input v-model="trade.TradeCloseVolatility" v-on:input="getTradeOpenVolatility('user')" v-bind:format="inputFormatVolPercent"></vue-number-input>
                </div>
                <div class="ptitle screenshot-hide">Var</div>
                <div class="pitem screenshot-hide">
                    <input type="number" min="0" v-on:change="getTradeOpenVolatility('user')" v-model="trade.Var" step="1" />
                </div>
                <div class="pitem-cash screenshot-hide"></div>
            </template>

            <template v-else>
                <div class="ptitle screenshot-hide">目标波动率</div>
                <div class="pitem screenshot-hide yt-input-group" v-on:input="changeCloseVolatility" v-bind:class="viewState.CloseVolState">
                    <vue-number-input v-model="trade.TradeCloseVolatility" v-bind:format="inputFormatVolPercent"></vue-number-input>
                    <a href="javascript:;" v-on:click="getTradeCloseVolatility" title="使用波动率曲面中的插值数据" class="yt-input-group-append" tabindex="-1">
                        <i class="fa fa-refresh"></i>
                    </a>
                </div>
                <div class="pitem-cash screenshot-hide"></div>
            </template>

            <div class="ptitle screenshot-hide">平滑过渡天数</div>
            <div class="pitem screenshot-hide"><input type="number" min="0" v-model="trade.NumOfSmoothingDays" /></div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>
        <template v-else>
            <div class="ptitle screenshot-hide">波动率</div>
            <div class="pitem screenshot-hide yt-input-group" v-bind:class="viewState.VolState">
                <vue-number-input v-model="trade.Vol" v-bind:format="inputFormatVolPercent" v-on:input="changeOpenVolatility"></vue-number-input>
                <a href="javascript:;" v-on:click="getTradeOpenVolatility" title="更新波动率" class="yt-input-group-append" tabindex="-1">
                    <i class="fa fa-refresh"></i>
                </a>
                <a href="javascript:;" v-on:click="getTradeImpliedVol" title="计算隐含波动率" class="yt-input-group-append s1" tabindex="-1" v-show="trade.TradeType==='香草期权'">
                    <i class="fa fa-calculator"></i>
                </a>
            </div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

        <div class="ptitle screenshot-hide">无风险利率</div>
        <div class="pitem pitem-cash yt-input-group screenshot-hide" v-bind:class="viewState.NoRiskRate">
            <vue-number-input v-model="trade.NoRiskRate" v-on:input="changeNoRiskRate" v-bind:format="inputFormatPercent"></vue-number-input>
            <a href="javascript:;" v-on:click="getNoRiskRate" class="yt-input-group-append" tabindex="-1">
                <span title="获取系统设定的无风险利率" class="fa fa-refresh"></span>
            </a>
        </div>

        <template>
            <div class="ptitle screenshot-hide">分红率</div>
            <div class="pitem screenshot-hide">
                <div class="yt-input-group" v-bind:class="viewState.DividendRate" v-if="trade.UnderlyingInstrumentType==='Stock'||trade.UnderlyingInstrumentType==='StockIndex'">
                    <vue-number-input v-model="trade.DividendRate" v-on:input="changeDividendRate" v-bind:format="inputFormatPercentN"></vue-number-input>
                    <a href="javascript:;" v-on:click="getDividendRate" class="yt-input-group-append" tabindex="-1">
                        <span title="获取系统设定的分红率" class="fa fa-refresh"></span>
                    </a>
                </div>
            </div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

        <div class="ptitle screenshot-hide">TTM(Days)</div>
        <div class="pitem yt-input-group screenshot-hide" v-bind:class="viewState.TTMDays">
            <input type="number" min="0" v-on:change="changeTTM" v-model="trade.TTMDays" />
            <a href="javascript:;" v-on:click="getTTM(true)" class="yt-input-group-append s1" tabindex="-1">
                <span title="获取交易日期和到期日期之间工作日的长度" class="fa fa-refresh"></span>
            </a>
        </div>
        <div class="pitem-cash screenshot-hide"></div>

        <!--年化系数-->
        <template v-if="floating|| !topVue.simpleMode">
            <template v-if="fieldState.SnowBall||fieldState.AutoCall">
                <div class="ptitle screenshot-hide">是否年化</div>
                <div class="pitem screenshot-hide">
                    <vue-niceselect name="IsAnnualized2" :items="consFalseAsNo" v-model="trade.IsAnnualized2" v-on:input="changeIsAnnualized" />
                </div>
                <div class="pitem-cash screenshot-hide"></div>

                <div class="ptitle screenshot-hide">年化系数</div>
                <div class="pitem screenshot-hide">
                    <div class="row no-gutters" v-if="trade.IsAnnualized2">
                        <div class="col">
                            <vue-number-input name="AnnualizeFactor2" v-model="AnnualizeFactor2.ttmDays" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-right pr-2"></vue-number-input>
                        </div>
                        <div class="col-auto" style="width:1rem">/</div>
                        <div class="col">
                            <vue-number-input name="AnnualizeFactor2" v-model="AnnualizeFactor2.daysInYear" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-left pl-2"></vue-number-input>
                        </div>
                    </div>
                </div>
                <div class="pitem-cash screenshot-hide"></div>
            </template>
            <template v-else>
                <div class="ptitle screenshot-hide">是否年化</div>
                <div class="pitem screenshot-hide">
                    <vue-niceselect name="IsAnnualized" :items="consFalseAsNo" v-model="trade.IsAnnualized" v-on:input="changeIsAnnualized" />
                </div>
                <div class="pitem-cash screenshot-hide"></div>

                <div class="ptitle screenshot-hide">年化系数</div>
                <div class="pitem screenshot-hide">
                    <div class="row no-gutters" v-if="trade.IsAnnualized">
                        <div class="col">
                            <vue-number-input v-model="AnnualizeFactor.ttmDays" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-right pr-2"></vue-number-input>
                        </div>
                        <div class="col-auto" style="width:1rem">/</div>
                        <div class="col">
                            <vue-number-input v-model="AnnualizeFactor.daysInYear" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-left pl-2"></vue-number-input>
                        </div>
                    </div>
                </div>
                <div class="pitem-cash screenshot-hide"></div>

            </template>
        </template>

        <!--成交溢价-->
        @if (PS.Config.ErpElement.CanSetTradePremium)
        {
            <div class="ptitle">成交溢价</div>
            <div class="pitem seal">
                <div class="yt-input-group" v-bind:class="viewState.TradePremium">
                    <vue-number-input name="TradePremium" v-model="trade.TradePremium" v-on:input="changeEffectRatio" v-bind:format="inputFormatPercent" />
                </div>
            </div>
            <div class="pitem-cash seal"></div>
        }

        <!--单笔预付金-->
        <template v-if="floating||!topVue.simpleMode">
            <div class="ptitle screenshot-hide">预付金模板</div>
            <div class="pitem screenshot-hide">
                <vue-margintemplatename v-model="trade.MarginTemplateName" v-on:input="changeMarginTemplate" />
            </div>
            <div class="pitem-cash screenshot-hide"></div>
            @if (PS.Config.Company == CompanyEnum.国海)
            {
                <template v-if="pageVue.ClientUsedForCalc">
                    <div class="ptitle screenshot-hide">CCR指标k值</div>
                    <div class="pitem screenshot-hide">
                        <vue-number-input @*v-if="trade.MarginType==0"*@ id="ccr_k" name="ccr_k" v-model="trade.ccr_k"></vue-number-input>
                    </div>
                    <div class="pitem-cash screenshot-hide"></div>
                </template>
                <div class="ptitle screenshot-hide">信用风险敞口</div>
                <div class="pitem screenshot-hide">
                    <vue-niceselect name="ignoreRiskExposure" :items="consRiskExposureType" v-model="trade.ignoreRiskExposure" />
                </div>
                <div class="pitem-cash screenshot-hide"></div>
            }

            <div class="ptitle screenshot-hide">初始预付金率</div>
            <div class="pitem screenshot-hide">
                <vue-number-input v-if="trade.MarginType>1" v-model="trade.MarginRate" v-bind:format="inputFormatMarginRate"></vue-number-input>
            </div>
            <div class="pitem-cash screenshot-hide"></div>

            <div class="ptitle screenshot-hide">持仓预付金率</div>
            <div class="pitem screenshot-hide">
                <vue-number-input v-if="trade.MarginType==2" v-model="trade.PositionMarginRate" v-bind:format="inputFormatMarginRate"></vue-number-input>
            </div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

        <div class="ptitle screenshot-hide">交易备注</div>
        <div class="pitem pitem-cash screenshot-hide">
            <input type="text" v-model="trade.Comments" maxlength="50" />
        </div>

        <!--定价模型-->
        <template v-if="floating||!topVue.simpleMode">
            <div class="ptitle screenshot-hide">定价模型</div>
            <div class="pitem screenshot-hide">
                <vue-niceselect name="EngineName" :items="engineNames" v-model="trade.EngineName" :disabled="!canEditEngineName" />
            </div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

        <!--单笔计算结果-->
        <div class="ptitle screenshot-hide" style="height:130px;background: #fff;border:0;">
            <div class="ptitle-calc-result" style="border-bottom:1px solid #ddd;">单笔计算结果</div>
            <div style="height: 54px;" v-show="!floating">
                <div>
                    <button type="button" class="btn btn-primary mt-3" onclick="pricingVue.calcPrice()">定价计算</button>
                </div>
                <div>
                    <button type="button" class="btn btn-primary mt-3" onclick="pricingVue.combine()">自由组合</button>
                </div>
            </div>
        </div>

        <div class="pitem pitem-cash border-0 screenshot-hide" style="height:@(calcQuotas.CalcQuota.Count(p=>p.IsShow)*23)px">
            <table class="table table-bordered table-calc-result-1">
                @*<tbody>
                    <tr>
                        <th style="width:50%">PV</th>
                        <th style="width:50%" title="每报价单位Delta*手数">Delta</th>
                    </tr>
                    <tr>
                        <td style="width:50%">{{calcResult.Pv}}</td>
                        <td style="width:50%">{{calcResult.Delta}}</td>
                    </tr>
                    <tr>
                        <th title="每报价单位Gamma*手数">Gamma</th>
                        <th title="每报价单位Vega*交易份额">Vega</th>
                    </tr>
                    <tr>
                        <td>{{calcResult.Gamma}}</td>
                        <td>{{calcResult.Vega}}</td>
                    </tr>
                    <tr>
                        <th title="每报价单位Theta*交易份额">Theta</th>
                        <th title="每报价单位Rho*交易份额*100">Rho</th>
                    </tr>
                    <tr>
                        <td>{{calcResult.Theta}}</td>
                        <td>{{calcResult.Rho}}</td>
                    </tr>
                    <tr>
                        <th title="PV*">PV*</th>
                        <th title="Delta*">Delta*</th>
                    </tr>
                    <tr>
                        <td>{{calcResult.PvContainsKnockOut}}</td>
                        <td>{{calcResult.DeltaContainsKnockOut}}</td>
                    </tr>
                </tbody>*@
                <tbody>

                    @foreach(var quta in calcQuotas.CalcQuota)
                    {
                        if(quta.IsShow)
                        {
                            if ("PV".Equals( quta.Name))
                            {
                                <tr>
                                    <th style="width:50%">PV</th>
                                    <td style="width:50%">{{calcResult.Pv}}</td>
                                </tr>
                            }
                            else if("Delta手数".Equals( quta.Name))
                            {
                                <tr>
                                    <th style="width:50%" title="每报价单位Delta*手数">Delta手数</th>
                                    <td style="width:50%">{{calcResult.DeltaInLots}}</td>
                                </tr>
                            }
                            else if("Gamma手数".Equals( quta.Name))
                            {
                                <tr>
                                    <th title="每报价单位Gamma*手数">Gamma手数</th>
                                    <td>{{calcResult.GammaInLots}}</td>
                                </tr>
                            }
                            else if ("Theta".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="每报价单位Theta*交易份额">Theta</th>
                                    <td>{{calcResult.Theta}}</td>
                                </tr>
                            }
                            else if("Vega".Equals( quta.Name))
                            {
                                <tr>
                                    <th title="每报价单位Vega*交易份额">Vega</th>
                                    <td>{{calcResult.Vega}}</td>
                                </tr>
                            }
                            else if("Rho".Equals( quta.Name))
                            {
                                <tr>
                                    <th title="每报价单位Rho*交易份额*100">Rho</th>
                                    <td>{{calcResult.Rho}}</td>
                                </tr>
                            }
                            else if("Delta".Equals( quta.Name))
                            {
                                <tr>
                                    <th style="width:50%" title="每报价单位Delta">Delta</th>
                                    <td style="width:50%">{{calcResult.Delta}}</td>
                                </tr>
                            }
                            else if("Gamma".Equals( quta.Name))
                            {
                                <tr>
                                    <th title="每报价单位Gamma">Gamma</th>
                                    <td>{{calcResult.Gamma}}</td>
                                </tr>
                            }
                            else if("Deltacash".Equals( quta.Name))
                            {
                                <tr>
                                    <th style="width:50%" title="">Deltacash</th>
                                    <td style="width:50%">{{calcResult.DeltaCash}}</td>
                                </tr>
                            }
                            else if ("Gammacash".Equals(quta.Name))
                            {
                                <tr>
                                    <th style="width:50%" title="">Gammacash</th>
                                    <td style="width:50%">{{calcResult.GammaCash}}</td>
                                </tr>
                            }
                            else if("Vegacash".Equals( quta.Name))
                            {
                                <tr>
                                    <th style="width:50%" title="">Vegacash</th>
                                    <td style="width:50%">{{calcResult.VegaCash}}</td>
                                </tr>
                            }
                            else if("PV*".Equals( quta.Name))
                            {
                                <tr>
                                    <th title="PV*">PV*</th>
                                    <td>{{calcResult.PvContainsKnockOut}}</td>
                                </tr>
                            }
                            else if("Delta*".Equals( quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Delta*</th>
                                    <td>{{calcResult.DeltaContainsKnockOut}}</td>
                                </tr>
                            }
                            else if("Gamma*".Equals( quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Gamma*</th>
                                    <td>{{calcResult.GammaContainsKnockOut}}</td>
                                </tr>
                            }
                            else if ("Delta_r".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Delta_r</th>
                                    <td>{{calcResult.Delta_r}}</td>
                                </tr>
                            }
                            else if ("Delta_r(1bp)".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Delta_r(1bp)</th>
                                    <td>{{calcResult.Delta_r_1bp}}</td>
                                </tr>
                            }
                            else if ("Dv01".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Dv01</th>
                                    <td>{{calcResult.Dv01}}</td>
                                </tr>
                            }
                            else if ("Gamma_r".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Gamma_r</th>
                                    <td>{{calcResult.Gamma_r}}</td>
                                </tr>
                            }
                            else if ("Gamma_r(1bp)".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Gamma_r(1bp)</th>
                                    <td>{{calcResult.Gamma_r_1bp}}</td>
                                </tr>
                            }
                            else if ("Vega_r".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Vega_r</th>
                                    <td>{{calcResult.Vega_r}}</td>
                                </tr>
                            }
                            else if ("Vega_r(1bp)".Equals(quta.Name))
                            {
                                <tr>
                                    <th title="Delta*">Vega_r(1bp)</th>
                                    <td>{{calcResult.Vega_r_1bp}}</td>
                                </tr>
                            }
                            
                        }
                    }
                </tbody>
            </table>
        </div>

        <div class="pitem screenshot-fill"></div>
    </div>
</template>