@*定价模板*@
@model PricingModel
@{ Layout = null;}

<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" v-show="!trade.hideCommen" v-bind:class="trade.hideCommen ? 'topborder' : ''">
                <vue-client v-model="trade.ClientId" v-on:input="changeClient" :update="updateKey.client" />
            </div>
            <div class="pitem empty" v-show="trade.hideCommen" v-bind:class="trade.hideCommen ? 'topborder' : ''"></div>
        </template>

        <div class="ptitle">期权类型</div>
        <div class="pitem" v-show="!trade.hideCommen">
            <vue-tradetype v-model="trade.TradeType" v-on:input="changeTradeType" v-bind:disabled="!!trade.StructureType" />
        </div>
        <div class="pitem empty" v-show="trade.hideCommen" v-bind:class="!pageVue.ClientUsedForCalc && trade.hideCommen ? 'topborder' : ''"></div>
        <div class="pitem-cash">
            <span>现金流</span>
        </div>

        <template v-if="!topVue.simpleMode" style="display:none">
            <div class="ptitle screenshot-hide">标的类型</div>
            <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                <vue-niceselect name="UnderlyingInstrumentType" :items="tradeHelper.InstrumentTypes" v-model="trade.UnderlyingInstrumentType" v-on:input="changeInstrumentType" />
            </div>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

        <template v-if="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">标的品种</div>
            <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                <vue-variety v-bind:variety="viewState.variety" v-on:change-variety="changeVariety" />
            </div>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

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

        <div class="ptitle">成交数量</div>
        <div class="pitem" v-show="!trade.hideCommen || trade.StructureType == '蝶式组合'">
            <vue-number-input v-model="trade.TradeAmountV" v-on:input="changeTradeAmountV" v-bind:format="inputFormatTradeAmountV" v-bind:disabled="!!trade.IsUsePremiumRate"></vue-number-input>
        </div>
        <div class="pitem empty" v-show="trade.hideCommen && trade.StructureType != '蝶式组合'"></div>
        <div class="pitem-cash"></div>

        <template v-if="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">有效成交数量</div>
            <div class="pitem screenshot-hide" v-show="!trade.hideCommen || trade.StructureType == '蝶式组合'">
                <vue-number-input v-model="trade.TradeAmount" v-on:input="changeTradeAmount" v-bind:format="inputFormatTradeAmount" v-bind:disabled="!!trade.IsUsePremiumRate"></vue-number-input>
            </div>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen && trade.StructureType != '蝶式组合'"></div>
            <div class="pitem-cash screenshot-hide"></div>

            <div class="ptitle screenshot-hide">名义本金</div>
            <div class="pitem pitem-cash screenshot-hide" v-show="!trade.hideCommen || trade.StructureType == '蝶式组合'">
                <input type="number" v-bind:disabled="!trade.IsUsePremiumRate" v-model="trade.StockEqvNotional" v-on:change="changeStockEqvNotional" />
            </div>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen && trade.StructureType != '蝶式组合'"></div>

            <div class="ptitle screenshot-hide">有效名义本金</div>
            <div class="pitem pitem-cash screenshot-hide" v-show="!trade.hideCommen || trade.StructureType == '蝶式组合'">
                <input type="number" v-bind:disabled="!trade.IsUsePremiumRate" v-model="trade.StockEqvNotionalReal" v-on:change="changeStockEqvNotionalReal" />
            </div>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen && trade.StructureType != '蝶式组合'"></div>
        </template>

        <template v-if="!floating||fieldState.ExerciseMode">
            <div class="ptitle">行权方式</div>
            <div class="pitem" v-show="!trade.hideCommen">
                <vue-niceselect name="ExerciseMode" :items="tradeHelper.ExerciseModes" v-model="trade.ExerciseMode" v-on:input="changeExerciseMode" v-if="showExerciseMode" v-bind:disabled="showExerciseMode===1" />
            </div>
            <div class="pitem empty" v-bind:class="trade.StructureType == '蝶式组合' ? 'topborder' : ''" v-show="trade.hideCommen"></div>
            <div class="pitem-cash"></div>
        </template>

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

        <div class="ptitle">到期日期</div>
        <div class="pitem pitem-cash" v-show="!trade.hideCommen  || trade.StructureType == '日历价差'">
            <vue-datepicker :maxdate="trade.MaturityDate" v-model="trade.ExerciseDate" :noholiday="fieldState.Cashflow" v-on:input="changeExerciseDate" />
        </div>
        <div class="pitem empty" v-show="trade.hideCommen && trade.StructureType != '日历价差'"></div>

        <template v-if="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">结算日期</div>
            <div class="pitem pitem-cash screenshot-hide" v-show="!trade.hideCommen  || trade.StructureType == '日历价差'">
                <vue-datepicker v-model="trade.SettlementDate" :noholiday="fieldState.Cashflow" v-on:input="changeSettlementDate" />
            </div>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen && trade.StructureType != '日历价差'"></div>
        </template>

        <div class="ptitle">期初标的价格</div>
        <div class="pitem seal" v-show="!trade.hideCommen">
            <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 empty" v-bind:class="trade.StructureType == '日历价差' ? 'topborder' : ''" v-show="trade.hideCommen"></div>
        <div class="pitem-cash seal"><span class="sr-only">期初标的价格</span></div>

        <template v-if="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">标的价格</div>
            <div class="pitem seal screenshot-hide" v-show="!trade.hideCommen">
                <div class="yt-input-group">
                    <input type="number" v-model="trade.UnderlyingPrice" v-on:input="synchTrade" 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 empty screenshot-hide" v-show="trade.hideCommen"></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">执行价格</div>
        <div class="pitem seal" v-show="!floating||!fieldState.AutoCall&&!fieldState.SnowBall">
            <div class="yt-input-group" v-if="!fieldState.AutoCall&&!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>

        <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" />
            </div>
            <div class="pitem-cash"></div>
        </template>

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

        <div class="ptitle">权利金</div>
        <div class="pitem yt-input-group">
            <template v-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="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">参与率</div>
            <div class="pitem screenshot-hide">
                <vue-number-input v-model="trade.ParticipationRate" v-on:input="changeEffectRatio" v-bind:format="inputFormatPercent"></vue-number-input>
            </div>
            <div class="pitem-cash screenshot-hide"></div>

            <div class="ptitle screenshot-hide">保底收益</div>
            <div class="pitem screenshot-hide">
                <template v-if="trade.IsUsePremiumRate">
                    <vue-number-input name="PrincipalRateWrite" 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-model="trade.SinglePrincipalWrite" v-on:input="changeEffectRatio" v-bind:format="inputFormatSinglePrincipalOnly"></vue-number-input>
                </template>
            </div>
            <div class="pitem-cash screenshot-hide"></div>

            <div class="ptitle screenshot-hide">保底收益总额</div>
            <div class="pitem yt-input-group screenshot-hide">
                <vue-number-input name="OriginalPrincipalSum" 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>
        </template>

        <div class="ptitle">成交金额</div>
        <div class="pitem pitem-cash">
            <vue-number-input v-model="trade.TradePrice" v-bind:disabled="!fieldState.Cashflow" v-bind:format="inputFormatTradePrice"></vue-number-input>
        </div>
        <div class="pitem-cash"></div>

        <!--初始预付金-->
        @if (Model.ShowInitialMargin)
        {
            //组合交易初始预付金不需要展示，只需要展示组合预付金
            <template v-if="topVue.calcMargin && !fieldState.ShowTotal">
                <div class="ptitle">初始预付金</div>
                <div class="pitem">
                    <div class="yt-input-group" v-bind:class="viewState.InitialMargin">
                        <vue-number-input v-on:change="changeInitialMargin" v-model="trade.InitialMargin" v-bind:format="inputFormatTradePrice" step="0.1"></vue-number-input>
                        <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"></div>
            </template>
        }

        <template v-if="fieldState.ShowTotal">
            <div class="ptitle">组合价格</div>
            <div class="pitem pitem-cash" v-show="!trade.hideCommen">
                <vue-number-input v-model="trade.TotalTradePrice" v-bind:format="inputFormatTradePrice" disabled></vue-number-input>
            </div>
            <div class="pitem empty topborder" v-show="trade.hideCommen"></div>
            <div class="pitem-cash"></div>
        </template>

        @if (Model.ShowInitialMargin)
        {
            <template v-if="topVue.calcMargin && fieldState.ShowTotal">
                <div class="ptitle">组合预付金</div>
                <div class="pitem" v-show="!trade.hideCommen">
                    <div class="yt-input-group" v-bind:class="viewState.InitialMargin">
                        <vue-number-input v-model="trade.TotalInitialMargin" v-bind:format="inputFormatTradePrice" disabled></vue-number-input>
                    </div>
                </div>
                <div class="pitem empty" v-show="trade.hideCommen"></div>
                <div class="pitem-cash"></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>
                            </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="(trade.BarrierType || '').endsWith('敲出')" 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">
                    <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()" 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 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">
                    <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.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>

        <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>

        <div class="ptitle screenshot-hide">Mid Vol</div>
        <div class="pitem screenshot-hide yt-input-group" v-bind:class="viewState.MidVolState">
            <vue-number-input v-model="trade.MidVol" v-bind:format="inputFormatVolPercent" v-on:input="changeOpenMidVolatility"></vue-number-input>
            <a href="javascript:;" v-on:click="getTradeMidVolatility" title="更新Mid Vol" class="yt-input-group-append" tabindex="-1">
                <i class="fa fa-refresh"></i>
            </a>
        </div>
        <div class="pitem-cash screenshot-hide"></div>

        <div class="ptitle screenshot-hide">Day1 Pnl</div>
        <div class="pitem pitem-cash screenshot-hide">
            <input type="number" v-model="trade.Day1Pnl" v-bind:format="inputFormatVolPercent" disabled />
        </div>

        <!--收益结算-->
        <template v-if="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">收益结算</div>
            <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                <vue-niceselect name="SettlementType" :items="tradeHelper.SettlementTypes" v-model="trade.SettlementType" v-on:input="synchTrade" />
            </div>
            <div class="pitem empty topborder screenshot-hide" v-show="trade.hideCommen"></div>
            <div class="pitem-cash screenshot-hide"></div>
        </template>

        <template v-if="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">无风险利率</div>
            <div class="pitem pitem-cash yt-input-group screenshot-hide" v-bind:class="viewState.NoRiskRate" v-show="!trade.hideCommen">
                <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>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></div>

            <template v-if="!floating&&fieldState.DividendRate">
                <div class="ptitle screenshot-hide">分红率</div>
                <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                    <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 empty screenshot-hide" v-show="trade.hideCommen"></div>
                <div class="pitem-cash screenshot-hide"></div>
            </template>
        </template>

        <div class="ptitle screenshot-hide">TTM(Days)</div>
        <div class="pitem yt-input-group screenshot-hide" v-bind:class="viewState.TTMDays" v-show="!trade.hideCommen">
            <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 empty screenshot-hide" v-show="trade.hideCommen"></div>
        <div class="pitem-cash screenshot-hide"></div>

        <!--------------结构化产品-------------->
        <template v-if="floating">
            <template v-if="fieldState.Structure">
                <div class="ptitle screenshot-hide">结算类型</div>
                <div class="pitem screenshot-hide">
                    <vue-niceselect :items="consCashAsPhysical" v-model="viewState.CashOrPhysical" v-on:input="setcashOrPhysical" />
                </div>
                <div class="ptitle screenshot-hide">结构要素</div>
                <div class="pitem screenshot-hide">
                    <div class="yt-input-group">
                        <input type="text" v-model="structure" />
                        <a href="javascript:;" class="yt-input-group-append show" title="结构要素" v-on:click="setStructureList()" 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('#ST')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
            </template>
        </template>

        <div class="ptitle screenshot-hide">工作日</div>
        <div class="pitem pitem-cash screenshot-hide" v-show="!trade.hideCommen">
            <input type="number" v-model="trade.Weekdays" disabled />
        </div>
        <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></div>

        <div class="ptitle screenshot-hide">交易日</div>
        <div class="pitem pitem-cash screenshot-hide" v-show="!trade.hideCommen">
            <input type="number" v-model="trade.TradingDays" disabled />
        </div>
        <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></div>

        <div class="ptitle screenshot-hide">公共假日</div>
        <div class="pitem pitem-cash screenshot-hide" v-show="!trade.hideCommen">
            <input type="number" v-model="trade.PublicHolidays" disabled />
        </div>
        <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></div>

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

                <div class="ptitle screenshot-hide">年化系数</div>
                <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                    <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 empty screenshot-hide" v-show="trade.hideCommen"></div>
                <div class="pitem-cash screenshot-hide"></div>
            </template>
            <template v-else>
                <div class="ptitle screenshot-hide">是否年化</div>
                <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                    <vue-niceselect name="IsAnnualized" :items="consFalseAsNo" v-model="trade.IsAnnualized" v-on:input="changeIsAnnualized" />
                </div>
                <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></div>
                <div class="pitem-cash screenshot-hide"></div>

                <div class="ptitle screenshot-hide">年化系数</div>
                <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                    <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 empty screenshot-hide" v-show="trade.hideCommen"></div>
                <div class="pitem-cash screenshot-hide"></div>
            </template>
        </template>

        <!--定价模型-->
        <template v-if="!topVue.simpleMode">
            <div class="ptitle screenshot-hide">定价模型</div>
            <div class="pitem screenshot-hide" v-show="!trade.hideCommen">
                <vue-niceselect name="EngineName" :items="engineNames" v-model="trade.EngineName" :disabled="!canEditEngineName" />
            </div>
            <div class="pitem empty screenshot-hide" v-show="trade.hideCommen"></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 v-show="!topVue.simpleMode">
                    <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:130px">
            <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="每报价单位GammaCash*手数">GammaCash</th>
                        <th title="每报价单位Vega*交易份额">Vega</th>
                    </tr>
                    <tr>
                        <td>{{calcResult.GammaCash}}</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>
                </tbody>
            </table>
        </div>

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