@model TradeEditViewModel

@{
    ViewBag.Title = "交易信息 | 编辑";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    if (Model.DiffList == null)
    {
        Model.DiffList = new HashSet<string>();
    }
    if (Model.IsCheck)
    {
        ViewBag.Title = "交易信息 | 编辑";
        Layout = "~/Views/Shared/_InfoLayout.cshtml";
    }
    if (ViewBag.abledColumn == null)
    {
        ViewBag.abledColumn = new List<string>();
    }
    var tradeTypeList = GlobalData.GetSelectItems(ConsTrade.OptionTradeTypeUsed);
    var tradeMarginTemplates = new tradeController().GetMarginTemplates();
    var tradeMarginTemplateItems = new tradeController().GetMarginTemplateItems();
    var tradeForwardDateType = new tradeController().GetForwardDateNameDic();
    var assetunits = JsDataModel.GetAssetUnits(CurUser);
    var traders = JsDataModel.GetTraders(assetunits);
    var pageObj = new
    {
        assetunits = assetunits,
        traders = JsDataModel.GetTraders(assetunits),
        isAdd = Model == null || Model.Trade.id == 0,
        id = (Model.Trade.id).ToString(),
        underlyingid = (Model.Trade.UnderlyingId).ToString(),
        underlyingCode = Model.Trade.UnderlyingCode ?? string.Empty,
        assetid = (Model.Trade.AssetId).ToString(),
        TradeType = ViewBag.TradeType,
        generateAmendDoc = PS.Config.TradeElement.IsGenerateAmendDoc,
        needSendChangeEmail = PS.Config.TradeElement.IsAmendableAfterConfirm && PS.Config.TradeElement.IsGenerateAmendDoc,
        abstractCompanyName = PS.Config.CompanyName ?? "",
        SalesCommission = Model.Trade.SalesCommission,
        tradeMarginTemplates = tradeMarginTemplates,
        tradeMarginTemplateItems = tradeMarginTemplateItems,
        tradeForwardDateType = tradeForwardDateType,
        lowVolLimit = ViewBag.lowVolLimit + "",
        highVolLimit = ViewBag.highVolLimit + "",
        traderList = traders,
        needRemark = !Model.IsNew && valuedateBLL.SystemDate.EditTradeNeedRemark,
        structureTypes = ViewBag.StructureTypeMap.Keys,
        extendInfos = ViewBag.ExtendInfoMap.Keys,
        PropertyMap = ViewBag.StructureTypeMap,
        ExtendMap = ViewBag.ExtendInfoMap,
        showCCR = PS.Config.Company == CompanyEnum.国海,
        ShowMultiplier = PS.Config.ErpElement.AccumulatorShowMultiplier1,
        is厦门象屿 = PS.Config.Company == CompanyEnum.厦门象屿,
        is宏源 = PS.Config.Company == CompanyEnum.宏源,
        eecuritiesEnvironment = PS.Config.ErpElement.SecuritiesEnvironment,
        calcCustomTrade = PS.Config.ErpElement.ExternalAPIForCustomCalcEnable,
        metaDic = Model.Trade.MetaDic,
        showZheQi = PS.Config.Is浙期,
        from = Context.Request.Query["from"].ToString()
    };
    var isCheck = (bool)ViewBag.IsCheck;
}

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

    <style>
        .selectize-input.disabled { background: #ebebe4 !important; }
        input:disabled + a { pointer-events: none; }
    </style>
}

    @section JS{
    <script type="text/javascript">
        const pageVue = @Json.Serialize(Model);
        const pageData = @Json.Serialize(pageObj);
        const abledList = @Json.Serialize(ViewBag.abledColumn);
        ylotc.traders = pageData.traders;
        ylotc.assetunits = pageData.assetunits;
        if (pageData.from === "specialsnowball") {
            let data = localStorage.getItem('pro__specialsnowball');
            data && (data = JSON.parse(data));
            if (data.TradeType) {
                Object.assign(pageVue.Trade, data);
                pageVue.Trade.PrepaymentUsed = true;
                pageVue.Trade.PremiumPayDate = pageData.is厦门象屿 ? pageVue.Trade.ExerciseDate : pageVue.Trade.StartDate;
                pageVue.fake_edit = true;
            }
        }
    </script>
    <script src="@HtmlUtil.BasicDataJs("品种","客户","簿记","交易员")"></script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>

    @if (PS.Config.Is润和)
    {
        <script src="~/Scripts/app/pricing/tradePricing_dz.js?v=@HtmlUtil.JsVersion"></script>
    }
    else
    {
        <script src="~/Scripts/app/pricing/tradePricing.js?v=@HtmlUtil.JsVersion"></script>
    }
    <script src="~/Scripts/app/trade/tradeEditV2.js?v=@HtmlUtil.JsVersion"></script>

    <script src="~/Scripts/app/trade/settag.js?v=@HtmlUtil.JsVersion" type="text/javascript"></script>
    <script type="text/javascript">
        const HasEditTagPermission = @Json.Serialize(CurUser.系统管理.标签编辑权限);
    </script>
}

    @await Html.PartialAsync("~/Views/Pricing/_CouponDayCount.cshtml")

    <form id="tradeEditForm" class="row" method="post" onsubmit="return false;" autocomplete="off" style="min-width:1100px">
        <div class="col-auto yc-panel" style="width:340px">
            <div class="form-group">
                <label class="formlabel">结构类型</label>
                <select name="TradeType" v-model="trade.TradeType" v-on:change="changeTradeType()">
                    <option value="香草期权">香草期权</option>
                    <option value="障碍期权">障碍期权</option>
                    <option value="二元期权">二元期权</option>
                    <option value="亚式期权">亚式期权</option>
                    <option value="合成价差期权">合成价差期权</option>
                    <option value="双鲨期权">双鲨期权</option>
                    <option value="区间累积期权">区间累积期权</option>
                    <option value="凤凰期权">凤凰期权</option>
                    <option value="雪球期权">雪球期权</option>
                    <option value="气囊结构">气囊结构</option>
                    <option value="收益增强结构">收益增强结构</option>
                    <option value="累计期权">累计期权</option>
                    <option value="现金流交易">现金流交易</option>
                    <option value="自定义交易">自定义交易</option>
                    <option value="Risky期权">Risky期权</option>
                @if (PS.Config.Is润和)
                {
                    <option value="结构化产品">结构化产品</option>
                }
            </select>
        </div>
        <div v-show="!fieldState.Cashflow">
            <div class="form-group" style="display:none">
                <label class="formlabel">标的资产类型</label>
                <select name="UnderlyingInstrumentType" v-model="trade.UnderlyingInstrumentType" v-on:change="changeInstrumentType">
                    <option v-for="item in tradeHelper.InstrumentTypes" :value="item.value">{{item.text}}</option>
                </select>
            </div>

            <div class="form-group">
                <label class="formlabel">标的品种</label>
                <input id="VarietyId" name="VarietyId" class="text-box" type="text">
            </div>

            <div class="form-group">
                <label class="formlabel">标的代码</label>
                <input id="UnderlyingCode" name="UnderlyingCode" class="text-box" type="text" title="@(Model.Trade.UnderlyingCode)" v-bind:disabled="trade.IsGroup == 2">
                <div v-show="Compositespread" style="width:20px;display:inline;" v-on:click="syntheticUnderlyingSetting()">
                    <img style="width:25px;" src="/Images/configure.png">
                </div>
            </div>

            <div class="form-group" v-show="viewState.underlying.Name">
                <label class="formlabel">标的名称</label>
                <input class="text-box" name="underlyingName" type="text" v-model="viewState.underlying.Name" readonly>
            </div>

            <div class="form-group" v-show="showMaturityDate">
                <label class="formlabel">标的到期日</label>
                <input name="MaturityDate" v-model="viewState.underlying.MaturityDate" readonly class="text-box" type="text">
            </div>

            <div class="form-group" v-show="showTradeUnit">
                <label class="formlabel">交易单位</label>
                <input name="TradeUnit" v-model="viewState.variety.TradeUnit" readonly class="text-box" type="text">
            </div>

            <div class="form-group" v-show="showTradeUnit">
                <label class="formlabel">报价单位</label>
                <input name="QuoteUnit" v-model="viewState.variety.QuoteUnit" readonly class="text-box" type="text">
            </div>
            <div class="form-group">
                <label class="formlabel">计价币种</label>
                <input class="text-box" type="text" name="QuoteCurrency" v-model="trade.QuoteCurrency" readonly />
            </div>
            <div class="form-group" v-show="trade.QuoteCurrency && trade.QuoteCurrency!=='CNY'">
                <label class="formlabel">汇率</label>
                <input name="ExchangeRate" v-model="trade.ExchangeRate" type="text" />
            </div>
        </div>
        @if (Model.CanSelectTrader)
        {
            <div class="form-group">
                <label class="formlabel">交易员</label>
                <input name="TraderId" id="TraderId" class="text-box" type="text" value="@(Model.Trade.TraderName)">
            </div>
        }
        else
        {
            <div class="form-group">
                <label class="formlabel">交易员</label>
                <input name="TraderName" class="text-box" type="text" value="@(Model.Trade.TraderName)" readonly>
            </div>
        }

        <div class="form-group">
            <label class="formlabel">簿记账户</label>
            <input id="AssetId" name="AssetId" class="text-box" type="text">
        </div>

        @if (Model.IsNew || PS.Config.ErpElement.CanEditTradeNumber)
        {
            <div class="form-group">
                <label class="formlabel">交易编号</label>
                <input name="TradeNumber" class="text-box @(Model.UpperTradeNumber?"text-uppercase":"")" type="text" v-model="trade.TradeNumber" placeholder="留空自动生成">
            </div>
        }
        <template v-if="!fieldState.Cashflow">
            <div class="form-group">
                <label class="formlabel">成交方式</label>
                <select name="IsUsePremiumRate" v-model="trade.IsUsePremiumRate" v-on:change="changeIsUsePremiumRate">
                    <option :value="true" v-bind:disabled="trade.TradeType==='累计期权'">名义本金</option>
                    <option :value="false">成交数量</option>
                </select>
            </div>

            <div class="form-group">
                <label class="formlabel">总额成交</label>
                <select name="IsTradePricePayType" v-model="trade.IsTradePricePayType">
                    <option :value="true">是</option>
                    <option :value="false">否</option>
                </select>
            </div>
        </template>
        <div id="salesCommissionCtrl"></div>
        <div v-if="trade.TradeType!='现金流交易' && trade.TradeType!='自定义交易'">
            <div class="form-group">
                <label class="formlabel">预付金模板</label>
                <input name="MarginTemplateName" id="MarginTemplateName" class="text-box" type="text">
            </div>
            @if (pageObj.showCCR)
            {
                <div class="form-group">
                    <label class="formlabel">CCR指标k值</label>
                    <vue-number-input id="ccr_k" name="ccr_k" v-model="trade.ccr_k"></vue-number-input>
                </div>
                <div class="form-group">
                    <label class="formlabel">信用风险敞口</label>
                    <select id="ignoreRiskExposure" name="ignoreRiskExposure" v-model="trade.ignoreRiskExposure">
                        <option value="0" @((!Model.Trade.MetaDic.ContainsKey(YLErp.DBModels.Consts.ConsTradeMetaKey.ignoreRiskExposure)) || Model.Trade.MetaDic[YLErp.DBModels.Consts.ConsTradeMetaKey.ignoreRiskExposure] != "1" ? "selected":"")>参与计算</option>
                        <option value="1" @(Model.Trade.MetaDic.ContainsKey(YLErp.DBModels.Consts.ConsTradeMetaKey.ignoreRiskExposure) && Model.Trade.MetaDic[YLErp.DBModels.Consts.ConsTradeMetaKey.ignoreRiskExposure] == "1" ? "selected":"")>忽略</option>
                    </select>
                </div>
            }

            <div class="form-group" v-if="trade.MarginType==2 || trade.MarginType==3|| trade.MarginType==4">
                <label class="formlabel">初始预付金率</label>
                <vue-number-input name="MarginRate" v-model="trade.MarginRate" v-bind:format="inputFormatMarginRate"></vue-number-input>
            </div>
            <div class="form-group" v-if="trade.MarginType==2 || trade.MarginType==4">
                <label class="formlabel">持仓预付金率</label>
                <vue-number-input name="PositionMarginRate" v-model="trade.PositionMarginRate" v-bind:format="inputFormatMarginRate"></vue-number-input>
            </div>

            @if (PS.Config.ErpElement.SecuritiesEnvironment)
            {
                if (!PS.Config.Is润和)
                {
                    <div class="form-group">
                        <label class="formlabel">交易场所</label>
                        <select name="TradingPlace" v-model="viewState.Extend.TradingPlace" v-on:change="changeTradingPlace">
                            @foreach (var item in YLErp.DBModels.Consts.ConsReport.TradingPlaceMap)
                            {
                                <option>@item.Key</option>
                            }
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="formlabel">清算机构</label>
                        <select name="ClearingAgency" v-model="viewState.Extend.ClearingAgency" v-on:change="changeClearingAgency">
                            @foreach (var item in YLErp.DBModels.Consts.ConsReport.ClearingAgencyMap)
                            {
                                if (item.Key == "甲方" || item.Key == "乙方")
                                {
                                    continue;
                                }
                                <option>@item.Key</option>
                            }
                        </select>
                    </div>
                }


                if (Model.CanSelectClient)
                {
                    <div class="form-group">
                        <label class="formlabel">主协议编号</label>
                        <select name="MainProtocolCode" id="MainProtocolCode" v-on:change="changeMainProtocolCode">
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="formlabel">补充协议编号</label>
                        <select name="SupProtocolCode" id="SupProtocolCode">
                        </select>
                    </div>
                }
                else
                {
                    var MainProtocolCode = Model.Trade.MetaDic.Keys.Contains("主协议编号") ? Model.Trade.MetaDic["主协议编号"] : "";
                    var SupProtocolCode = Model.Trade.MetaDic.Keys.Contains("补充协议编号") ? Model.Trade.MetaDic["补充协议编号"] : "";
                    <div class="form-group">
                        <label class="formlabel">主协议编号</label>
                        <input name="MainProtocolCode" id="MainProtocolCode" class="text-box" type="text" value="@MainProtocolCode" readonly>
                    </div>

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

                }
            }
            else
            {
                <div class="form-group">
                    <label class="formlabel">中央对手方清算</label>
                    <select id="selIsCentralClearing" name="IsCentralClearing">
                        <option value="N">否</option>
                        <option value="Y">是</option>
                        <option value="I">计划中央对手方清算</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="formlabel">中央清算平台</label>
                    <select id="selCentralClearingPaltform" name="CentralClearingPaltform">
                        @foreach (var item in YLErp.BLL.DictionaryBLL.GetList("中央清算平台", true, "", true))
                        {
                            <option value="@item.Value">@item.Text</option>
                        }
                    </select>
                </div>
                <div class="form-group">
                    <label class="formlabel">交易平台</label>
                    <select id="selTradingPaltform" name="TradingPaltform">
                        @foreach (var item in YLErp.BLL.DictionaryBLL.GetList("交易平台", true, "", true))
                        {
                            <option value="@item.Value">@item.Text</option>
                        }
                    </select>
                </div>
            }

        </div>

        <div v-if="trade.TradeType=='自定义交易'">
            @if (!PS.Config.ErpElement.SecuritiesEnvironment)
            {
                <div class="form-group">
                    <label class="formlabel">中央对手方清算</label>
                    <select id="selIsCentralClearing" name="IsCentralClearing" v-model="trade.MetaDic.中央对手方清算">
                        <option value="N">否</option>
                        <option value="Y">是</option>
                        <option value="I">计划中央对手方清算</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="formlabel">中央清算平台</label>
                    <select id="selCentralClearingPaltform" name="CentralClearingPaltform" v-model="trade.MetaDic.中央清算平台">
                        @foreach (var item in YLErp.BLL.DictionaryBLL.GetList("中央清算平台", true, "", true))
                        {
                            <option value="@item.Value">@item.Text</option>
                        }
                    </select>
                </div>
                <div class="form-group">
                    <label class="formlabel">交易平台</label>
                    <select id="selTradingPaltform" name="TradingPaltform" v-model="trade.MetaDic.交易平台">
                        @foreach (var item in YLErp.BLL.DictionaryBLL.GetList("交易平台", true, "", true))
                        {
                            <option value="@item.Value">@item.Text</option>
                        }
                    </select>
                </div>
            }

        </div>

        @if (!PS.Config.Is润和)
        {
            <div class="form-group">
                <label class="formlabel">交易对手方角色</label>
                <select name="OpponentRole" v-model="trade.OpponentRole">
                    <option>甲方</option>
                    <option>乙方</option>
                </select>
            </div>
        }

        @*@if (!Model.IsNew)
        {
        <div class="form-group">
        <label class="formlabel">是否有效</label>
        <select id="ValidState" name="ValidState" v-model="trade.ValidState">
        <option value="Valid">有效</option>
        <option value="InValid">无效</option>
        </select>
        </div>
        }*@
    </div>
    <div class="col yc-panel yc-panel-right">
        <div class="row">
            <!--客户名称-->
            @if (Model.CanSelectClient || Model.IsCheck)
            {
                <div class="form-group col-6">
                    <label class="formlabel">客户名称</label>
                    <input id="ClientId" name="ClientId" class="text-box" type="text" autocomplete="off">
                </div>
            }
            else
            {
                <div class="form-group col-6">
                    <label class="formlabel">客户名称</label>
                    <input name="ClientName" class="text-box" type="text" value="@(Model.Trade.ClientName)" title="@(Model.Trade.ClientName)" readonly>
                </div>
            }
            @if (Model.IsCheck)
            {
                <div class="form-group col-6">
                    <label class="formlabel">客户编号</label>
                    <input name="ClientNumber" class="text-box" type="text" value="@(Model.Trade.ClientNumber)" readonly>
                </div>
            }
            <!--买卖方向-->
            <div class="form-group col-6">
                <label class="formlabel">买卖方向</label>
                <select name="BuySell" id="BuySell" v-model="trade.BuySell" v-on:change="changeBuySell(true)">
                    <option value="卖出" class="client-buy">卖出</option>
                    <option value="买入" class="client-sell">买入</option>
                </select>
            </div>
            <template v-if="!fieldState.Cashflow">
                <!--行权方式-->
                <div class="form-group col-6" v-show="showExerciseMode">
                    <label class="formlabel">行权方式</label>
                    <select name="ExerciseMode" v-model="trade.ExerciseMode" v-bind:disabled="showExerciseMode===1" v-on:change="changeExerciseMode">
                        <option value="European">欧式</option>
                        <option value="American">美式</option>
                    </select>
                </div>

                <!--看涨看跌-->
                <div class="form-group col-6" v-show="showOptionType">
                    <label class="formlabel">看涨看跌</label>
                    <select name="OptionType" v-model="trade.OptionType" v-bind:disabled="trade.TradeType==='Risky期权'">
                        <option value="看涨">看涨</option>
                        <option value="看跌">看跌</option>
                    </select>
                </div>

                <!--收益结算-->
                <div class="form-group col-6" v-show="fieldState.SettlementType">
                    <label class="formlabel">收益结算</label>
                    <select name="SettlementType" v-model="trade.SettlementType">
                        <option value="0">收盘价</option>
                        <option value="1">结算价</option>
                        <option value="2">参考价</option>
                    </select>
                </div>

                @if (Model.IsCheck)
                {
                    <!--成交日期-->
                    <div class="form-group col-6">
                        <label class="formlabel">成交日期</label>
                        <vue-datepicker name="TradeDate" class="text-box" :maxdate="maxTradeDate" v-model="trade.TradeDate" />
                    </div>
                }
                else
                {
                    <!--成交日期-->
                    <div class="form-group col-6">
                        <label class="formlabel">成交日期</label>
                        <vue-datepicker name="TradeDate" class="text-box" :maxdate="maxTradeDate" v-model="trade.TradeDate" v-on:input="changeTradeDate" />
                    </div>
                }
                <!--权利金应付日-->
                <div class="form-group col-6">
                    <label class="formlabel">权利金应付日</label>
                    <vue-datepicker name="PremiumPayDate" class="text-box" v-model="trade.PremiumPayDate" />
                </div>

                <!--实际到期日-->
                @if (pageObj.showZheQi)
                {
                    <div class="form-group col-6" v-show="isShowActualExerciseDate">
                        <label class="formlabel">实际到期日期</label>
                        <vue-datepicker name="ActualExerciseDate" v-model="trade.MetaDic['ActualExerciseDate']" />
                    </div>
                }

                <!--到期日期-->
                <div class="form-group col-6">
                    <label class="formlabel">到期日期</label>
                    <vue-datepicker :maxdate="viewState.MaturityDate" name="ExerciseDate" v-model="trade.ExerciseDate" v-on:input="changeExerciseDate" />
                </div>

                <!--结算日期-->
                <div class="form-group col-6">
                    <label class="formlabel">结算日期</label>
                    <vue-datepicker name="SettlementDate" v-model="trade.SettlementDate" v-on:input="changeSettlementDate" />
                </div>

                <template v-if="fieldState.RiskyOption">

                    <div class="form-group col-6">
                        <label class="formlabel">名义本金</label>
                        <vue-number-input name="StockEqvNotional" v-model="trade.StockEqvNotional" v-on:input="changeStockEqvNotional" v-bind:format="inputFormatEqvNotional" v-bind:disabled="!trade.IsUsePremiumRate"></vue-number-input>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">成交数量</label>
                        <vue-number-input name="TradeAmountV" v-model="trade.TradeAmountV" v-on:input="changeTradeAmountV" v-bind:format="inputFormatTradeAmountV" v-bind:disabled="trade.IsUsePremiumRate"></vue-number-input>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">交易总额</label>
                        <vue-number-input name="TradePrice" v-model="trade.TradePrice" v-on:input="changeTradePrice" v-bind:format="inputFormatTradePrice" v-bind:disabled="!trade.IsTradePricePayType"></vue-number-input>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">期初标的价格</label>
                        <input name="SpotPrice" type="number" class="text-box has-popover-syn" v-model="trade.SpotPrice" v-on:input="changeSpotPrice(true)" v-on:blur="blurSpotPrice" v-bind:step="getPriceTick()" v-bind:readonly="!pageVue.IsCheck&&!!viewState.synthetic" max="999999" min="-999999" />
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">相对行权价</label>
                        <select name="IsMoneynessOption" v-model="trade.IsMoneynessOption" v-on:change="changeIsMoneynessOption">
                            <option value="是">是</option>
                            <option value="否">否</option>
                        </select>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">执行价格1</label>
                        <vue-number-input name="Strike1" v-model="trade.Strike1" v-bind:format="inputFormatStrike"></vue-number-input>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">参与率1</label>
                        <vue-number-input name="ParticipationRate1" v-model="trade.ParticipationRate1" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>


                    <div class="form-group col-6">
                        <label class="formlabel">执行价格2</label>
                        <vue-number-input name="Strike2" v-model="trade.Strike2" v-bind:format="inputFormatStrike"></vue-number-input>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">参与率2</label>
                        <vue-number-input name="ParticipationRate2" v-model="trade.ParticipationRate2" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">执行价格3</label>
                        <vue-number-input name="Strike3" v-model="trade.Strike3" v-bind:format="inputFormatStrike"></vue-number-input>
                    </div>

                    <div class="form-group col-6">
                        <label class="formlabel">参与率3</label>
                        <vue-number-input name="ParticipationRate3" v-model="trade.ParticipationRate3" v-bind:format="inputFormatPercent"></vue-number-input>
                    </div>

                    <!--权利金-->
                    <div class="form-group col-6">
                        <label class="formlabel">权利金</label>
                        <div class="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" v-bind:disabled="trade.IsTradePricePayType"></vue-number-input>
                            </template>
                            <template v-else>
                                <vue-number-input name="TradeSinglePrice" v-model="trade.TradeSinglePrice" v-on:input="changeTradeSinglePrice" v-bind:format="inputFormatSinglePriceOnly" v-bind:disabled="trade.IsTradePricePayType"></vue-number-input>
                            </template>
                            <a href="javascript:;" title="计算权利金" v-on:click="calcPrice" class="yt-input-group-append" tabindex="-1"><i class="fa fa-refresh"></i></a>
                        </div>
                    </div>

                </template>

                <template v-if="fieldState.SnowBall||fieldState.AutoCall">
                    <!--期权年化-->
                    <div class="form-group col-6" v-if="!fieldState.PrepaymentUsing">
                        <label class="formlabel">期权年化</label>
                        <select name="IsAnnualized2" v-model="trade.IsAnnualized2" v-on:change="changeIsAnnualized">
                            <option :value="true">是</option>
                            <option :value="false">否</option>
                        </select>
                    </div>

                    <!--年化系数-->
                    <div class="form-group col-6" v-if="!fieldState.PrepaymentUsing">
                        <label class="formlabel">年化系数</label>
                        <template v-if="trade.IsAnnualized2">
                            <table class="d-inline-block align-middle" style="width:152px;" v-cloak>
                                <tr>
                                    <td style="width:45%">
                                        <vue-number-input name="AnnualizeFactor2" id="AnnualizeFactor2_ttmDays" v-model="AnnualizeFactor2.ttmDays" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-right pr-2 w-100"></vue-number-input>
                                    </td>
                                    <td class="text-center">/</td>
                                    <td style="width:45%">
                                        <vue-number-input name="AnnualizeFactor2" id="AnnualizeFactor2_daysInYear" v-model="AnnualizeFactor2.daysInYear" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-left pl-2 w-100"></vue-number-input>
                                    </td>
                                </tr>
                            </table>
                            <div class="d-inline-block">
                                <div class="dropdown">
                                    <a class="" href="#" role="button" data-toggle="dropdown" title="与成交到结算日期间隔的差值">{{annualDayDiff2}}</a>
                                    <div class="dropdown-menu" style="min-width:5rem;max-width:5rem;">
                                        <a class="dropdown-item" href="#" v-on:click="changeAnnualDayDiff2(0)">+0</a>
                                        <a class="dropdown-item" href="#" v-on:click="changeAnnualDayDiff2(-1)">-1</a>
                                        <a class="dropdown-item" href="#" v-on:click="changeAnnualDayDiff2(-2)">-2</a>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <input type="text" readonly v-model="trade.AnnualizeFactor2" v-else />
                    </div>
                </template>
                <template v-else-if="!fieldState.Accumulator">
                    <!--期权年化-->
                    <div class="form-group col-6">
                        <label class="formlabel">期权年化</label>
                        <select name="IsAnnualized" v-model="trade.IsAnnualized" v-on:change="changeIsAnnualized">
                            <option :value="true">是</option>
                            <option :value="false">否</option>
                        </select>
                    </div>

                    <!--年化系数-->
                    <div class="form-group col-6">
                        <label class="formlabel">年化系数</label>
                        <template v-if="trade.IsAnnualized">
                            <table class="d-inline-block align-middle" style="width:152px;" v-cloak>
                                <tr>
                                    <td style="width:45%">
                                        <vue-number-input name="AnnualizeFactor" id="AnnualizeFactor_ttmDays" v-model="AnnualizeFactor.ttmDays" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-right pr-2 w-100"></vue-number-input>
                                    </td>
                                    <td class="text-center">/</td>
                                    <td style="width:45%">
                                        <vue-number-input name="AnnualizeFactor" id="AnnualizeFactor_ttmDays" v-model="AnnualizeFactor.daysInYear" v-bind:format="inputFormatDouble2" v-on:input="changeAnnualizeFactor" class="text-left pl-2 w-100"></vue-number-input>
                                    </td>
                                </tr>
                            </table>
                            <div class="d-inline-block">
                                <div class="dropdown">
                                    <a class="" href="#" role="button" data-toggle="dropdown" title="与成交到结算日期间隔的差值">{{annualDayDiff}}</a>
                                    <div class="dropdown-menu" style="min-width:5rem;max-width:5rem;">
                                        <a class="dropdown-item" href="#" v-on:click="changeAnnualDayDiff(0)">+0</a>
                                        <a class="dropdown-item" href="#" v-on:click="changeAnnualDayDiff(-1)">-1</a>
                                        <a class="dropdown-item" href="#" v-on:click="changeAnnualDayDiff(-2)">-2</a>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <input type="text" readonly v-model="trade.AnnualizeFactor" v-else />
                    </div>
                </template>

                <!--参与率-->
                <div class="form-group col-6" v-show="!fieldState.Accumulator &&!fieldState.RiskyOption ">
                    <label class="formlabel">参与率</label>
                    <vue-number-input name="ParticipationRate" v-model="trade.ParticipationRate" v-on:input="changeEffectRatio" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>

                <!--保底收益-->
                <div class="form-group col-6" v-show="trade.TradeType !== '累计期权'">
                    <label class="formlabel">保底收益</label>
                    <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="form-group col-6" v-show="trade.TradeType !== '累计期权'">
                    <label class="formlabel">保底收益总额</label>
                    <div class="yt-input-group">
                        <vue-number-input name="OriginalPrincipalSum" v-model="trade.OriginalPrincipalSum" v-on:input="changePrincipalSum" v-bind:format="inputFormatDouble2"></vue-number-input>
                        <a href="javascript:;" title="计算保底收益总额" v-on:click="changeEffectRatio" class="yt-input-group-append" tabindex="-1"><i class="fa fa-refresh"></i></a>
                    </div>
                </div>

                <!--相对行权价-->
                <div class="form-group col-6" v-show="!fieldState.RiskyOption">
                    <label class="formlabel">相对行权价</label>
                    <select name="IsMoneynessOption" v-model="trade.IsMoneynessOption" v-on:change="changeIsMoneynessOption">
                        <option value="是">是</option>
                        <option value="否">否</option>
                    </select>
                </div>

                <!--执行价格-->
                <div class="form-group col-6" v-show="!fieldState.AutoCall&&!fieldState.SnowBall&&!fieldState.RiskyOption&&((trade.TradeType=='亚式期权'&&trade.StrikeType!='Floating')||trade.TradeType!='亚式期权')&& trade.TradeType !== '累计期权'">
                    <label class="formlabel">执行价格</label>
                    <vue-number-input name="Strike" v-model="trade.Strike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>

                <!--权利金-->
                <div class="form-group col-6" v-show="!fieldState.RiskyOption && (!trade.IsTradePricePayType || trade.TradeType!=='累计期权')">
                    <label class="formlabel">权利金</label>
                    <div class="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" v-bind:disabled="trade.IsTradePricePayType"></vue-number-input>
                        </template>
                        <template v-else>
                            <vue-number-input name="TradeSinglePrice" v-model="trade.TradeSinglePrice" v-on:input="changeTradeSinglePrice" v-bind:format="inputFormatSinglePriceOnly" v-bind:disabled="trade.IsTradePricePayType"></vue-number-input>
                        </template>
                        <a href="javascript:;" v-show="trade.TradeType!=='自定义交易' || pageData.calcCustomTrade" title="计算权利金" v-on:click="calcPrice" class="yt-input-group-append" tabindex="-1"><i class="fa fa-refresh"></i></a>
                    </div>
                </div>

                @if (Model.ShowInitialMargin)
                {
                    <div class="form-group col-6">
                        <label class="formlabel">初始预付金</label>
                        <div class="yt-input-group">
                            <input name="InitialMargin" type="number" 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="form-group col-6" v-show="!fieldState.RiskyOption">
                    <label class="formlabel">期初标的价格</label>
                    <input name="SpotPrice" type="number" class="text-box has-popover-syn" v-model="trade.SpotPrice" v-on:input="changeSpotPrice(true)" v-on:blur="blurSpotPrice" v-bind:step="getPriceTick()" v-bind:readonly="!pageVue.IsCheck&&(!!viewState.synthetic || trade.IsGroup == 2)" max="999999" min="-999999" />
                </div>

                <template v-if="fieldState.Accumulator">
                    <!--沽购数量-->
                    <div class="form-group col-6">
                        <label class="formlabel">沽购数量</label>
                        <vue-number-input name="AccumuTradeAmount" v-model="trade.AccumuTradeAmount" v-on:input="changeAccumuTradeAmount" v-bind:format="inputFormatTradeAmount"></vue-number-input>
                    </div>
                </template>

                <!--有效成交份额-->
                <div class="form-group col-6" v-show="trade.TradeType !== '累计期权'&&!fieldState.RiskyOption">
                    <label class="formlabel">有效成交份额</label>
                    <vue-number-input name="Notional" v-model="trade.Notional" v-on:input="changeNotional" v-bind:format="inputFormatNotional" v-bind:disabled="trade.IsUsePremiumRate"></vue-number-input>
                </div>

                <!--成交数量-->
                <div class="form-group col-6" v-show="trade.TradeType !== '累计期权'&&!fieldState.RiskyOption || is宏源">
                    <label class="formlabel">成交数量</label>
                    <vue-number-input name="TradeAmountV" v-model="trade.TradeAmountV" v-on:input="changeTradeAmountV" v-bind:format="inputFormatTradeAmountV" v-bind:disabled="trade.IsUsePremiumRate || trade.TradeType === '累计期权'"></vue-number-input>
                </div>

                <!--有效成交数量-->
                <div class="form-group col-6" v-show="trade.TradeType !== '累计期权'&&!fieldState.RiskyOption">
                    <label class="formlabel">有效成交数量</label>
                    <vue-number-input name="TradeAmount" v-model="trade.TradeAmount" v-on:input="changeTradeAmount" v-bind:format="inputFormatTradeAmount" v-bind:disabled="trade.IsUsePremiumRate"></vue-number-input>
                </div>

            </template>
            <template v-if="fieldState.Cashflow">
                <!--成交日期-->
                <div class="form-group col-6">
                    <label class="formlabel">成交日期</label>
                    <vue-datepicker name="TradeDate" class="text-box" :maxdate="maxTradeDate" :noholiday="1" v-model="trade.TradeDate" v-on:input="changeTradeDate" />
                </div>

                <!--到期日期-->
                <div class="form-group col-6">
                    <label class="formlabel">到期日期</label>
                    <vue-datepicker :maxdate="viewState.MaturityDate" :noholiday="1" name="ExerciseDate" v-model="trade.ExerciseDate" v-on:input="changeExerciseDate" />
                </div>
            </template>
            <!--名义本金-->
            <div class="form-group col-6" v-show="trade.TradeType!=='累计期权'&&!fieldState.RiskyOption">
                <label class="formlabel">名义本金</label>
                <vue-number-input name="StockEqvNotional" v-model="trade.StockEqvNotional" v-on:input="changeStockEqvNotional" v-bind:format="inputFormatEqvNotional" v-bind:disabled="!trade.IsUsePremiumRate"></vue-number-input>
            </div>
            <template v-if="!fieldState.Cashflow">
                <!--有效名义本金-->
                <div class="form-group col-6" v-show="trade.TradeType!=='累计期权'&&!fieldState.RiskyOption">
                    <label class="formlabel">有效名义本金</label>
                    <vue-number-input name="StockEqvNotionalReal" v-model="trade.StockEqvNotionalReal" v-on:input="changeStockEqvNotionalReal" v-bind:format="inputFormatEqvNotional" v-bind:disabled="!trade.IsUsePremiumRate"></vue-number-input>
                </div>

                <!--交易总额-->
                <div class="form-group col-6" v-show="!fieldState.RiskyOption && (trade.IsTradePricePayType || trade.TradeType!=='累计期权')">
                    <label class="formlabel">交易总额</label>
                    <vue-number-input name="TradePrice" v-model="trade.TradePrice" v-on:input="changeTradePrice" v-bind:format="inputFormatTradePrice" v-bind:disabled="!trade.IsTradePricePayType"></vue-number-input>
                </div>

            </template>
            <!--累计结构类型-->
            <div class="form-group col-6" v-show="trade.TradeType==='累计期权'">
                <label class="formlabel">累计结构类型</label>
                <select name="AccumulatorStructureType" v-model="trade.AccumulatorStructureType" v-on:change="changeAccumulatorStructureType()">
                    <option value="0">标准</option>
                    <option value="1">三段式</option>
                </select>
            </div>
            <!--执行价格1-->
            <template v-if="fieldState.Accumulator && trade.AccumulatorStructureType == '0'">
                <div class="form-group col-6">
                    <label class="formlabel">执行价格</label>
                    <vue-number-input name="Strike" v-model="trade.Strike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
            </template>
            <template v-if="fieldState.Accumulator && trade.AccumulatorStructureType == '1'">
                <div class="form-group col-6">
                    <label class="formlabel">执行价格1</label>
                    <vue-number-input name="Strike" v-model="trade.Strike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">乘数1</label>
                    <vue-number-input name="Multiplier" v-model="trade.Multiplier" v-bind:disabled="(trade.PayoffType==='固定' && trade.OptionType==='看跌')"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">执行价格2</label>
                    <vue-number-input name="Strike2" v-model="trade.Strike2" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">乘数2</label>
                    <vue-number-input name="Multiplier2" v-model="trade.Multiplier2" v-bind:disabled="(trade.PayoffType==='固定')"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">执行价格3</label>
                    <vue-number-input name="Strike3" v-model="trade.Strike3" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">乘数3</label>
                    <vue-number-input name="Multiplier3" v-model="trade.Multiplier3" v-bind:disabled="(trade.PayoffType==='固定' && trade.OptionType==='看涨')"></vue-number-input>
                </div>
            </template>
            <!--二元期权-->
            <template class="row" v-if="fieldState.BinaryOption">
                <div class="form-group col-6">
                    <label class="formlabel">二元类型</label>
                    <select name="PayoffType" v-model="trade.PayoffType" v-on:change="changePayoffType">
                        <option v-for="item in binaryPayoffTypes" :value="item.value">{{item.text}}</option>
                    </select>
                    @if (Model.DiffList.Contains("trade_binary_option.PayoffType"))
                    {
                        <span class="fa fa-remove not-match ml-1"></span>
                    }
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">补偿金额</label>
                    <vue-number-input v-if="trade.IsUsePremiumRate" name="CashOrNothingAmountRate" v-model="trade.CashOrNothingAmountRate" v-bind:format="inputFormatPremiumRate" v-bind:disabled="trade.PayoffType==='AssetOrNothing'"></vue-number-input>
                    <vue-number-input v-else name="CashOrNothingAmount" v-model="trade.CashOrNothingAmount" v-bind:format="inputFormatSinglePrice" v-bind:disabled="trade.PayoffType==='AssetOrNothing'"></vue-number-input>
                </div>

                <template v-if="trade.ExerciseMode === 'American'">
                    <template v-if="(trade.PayoffType||'').startsWith('Double')">
                        <div class="form-group col-6">
                            <label class="formlabel">高障碍价格</label>
                            <vue-number-input name="BarrierHigh" v-model="trade.BarrierHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                        </div>
                        <div class="form-group col-6">
                            <label class="formlabel">高障碍补偿金额</label>
                            <vue-number-input v-if="trade.IsUsePremiumRate" name="CashOrNothingAmountHighRate" 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 name="CashOrNothingAmountHigh" v-model="trade.CashOrNothingAmountHigh" v-bind:format="inputFormatSinglePrice" v-bind:disabled="trade.PayoffType=='DoubleNoTouch'&&trade.ExerciseMode=='American'"></vue-number-input>
                        </div>
                    </template>
                    <div class="form-group col-6">
                        <label class="formlabel">观察方式</label>
                        <select name="MonitorType" v-model="trade.MonitorType">
                            <option v-for="item in consMonitorTypes" :value="item.value">{{item.text}}</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">补偿支付</label>
                        <select name="RebateType" v-model="trade.RebateType">
                            <option v-for="item in binaryRebateTypes" :value="item.value">{{item.text}}</option>
                        </select>
                    </div>
                </template>
                <div class="form-group col-6">
                    <label class="formlabel">补偿按敲出日年化</label>
                    <select name="RebateAnnualizedAtKO" v-model="trade.RebateAnnualizedAtKO" v-bind:disabled="trade.ExerciseMode === 'European' || this.trade.PayoffType === 'UpNoTouch' || this.trade.PayoffType === 'DownNoTouch' || this.trade.PayoffType === 'DoubleNoTouch'">
                        <option v-for="item in consTrueAsYes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">补偿计息规则</label>
                    <vue-daycount name="RebateDayCount" v-model="trade.RebateDayCount" />
                </div>

            </template>
            <!--障碍期权-->
            <template v-if="fieldState.BarrierOption">
                <div class="form-group col-6">
                    <label class="formlabel">障碍类型</label>
                    <select name="BarrierType" v-model="trade.BarrierType">
                        <option v-for="item in consBarrierTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">障碍价格</label>
                    <vue-number-input name="BarrierLow" v-model="trade.BarrierLow" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6" v-if="(trade.BarrierType || '').startsWith('双')">
                    <label class="formlabel">高障碍价格</label>
                    <vue-number-input name="BarrierHigh" v-model="trade.BarrierHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">补偿金额</label>
                    <vue-number-input v-if="trade.IsUsePremiumRate" name="RebateRate" v-model="trade.RebateRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <vue-number-input v-else name="Rebate" v-model="trade.Rebate" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                </div>
                <template v-if="(trade.BarrierType || '').endsWith('双障碍敲出')">
                    <div class="form-group col-6">
                        <label class="formlabel">高障碍补偿金额</label>
                        <vue-number-input v-if="trade.IsUsePremiumRate" name="RebateHighRate" v-model="trade.RebateHighRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                        <vue-number-input v-else v-model="trade.RebateHigh" name="RebateHigh" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                    </div>
                </template>
                <div class="form-group col-6">
                    <label class="formlabel">障碍偏移</label>
                    <input type="number" name="BarrierShift" v-model="trade.BarrierShift" />
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">观察方式</label>
                    <select name="MonitorType" v-model="trade.MonitorType">
                        <option v-for="item in consMonitorTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">补偿支付</label>
                    <select name="RebateType" v-model="trade.RebateType">
                        <option v-for="item in consRebateTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <template v-if="(trade.BarrierType || '').endsWith('敲出')">
                    <div class="form-group col-6">
                        <label class="formlabel">补偿按敲出日年化</label>
                        <select name="RebateAnnualizedAtKO" v-model="trade.RebateAnnualizedAtKO">
                            <option v-for="item in consTrueAsYes" :value="item.value">{{item.text}}</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">补偿计息规则</label>
                        <vue-daycount name="RebateDayCount" v-model="trade.RebateDayCount" />
                    </div>
                </template>
            </template>
            <!--双鲨期权-->
            <template v-if="fieldState.DBSharkOption">
                <div class="form-group col-6">
                    <label class="formlabel">障碍价格</label>
                    <vue-number-input name="BarrierLow" v-model="trade.BarrierLow" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">高障碍价格</label>
                    <vue-number-input name="BarrierHigh" v-model="trade.BarrierHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">高行权价</label>
                    <vue-number-input name="StrikeHigh" v-model="trade.StrikeHigh" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">补偿金额</label>
                    <vue-number-input v-if="trade.IsUsePremiumRate" name="RebateRate" v-model="trade.RebateRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <vue-number-input v-else v-model="trade.Rebate" name="Rebate" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">高障碍补偿金额</label>
                    <vue-number-input v-if="trade.IsUsePremiumRate" name="RebateHighRate" v-model="trade.RebateHighRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                    <vue-number-input v-else v-model="trade.RebateHigh" name="RebateHigh" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">高参与率</label>
                    <vue-number-input name="CallParticipationRate" v-model="trade.CallParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">低参与率</label>
                    <vue-number-input name="PutParticipationRate" v-model="trade.PutParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">观察方式</label>
                    <select name="MonitorType" v-model="trade.MonitorType">
                        <option v-for="item in consMonitorTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">补偿支付</label>
                    <select name="RebateType" v-model="trade.RebateType">
                        <option v-for="item in consRebateTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
            </template>
            <!--亚式期权-->
            <template v-if="fieldState.AsiaOption">
                <div class="form-group col-6">
                    <label class="formlabel">均价起算日</label>
                    <vue-datepicker name="AveragingPeriodStartDate" v-model="trade.AveragingPeriodStartDate" />
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">均价计算</label>
                    <select name="PayoffType" v-model="trade.PayoffType" v-on:change="changePayOffType">
                        <option v-for="item in consAsiaPayoffType" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6" v-show="trade.PayoffType=='EnhancedArithmeticAverage'&&trade.StrikeType!='Floating'">
                    <label class="formlabel">增强价格</label>
                    <vue-number-input name="EnhancedPrice" v-model="trade.EnhancedPrice" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">行权价类型</label>
                    <select name="StrikeType" v-model="trade.StrikeType" v-on:change="changeStrikeType">
                        <option v-for="item in consAsiaStrikeType" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6" v-show="trade.PayoffType=='EnhancedArithmeticAverage'">
                    <label class="formlabel">结算类型</label>
                    <select name="SettleMode" v-model="trade.SettleMode">
                        <option v-for="item in consAsiaSettleModes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">杠杆率</label>
                    <vue-number-input name="StrikeGearingFactor" v-model="trade.StrikeGearingFactor" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
            </template>
            <!--区间累计-->
            <template v-if="fieldState.RangeAcc">
                <div class="form-group col-6">
                    <label class="formlabel">区间下限</label>
                    <vue-number-input name="LowerRange" v-model="trade.LowerRange" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">区间上限</label>
                    <vue-number-input name="UpperRange" v-model="trade.UpperRange" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">区间收益</label>
                    <vue-number-input name="BonusRate" v-model="trade.BonusRate" v-bind:format="inputFormatPercent4"></vue-number-input>
                </div>
            </template>
            <!--气囊结构-->
            <template v-if="fieldState.AirBag">
                <div class="form-group col-6">
                    <label class="formlabel">障碍价格</label>
                    <vue-number-input name="BarrierLow" v-model="trade.BarrierLow" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">观察方式</label>
                    <select name="IsDiscreteMonitored" v-model="trade.IsDiscreteMonitored">
                        <option v-for="item in consIsDiscreteMonitored" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">敲入参与率</label>
                    <vue-number-input name="KIParticipationRate" v-model="trade.KIParticipationRate" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">收益封顶</label>
                    <select name="HasPayoffLimit" v-model="trade.HasPayoffLimit">
                        <option v-for="item in consTrueAsYes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">收益封顶价格</label>
                    <vue-number-input name="HighStrike" v-model="trade.HighStrike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
            </template>
            <!--收益增强结构-->
            <template v-if="fieldState.UnEnhance">
                <div class="form-group col-6">
                    <label class="formlabel">年化增强收益</label>
                    <vue-number-input name="AnnualizedEnhanceRate" v-model="trade.AnnualizedEnhanceRate" v-bind:format="inputFormatPercent4"></vue-number-input>
                </div>
            </template>
            <!--雪球期权-->
            <template v-if="fieldState.SnowBall">
                @await Html.PartialAsync("_tradeedit/snowball")
            </template>
            <!--凤凰期权-->
            <template v-if="fieldState.AutoCall">
                <div class="form-group col-6">
                    <label class="formlabel">票息年化</label>
                    <select name="IsFixedCoupon" v-model="trade.IsFixedCoupon">
                        <option v-for="item in consFalseAsYes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">票息率</label>
                    <vue-number-input name="Coupon" v-model="trade.Coupon" v-on:input="changeRebate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">票息障碍价格</label>
                    <vue-number-input name="CouponBarrier" v-model="trade.CouponBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">票息日历规则</label>
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">票息包含首日</label>
                    <select name="CouponIncludeStartDate" v-model="trade.CouponIncludeStartDate">
                        <option v-for="item in consFalseAsNo" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">票息结算方式</label>
                    <select name="CouponPayType" v-model="trade.CouponPayType" v-on:change="changeCouponPayType">
                        <option v-for="item in consCouponPayTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">敲出观察频率</label>
                    <div class="yt-input-group">
                        <input type="text" min="0" class="form-control" v-model="koObservationRate" name="koObservationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append" title="设置观察日" v-on:click="setObservationDates('#KO')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">敲出障碍价格</label>
                    <vue-number-input name="KOBarrier" v-model="trade.KOBarrier" v-on:input="changeKOBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">敲入观察频率</label>
                    <div class="yt-input-group">
                        <input type="text" min="0" class="form-control" v-model="observationRate" name="observationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append" title="设置观察日" v-on:click="setObservationDates('#KI')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">敲入障碍价格</label>
                    <vue-number-input name="KIBarrier" v-model="trade.KIBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel small p-0">敲入到期是否支付票息</label>
                    <select name="IncludeCouponAfterKI" v-model="trade.IncludeCouponAfterKI">
                        <option value="true">是</option>
                        <option value="false" v-bind:disabled="trade.CouponPayType!==2">否</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel small">敲入到期支付类别</label>
                    <select name="KIPayoffType" v-model="trade.KIPayoffType" v-on:change="changeFieldState">
                        <option v-for="item in autocallKIPayoffTypeEnums" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6" v-show="fieldState.SpreadStrike1">
                    <label class="formlabel">敲入行权价</label>
                    <vue-number-input name="SpreadStrike1" v-model="trade.SpreadStrike1" v-bind:format="inputFormatStrike" v-on:input="changeSpreadStrike1"></vue-number-input>
                </div>
                <div class="form-group col-6" v-show="fieldState.SpreadStrike">
                    <label class="formlabel">封顶/封底行权价</label>
                    <vue-number-input name="SpreadStrike" v-model="trade.SpreadStrike" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
            </template>
            <!--累计期权-->
            <template v-if="fieldState.Accumulator && trade.AccumulatorStructureType == '1'">
                <div class="form-group col-6">
                    <label class="formlabel">敲出障碍价格</label>
                    <vue-number-input name="KOBarrier" v-model="trade.KOBarrier" v-on:input="changeKOBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">观察日</label>
                    <div class="yt-input-group">
                        <input type="text" min="0" class="form-control" v-model="koObservationRate" name="koObservationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append" title="设置观察日" v-on:click="setObservationDates('#KO')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">上端收益类型</label>
                    <select name="PayoffType" v-model="trade.PayoffType" v-on:change="changePayoffType">
                        <option value="浮动">浮动</option>
                        <option value="固定" v-bind:disabled="trade.SettlementMode==='现金期末'">固定(票息)</option>
                    </select>
                </div>
                <div class="form-group col-6" v-show="trade.PayoffType==='固定'">
                    <label class="formlabel">票息1</label>
                    <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="form-group col-6" v-show="trade.PayoffType==='固定'">
                    <label class="formlabel">票息2</label>
                    <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="form-group col-6" v-show="trade.PayoffType==='固定'">
                    <label class="formlabel">票息年化</label>
                    <select name="IsFixedCoupon" v-model="trade.IsFixedCoupon">
                        <option value="true">否</option>
                        <option value="false">是</option>
                    </select>
                </div>
                <div class="form-group col-6" v-show="trade.PayoffType==='固定'">
                    <label class="formlabel">票息日历规则</label>
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">敲出是否终止</label>
                    <select name="EarlyTerminate" v-model="trade.EarlyTerminate">
                        <option value="false">否</option>
                        <option value="true" v-bind:disabled="trade.SettlementMode==='现金期末'||trade.AccumulatorStructureType == '1'">是</option>
                    </select>
                </div>
                <template v-if="trade.AccumulatorStructureType == '1'">
                    <div class="form-group col-6">
                        <label class="formlabel">结算方式1</label>
                        <select name="SettlementMode" v-model="trade.SettlementMode" v-on:change="changePayoffType" v-once>
                            <option value="现金当日">现金结算(当日)</option>
                            <option value="实物交割">实物交割</option>
                            <option value="现金实物合并结算">现金实物合并结算</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">累计类型1</label>
                        <select @*name="AccumuType" v-model="trade.AccumuType"*@ v-bind:disabled="trade.AccumulatorStructureType == '1' || !(false || trade.SettlementMode==='现金期末'||(trade.SettlementMode==='实物交割')||(trade.SettlementMode==='现金实物合并结算'))">
                            <option value="">无</option>
                            <option value="子弹" v-bind:disabled="trade.SettlementMode!=='现金期末'">子弹</option>
                            <option value="区间现金结算" v-bind:disabled="!(trade.SettlementMode==='实物交割'||trade.SettlementMode==='现金实物合并结算')">区间现金结算</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">远期期初价类型1</label>
                        <select name="ForwardPriceType" v-model="trade.ForwardPriceType" v-bind:disabled="!(trade.SettlementMode==='实物交割'||trade.SettlementMode==='现金实物合并结算')">
                            <option value="期权行权价格">期权行权价格</option>
                            <option value="期权期初价格">期权期初价格</option>
                            <option value="远期开仓现价">远期开仓现价</option>
                            <option value="期权成交日收盘价">期权成交日收盘价</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">远期到期日类型1</label>
                        <select name="ForwardDateType" v-model="trade.ForwardDateType" v-bind:disabled="!(trade.SettlementMode==='实物交割'||trade.SettlementMode==='现金实物合并结算')">
                            <option v-for="item in pageData.tradeForwardDateType" v-bind:value="item.Value">{{item.Value}}</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">结算方式2</label>
                        <select name="SettlementMode2" v-model="trade.SettlementMode2" v-on:change="changePayoffType" v-once>
                            <option value="现金当日">现金结算(当日)</option>
                            <option value="实物交割">实物交割</option>
                            <option value="现金实物合并结算">现金实物合并结算</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">累计类型2</label>
                        <select @*name="AccumuType" v-model="trade.AccumuType"*@ v-bind:disabled="trade.AccumulatorStructureType == '1' || !(false || trade.SettlementMode2==='现金期末'||(trade.SettlementMode2==='实物交割')||(trade.SettlementMode2==='现金实物合并结算'))">
                            <option value="">无</option>
                            <option value="子弹" v-bind:disabled="trade.SettlementMode2!=='现金期末'">子弹</option>
                            <option value="区间现金结算" v-bind:disabled="!(trade.SettlementMode2==='实物交割'||trade.SettlementMode2==='现金实物合并结算')">区间现金结算</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">远期期初价类型2</label>
                        <select name="ForwardPriceType2" v-model="trade.ForwardPriceType2" v-bind:disabled="!(trade.SettlementMode2==='实物交割'||trade.SettlementMode2==='现金实物合并结算')">
                            <option value="期权行权价格">期权行权价格</option>
                            <option value="期权期初价格">期权期初价格</option>
                            <option value="远期开仓现价">远期开仓现价</option>
                            <option value="期权成交日收盘价">期权成交日收盘价</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">远期到期日类型2</label>
                        <select name="ForwardDateType2" v-model="trade.ForwardDateType2" v-bind:disabled="!(trade.SettlementMode2==='实物交割'||trade.SettlementMode2==='现金实物合并结算')">
                            <option v-for="item in pageData.tradeForwardDateType" v-bind:value="item.Value">{{item.Value}}</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">结算方式3</label>
                        <select name="SettlementMode3" v-model="trade.SettlementMode3" v-on:change="changePayoffType" v-once>
                            <option value="现金当日">现金结算(当日)</option>
                            <option value="实物交割">实物交割</option>
                            <option value="现金实物合并结算">现金实物合并结算</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">累计类型3</label>
                        <select @*name="AccumuType" v-model="trade.AccumuType"*@ v-bind:disabled="trade.AccumulatorStructureType == '1' || !(false || trade.SettlementMode3==='现金期末'||(trade.SettlementMode3==='实物交割')||(trade.SettlementMode3==='现金实物合并结算'))">
                            <option value="">无</option>
                            <option value="子弹" v-bind:disabled="trade.SettlementMode3!=='现金期末'">子弹</option>
                            <option value="区间现金结算" v-bind:disabled="!(trade.SettlementMode3==='实物交割'||trade.SettlementMode3==='现金实物合并结算')">区间现金结算</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">远期期初价类型3</label>
                        <select name="ForwardPriceType3" v-model="trade.ForwardPriceType3" v-bind:disabled="!(trade.SettlementMode3==='实物交割'||trade.SettlementMode3==='现金实物合并结算')">
                            <option value="期权行权价格">期权行权价格</option>
                            <option value="期权期初价格">期权期初价格</option>
                            <option value="远期开仓现价">远期开仓现价</option>
                            <option value="期权成交日收盘价">期权成交日收盘价</option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">远期到期日类型3</label>
                        <select name="ForwardDateType3" v-model="trade.ForwardDateType3" v-bind:disabled="!(trade.SettlementMode3==='实物交割'||trade.SettlementMode3==='现金实物合并结算')">
                            <option v-for="item in pageData.tradeForwardDateType" v-bind:value="item.Value">{{item.Value}}</option>
                        </select>
                    </div>
                </template>
                <div></div>
            </template>
            <template v-if="fieldState.Accumulator && trade.AccumulatorStructureType == '0'">
                <div class="form-group col-6">
                    <label class="formlabel">敲出障碍价格</label>
                    <vue-number-input name="KOBarrier" v-model="trade.KOBarrier" v-on:input="changeKOBarrier" v-bind:format="inputFormatStrike"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">观察日</label>
                    <div class="yt-input-group">
                        <input type="text" min="0" class="form-control" v-model="koObservationRate" name="koObservationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append" title="设置观察日" v-on:click="setObservationDates('#KO')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">上端收益类型</label>
                    <select name="PayoffType" v-model="trade.PayoffType" v-on:change="changePayoffType">
                        <option value="浮动">浮动</option>
                        <option value="固定" v-bind:disabled="trade.SettlementMode==='现金期末'">固定(票息)</option>
                    </select>
                </div>
                <div class="form-group col-6" v-show="trade.PayoffType==='固定'">
                    <label class="formlabel">票息</label>
                    <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="form-group col-6" v-show="trade.PayoffType==='固定'">
                    <label class="formlabel">票息年化</label>
                    <select name="IsFixedCoupon" v-model="trade.IsFixedCoupon">
                        <option value="true">否</option>
                        <option value="false">是</option>
                    </select>
                </div>
                <div class="form-group col-6" v-show="trade.PayoffType==='固定'">
                    <label class="formlabel">票息日历规则</label>
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                @if (PS.Config.ErpElement.AccumulatorShowMultiplier1)
                {
                    <div class="form-group col-6">
                        <label class="formlabel">杠杆倍数</label>
                        <vue-number-input name="StrikeGearingFactor" v-model="trade.StrikeGearingFactor" v-bind:format="inputFormatDouble2"></vue-number-input>
                    </div>
                }
                else
                {
                    <div class="form-group col-6">
                        <label class="formlabel">看涨乘数</label>
                        <vue-number-input name="CallMultiplier" v-model="trade.CallMultiplier" v-bind:format="inputFormatDouble2"></vue-number-input>
                    </div>
                    <div class="form-group col-6">
                        <label class="formlabel">看跌乘数</label>
                        <vue-number-input name="PutMultiplier" v-model="trade.PutMultiplier" v-bind:format="inputFormatDouble2"></vue-number-input>
                    </div>
                }
                <div class="form-group col-6">
                    <label class="formlabel">敲出是否终止</label>
                    <select name="EarlyTerminate" v-model="trade.EarlyTerminate">
                        <option value="false">否</option>
                        <option value="true" v-bind:disabled="trade.SettlementMode==='现金期末'||trade.AccumulatorStructureType == '1'">是</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">结算方式</label>
                    <select name="SettlementMode" v-model="trade.SettlementMode" v-on:change="changePayoffType" v-once>
                        <option value="现金当日">现金结算(当日)</option>
                        <option value="现金期末" >现金结算(期末)</option>
                        <option value="实物交割">实物交割</option>
                        <option value="现金实物合并结算">现金实物合并结算</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">累计类型</label>
                    <select name="AccumuType" v-model="trade.AccumuType" v-bind:disabled="!(trade.SettlementMode==='现金期末'||(trade.SettlementMode==='实物交割')||(trade.SettlementMode==='现金实物合并结算'))">
                        <option value="">无</option>
                        <option value="子弹" v-bind:disabled="!(trade.SettlementMode=='现金期末')">子弹</option>
                        <option value="区间现金结算" v-bind:disabled="!(trade.SettlementMode==='实物交割'||trade.SettlementMode=='现金实物合并结算')">区间现金结算</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">远期期初价类型</label>
                    <select name="ForwardPriceType" v-model="trade.ForwardPriceType" v-bind:disabled="!(trade.SettlementMode=='实物交割' || trade.SettlementMode=='现金实物合并结算')">
                        <option value="期权行权价格">期权行权价格</option>
                        <option value="期权期初价格">期权期初价格</option>
                        <option value="远期开仓现价">远期开仓现价</option>
                        <option value="期权成交日收盘价">期权成交日收盘价</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">远期到期日类型</label>
                    <select name="ForwardDateType" v-model="trade.ForwardDateType" v-bind:disabled="!(trade.SettlementMode=='实物交割' || trade.SettlementMode=='现金实物合并结算')">
                        <option v-for="item in pageData.tradeForwardDateType" v-bind:value="item.Value">{{item.Value}}</option>
                    </select>
                </div>

            </template>
            <!--现金流交易-->
            <template v-if="fieldState.Cashflow">
                <!--交易总额-->
                <div class="form-group col-6">
                    <label class="formlabel">交易总额</label>
                    <div class="yt-input-group">
                        <vue-number-input name="TradePrice" v-model="trade.TradePrice" v-on:input="changeTradePrice" v-bind:format="inputFormatTradePrice"></vue-number-input>
                        <a href="javascript:;" title="计算交易总额" v-on:click="calcPrice" class="yt-input-group-append" tabindex="-1"><i class="fa fa-refresh"></i></a>
                    </div>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">利率</label>
                    <vue-number-input name="ProfitRate" v-model="trade.ProfitRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">资金类型</label>
                    <select name="DepositType" v-model="trade.DepositType" v-on:change="changeDepositType">
                        <option v-for="item in consDepositType" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">利率类型</label>
                    <select name="RateType" v-model="trade.RateType" v-on:change="changeFieldState">
                        <option v-for="item in consRateType" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">计算日历规则</label>
                    <vue-daycount name="CouponDayCount" v-model="trade.CouponDayCount" />
                </div>
                <div class="form-group col-6" v-show="trade.DepositType=='0'">
                    <label class="formlabel">返还比例</label>
                    <vue-number-input name="PrepayRatio" v-model="trade.PrepayRatio" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                </div>
            </template>
            <!--------------结构化产品-------------->
            <template v-if="fieldState.Structure">
                <div class="form-group col-6">
                    <label class="formlabel">结算类型</label>
                    <select v-model="viewState.CashOrPhysical" v-on:change="setcashOrPhysical">
                        <option v-for="item in consCashAsPhysical" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">结构要素</label>
                    <div class="yt-input-group">
                        <input type="text" min="0" class="text-box" v-model="structure" name="observationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append" title="设置结构要素" v-on:click="setStructureList()" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
                <div class="form-group col-6">
                    <label class="formlabel">观察频率</label>
                    <div class="yt-input-group">
                        <input type="text" min="0" class="text-box" v-model="observationRate" name="observationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append" title="设置观察日" v-on:click="setObservationDates('#ST')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
            </template>
            <!--观察频率-->
            <template v-if="fieldState.ObservationDatesShow && (trade.TradeType!=='二元期权'||(trade.TradeType==='二元期权'&&trade.ExerciseMode === 'American'))">
                <div class="form-group col-6">
                    <label class="formlabel">观察频率</label>
                    <div class="yt-input-group">
                        <input type="text" min="0" class="text-box" v-model="observationRate" name="observationRate" id="txtObservationRate" readonly />
                        <a href="javascript:;" class="yt-input-group-append" title="设置观察日" v-on:click="setObservationDates('#KI')" tabindex="-1">
                            <i class="fa fa-pencil-square"></i>
                        </a>
                    </div>
                </div>
            </template>

            <!--无风险利率-->
            <div class="form-group col-6">
                <label class="formlabel">无风险利率</label>
                <vue-number-input name="NoRiskRate" v-model="trade.NoRiskRate" v-bind:format="inputFormatPercent"></vue-number-input>
            </div>
            <template v-if="!fieldState.Cashflow">
                <!--分红率-->
                <div class="form-group col-6" v-show="trade.UnderlyingInstrumentType==='Stock'||trade.UnderlyingInstrumentType==='StockIndex'">
                    <label class="formlabel">分红率</label>
                    <div class="yt-input-group" v-bind:class="viewState.DividendRate">
                        <vue-number-input name="DividendRate" v-model="trade.DividendRate" 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>
                <!--成交波动率-->
                <template>
                    @if (Model.IsTradeVol)
                    {
                        <div class="form-group col-6" style="height:32px;">
                            <label class="formlabel">成交波动率</label>
                            <div class="yt-input-group">
                                <vue-number-input name="TradeOpenVolatility" v-model="trade.TradeOpenVolatility" v-bind:format="inputFormatVolPercent"></vue-number-input>
                                <a href="javascript:;" v-on:click="getTradeImpliedVol" title="计算隐含波动率" class="yt-input-group-append" tabindex="-1" v-show="trade.TradeType==='香草期权'">
                                    <i class="fa fa-calculator"></i>
                                </a>
                                <span id="TradeOpenVolatilityTip" style="color: red; display: inline-block;"></span>
                            </div>
                        </div>
                        if (Model.SkewMapVol)
                        {
                            <div class="form-group col-6">
                                <label class="formlabel">目标波动率</label>
                                <vue-number-input name="TradeCloseVolatility" v-model="trade.TradeCloseVolatility" v-on:input="getTradeOpenVolatility('user')" v-bind:format="inputFormatVolPercent"></vue-number-input>
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">Var</label>
                                <input type="number" name="Var" min="0" v-on:change="getTradeOpenVolatility('user')" v-model="trade.Var" step="1" />
                            </div>
                        }
                        else
                        {
                            <div class="form-group col-6">
                                <label class="formlabel">目标波动率</label>
                                <vue-number-input name="TradeCloseVolatility" v-model="trade.TradeCloseVolatility" v-bind:format="inputFormatVolPercent"></vue-number-input>
                            </div>
                        }
                        <div class="form-group col-6">
                            <label class="formlabel">平滑过渡天数</label>
                            <input name="NumOfSmoothingDays" class="text-box" type="number" min="0" v-model="trade.NumOfSmoothingDays">
                        </div>
                    }
                    else
                    {
                        <div class="form-group col-6">
                            <label class="formlabel">波动率</label>
                            <div class="yt-input-group">
                                <vue-number-input name="Vol" v-model="trade.Vol" v-bind:format="inputFormatVolPercent"></vue-number-input>
                            </div>
                        </div>
                    }
                </template>
            </template>

            @if (PS.Config.Is润和)
            {
                <template v-if="!fieldState.Cashflow">
                    <div class="form-group col-6">
                        <label class="formlabel">Mid Vol</label>
                        <div class="yt-input-group">
                            <vue-number-input name="MidVol" 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>
                    <div class="form-group col-6">
                        <label class="formlabel">Day1 Pnl</label>
                        <div class="yt-input-group">
                            <vue-number-input name="Day1Pnl" v-model="trade.Day1Pnl" v-bind:format="inputFormatTradePrice" disabled></vue-number-input>
                        </div>
                    </div>
                </template>
            }

            <!--自定义交易-->
            <template v-if="fieldState.Custom">
                <div class="form-group col-12">
                    <label class="formlabel">自定义结构类型</label>
                    <select name="StructureType" v-model="trade.StructureType">
                        @foreach (var item in pageObj.structureTypes)
                        {
                            <option value="@(item)">@(item)</option>
                        }
                    </select>
                </div>
                <div class="form-group col-12">
                    <label class="formlabel">结构说明</label>
                    <textarea class="text-box text-left" rows="3" v-model="trade.StructureIntroduction" name="StructureIntroduction" style="width: calc(50% + 170px);height:50px;"></textarea>
                </div>
            </template>

            <!--自定义交易-->
            <template v-if="fieldState.Custom && trade.StructureType">
                <template v-for="(value,key,index) in PropertyMap">
                    <template v-for="(item,index) in value">
                        <div v-show="trade.StructureType == key" class="form-group col-6">
                            <template v-if="item.isNew">
                                <input type="text" class="form-input" style="width: 120px;" :data-name="item.ColumnName" v-model="item.ColumnName" v-on:change="changeOption()" />
                            </template>
                            <template v-else>
                                <label class="formlabel">{{item.ColumnName}}</label>
                            </template>
                            <template v-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.NUMBER)">
                                <vue-number-input type="text" class="form-input" :data-name="item.ColumnName" v-model="item.ColumnDefaultValue" v-bind:format="customNumberFormat"></vue-number-input>
                            </template>
                            <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.NUMBERP)">
                                <vue-number-input type="text" class="form-input" :data-name="item.ColumnName" v-model="item.ColumnDefaultValue" v-bind:format="customNumberPercentFormat"></vue-number-input>
                            </template>
                            <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.DATE)">
                                <vue-datepicker class="text-box form-input" :data-name="item.ColumnName" v-model="item.ColumnDefaultValue" />
                            </template>
                            <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.COMBO_BOX_SINGLE)">
                                <select class="form-input" :data-name="item.ColumnName" v-model="item.ColumnDefaultValue" autocomplete="off">
                                    <option v-for="opt in item.ColumnOptions.split(',')" :value="opt" :key="opt">
                                        {{opt}}
                                    </option>
                                </select>
                            </template>
                            <template v-else>
                                @*YLErp.Enums.StructureColumnTypeEnum.TEXT*@
                                <input type="text" class="form-input" :data-name="item.ColumnName" v-model="item.ColumnDefaultValue" />
                            </template>
                            <a class="fa fa-minus" style="margin-left: 10px;" v-on:click="deleteProperty(index)"></a>
                        </div>
                    </template>
                </template>
                <div class="form-group col-6" style="text-align: center;">
                    <button type="button" class="btn btn-primary btn-save" v-on:click="addNewProperty()">新增</button>
                </div>
            </template>

            <!--交易扩展模板-->
            <template v-if="!fieldState.Custom">
                <div class="form-group col-12">
                    <label class="formlabel">自定义要素模板</label>
                    <select name="ExtendInfos" v-model="ExtendInfos">
                        @foreach (var item in pageObj.extendInfos)
                        {
                            <option value="@(item)">@(item)</option>
                        }
                    </select>
                </div>
            </template>
            <!--交易扩展信息-->
            <template v-if="!fieldState.Custom && ExtendInfos">
                <template v-for="(value,key,index) in ExtendMap">
                    <template v-for="(item,index) in value">
                        <div v-show="ExtendInfos == key" class="form-group col-6">
                            <template v-if="item.isNew">
                                <input type="text" class="form-input" style="width: 120px;" :name="item.ColumnName" v-model="item.ColumnName" v-on:change="changeOption()" />
                            </template>
                            <template v-else>
                                <label class="formlabel">{{item.ColumnName}}</label>
                            </template>
                            <template v-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.NUMBER)">
                                <vue-number-input type="text" class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" v-bind:format="customNumberFormat"></vue-number-input>
                            </template>
                            <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.NUMBERP)">
                                <vue-number-input type="text" class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" v-bind:format="customNumberPercentFormat"></vue-number-input>
                            </template>
                            <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.DATE)">
                                <vue-datepicker class="text-box form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" />
                            </template>
                            <template v-else-if="item.ColumnType == @((int)YLErp.Enums.StructureColumnTypeEnum.COMBO_BOX_SINGLE)">
                                <select class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" autocomplete="off">
                                    <option v-for="opt in item.ColumnOptions.split(',')" :value="opt" :key="opt">
                                        {{opt}}
                                    </option>
                                </select>
                            </template>
                            <template v-else>
                                @*YLErp.Enums.StructureColumnTypeEnum.TEXT*@
                                <input type="text" class="form-input" :name="item.ColumnName" v-model="item.ColumnDefaultValue" />
                            </template>
                            <a class="fa fa-minus" style="margin-left: 10px;" v-on:click="deleteProperty(index)"></a>
                        </div>
                    </template>
                </template>
                <div class="form-group col-6" style="text-align: center;">
                    <button type="button" class="btn btn-primary btn-save" v-on:click="addNewProperty()">新增</button>
                </div>
            </template>

            @if (PS.Config.ErpElement.CanSetTradePremium)
            {
                <div class='form-group col-md-6'>
                    <label class='formlabel'>成交溢价</label>
                    <vue-number-input id='TradePremium' class='text-box' type='text' value='0' name='TradePremium' v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
            }
            @if (PS.Config.Company == CompanyEnum.兴证)
            {
                <template v-if="fieldState.SnowBall">
                    <div class='form-group col-md-6'>
                        <label class='formlabel'>追保价格1</label>
                        <vue-number-input class='text-box' v-model="trade.MetaDic.MarginSpot1" type='text' name='MarginSpot1' v-bind:format="inputFormatStrike" v-bind:ret_type="1"></vue-number-input>
                    </div>
                    <div class='form-group col-md-6'>
                        <label class='formlabel'>追保价格2</label>
                        <vue-number-input class='text-box' v-model="trade.MetaDic.MarginSpot2" type='text' name='MarginSpot2' v-bind:format="inputFormatStrike" v-bind:ret_type="1"></vue-number-input>
                    </div>
                </template>
            }
        </div>
        <div class="row">
            <div class='form-group col-12'>
                <label class='formlabel'>备注</label>
                <textarea id='Comments' rows='3' name='Comments' style="width:560px;" v-model="trade.Comments" class="text-box h-auto text-left"></textarea>
            </div>
        </div>
        @if (CurUser.交易管理_交易标签调整权限 && !isCheck)
        {
            <div class="row">
                <div class='form-group col-12'>
                    <label class='formlabel'>标签</label>
                    <div class="tag-context" style="border: 1px solid #bbb;width:560px;display:inline-block;line-height:36px;">
                        @if (Model.Tags != null && Model.Tags.Any())
                        {
                            foreach (var tag in Model.Tags)
                            {
                                if (!isCheck)
                                {
                                    <span class="tag-item" data-id="@tag.Id" data-name="@tag.Name"><span class="tag-text" data-value="@tag.Id">@tag.Name</span><span class="tag-remove" onclick="DeleteTag('@tag.Name')">x</span></span>
                                }
                                else
                                {
                                    <span class="tag-item" data-id="@tag.Id" data-name="@tag.Name"><span class="tag-text" data-value="@tag.Id">@tag.Name</span></span>
                                }
                            }
                        }
                        @if (!isCheck)
                        {
                            <span class="tag-add">+</span>
                        }
                    </div>
                </div>
            </div>
        }
        <div class="row" id="hidsearchtag" style="display:none;">
            <div class="tag-search">
                <div class="keyword-div">
                </div>
                <div class="selectlist">
                </div>
            </div>
        </div>
        <div id="hidhastags" style="display:none;">
            <ul>
                @if (((List<sys_tag>)ViewBag.TagList) != null && ((List<sys_tag>)ViewBag.TagList).Any())
                {
                    foreach (var tag in (List<sys_tag>)ViewBag.TagList)
                    {
                        <li data-id="@tag.id" onclick="selectTag('@tag.id','@tag.Name')">@tag.Name</li>
                    }
                }
            </ul>

            <span class="js-li-none-tip" style="display:none;">没有可选择的标签，可按Enter键新增</span>
        </div>
        <div>
            @if (ViewBag.isUseApproval ?? false)
            {
                <button class="btn btn-primary" type="button" v-on:click="submit('pass')">审批通过</button>
                <button class="btn btn-primary" type="button" v-on:click="submit('reject')">拒绝</button>
            }
            else if (!Model.IsCheck)
            {
                <div class="col-12 pt-5 pl-5 text-center">
                    @if (PS.Config.Company != CompanyEnum.东方财富)
                    {
                        <button class="btn btn-primary" type="button" v-on:click="saveTrade">保存</button>
                    }
                    else
                    {
                        <button class="btn btn-primary" type="button" v-on:click="saveTrade2">保存</button>
                    }
                    <button class="btn btn-primary" type="button" onclick="layer.closeMe()">关闭</button>
                </div>
            }
            else
            {
                <div class="col-6 pt-5 pl-5 text-left">
                    <button class="btn btn-primary" type="button" v-on:click="checkTrade">复核</button>
                    <button class="btn btn-primary" type="button" v-on:click="rejectTrade">拒绝</button>
                    <button class="btn btn-primary" type="button" onclick="layer.closeMe()">关闭</button>
                </div>
            }
        </div>
    </div>
</form>

@if (!Model.IsCheck)
{
    @await Html.PartialAsync("/Views/Pricing/_SyntheticPrice.cshtml")
}
@await Html.PartialAsync("/Views/trade/_part/SalesCommission.cshtml", new SalesCommissionModel() { Disabled = Model.IsCheck, ViewType = "期权" })

<!--输入错误信息提示-->
<div class="modal" id="checkErrorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">错误提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="checkErrorTable" class="table table-bordered table-hover">
                    <thead><tr><th>错误信息</th></tr></thead>
                    <tbody><tr><td></td></tr></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="modalTradeSave" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="form-group">
                    <label class="formlabel">初始预付金率</label>
                    <input type="number" class="form-input" id="InitialAdvance" value="@(Model.Trade.InitialAdvance)" />
                    <span>% </span>
                </div>
                <div class="form-group">
                    <label class="formlabel">期间预付金率</label>
                    <input type="number" class="form-input" id="PeriodAdvance" value="@(Model.Trade.PeriodAdvance)" />
                    <span>% </span>
                </div>
                <div class="form-group">
                    <label class="formlabel">前端收益费率</label>
                    <input type="number" class="form-input" id="FontEarning" value="@(Model.Trade.FontEarning)" />
                    <span>% </span>
                </div>
                <div class="form-group">
                    <label class="formlabel">追保线</label>
                    <input type="number" class="form-input" id="ConfirmedLine" value="@(Model.Trade.ConfirmedLine)" />
                    <span>% </span>
                </div>
                <div class="form-group">
                    <label class="formlabel">追保比例下限</label>
                    <input type="number" class="form-input" id="ConfirmedFloor" value="@(Model.Trade.ConfirmedFloor)" />
                    <span>% </span>
                </div>
            </div>
            <div class="modal-footer">
                <div class="mx-auto">
                    <button onclick="btnSave()" class="btn btn-primary btn-save">保存</button>
                    <button class="btn btn-primary btn-close" onclick="closeSave()">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="extendInfo" style="display:none">
    <div class="search-group">
        <textarea style="width: 580px;height: 160px;margin: 10px;resize: none;" id="editRemarks"></textarea>
    </div>
</div>