@using YLErp.Web.Models.JsModels;
@using YLErp.Commons;
@using YLErp.Modules.SwapModule;
@model trade
@{
    ViewBag.Title = "交易信息 | 编辑";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";

    var isAdd = Model.id == 0;
    var isUseApproval = ViewBag.isUseApproval ?? false;
    var canChangeClient = isAdd || Model.TradeStatus == ConsTrade.新增待确认;
    var canAddNewTrader = CurUser.交易管理_新增选择交易员;
    var canEdit = Model.SwapCanEdit() && CurUser.交易管理_交易编辑;
    var jsClients = canChangeClient ? JsDataModel.GetClients() : Enumerable.Empty<ClientJsModel>();
    var jsClient = canChangeClient && Model.ClientId > 0 ? jsClients.FirstOrDefault(n => n.id == Model.ClientId) : null;
    var jsAssetUnits = JsDataModel.GetAssetUnits(CurUser);
    var tradeMarginTemplates = new tradeController().GetMarginTemplates();
    var swapMarginTemplateItems = SwapMarginTemplateConfigService.GetConfig().options;
    var tradeMarginTemplateItems = new tradeController().GetMarginTemplateItems();
    var jsAssetUnit = Model.AssetId > 0 ? jsAssetUnits.FirstOrDefault(n => n.id == Model.AssetId) : null;
    var assetunits = JsDataModel.GetAssetUnits(CurUser);
    var jsTraders = canAddNewTrader ? JsDataModel.GetTraders(assetunits) : Enumerable.Empty<TraderJsModel>();
    var jsTrader = canAddNewTrader && Model.TraderId > 0 ? jsTraders.FirstOrDefault(n => n.id == Model.TraderId) : null;
    var currencys = CurrencyController.getList();
    var categoryTagOptions = DictionaryBLL.GetList("利息端类别", false, "互换利率");
    List<string> places = new List<string>();
    List<string> agencys = new List<string>();
    var tradingPlaceMap = YLErp.DBModels.Consts.ConsReport.TradingPlaceMapDisplay;
    var clearingAgencyMap = YLErp.DBModels.Consts.ConsReport.ClearingAgencyMapDisplay;
    foreach (var item in tradingPlaceMap)
    {
        places.Add(item.Key);
    }
    foreach (var item in clearingAgencyMap)
    {
        agencys.Add(item.Key);
    }
    var otcFormatConfig = new
    {
        StockEqvNotional = new
        {
            precision = OtcFormatHelper.FormatModel.trading.StockEqvNotional.precision,
            minDecimals = OtcFormatHelper.FormatModel.trading.StockEqvNotional.minDecimals,
            maxDecimals = OtcFormatHelper.FormatModel.trading.StockEqvNotional.maxDecimals
        },
        // 如果需要其他格式，可以继续添加
        notional = new
        {
            precision = OtcFormatHelper.FormatModel.trading.notional.precision
        },
        tradePrice = new
        {
            precision = OtcFormatHelper.FormatModel.trading.tradePrice.precision
        }
    };
    var pageObj = new
    {
        isAdd,
        canEdit,
        canChangeClient,
        canAddNewTrader,
        Trade = Model,
        valuedate = valuedateBLL.ValueDate.ToString("yyyy-MM-dd"),
        g_get_trade_swap_details = Model.get_trade_swap_details,
        g_pay_trade_swap_details = Model.pay_trade_swap_details,
        jsClient,
        jsClients,
        jsAssetUnit,
        jsAssetUnits,
        jsTrader,
        jsTraders,
        tradeMarginTemplates = tradeMarginTemplates,
        swapMarginTemplateItems = swapMarginTemplateItems,
        tradeMarginTemplateItems = tradeMarginTemplateItems,
        needRemark = !isAdd && valuedateBLL.SystemDate.EditTradeNeedRemark,
        parentTradeId = ViewBag.ParentTradeId,
        currencys = currencys,
        generateAmendDoc = PS.Config.TradeElement.IsGenerateAmendDoc,
        needSendChangeEmail = PS.Config.TradeElement.IsAmendableAfterConfirm && PS.Config.TradeElement.IsGenerateAmendDoc,
        securitiesEnvironment = PS.Config.ErpElement.SecuritiesEnvironment,
        tradingPlaceMap = places,
        clearingAgencyMap = agencys,
        timeUnits = GlobalData.AllTimeUnits(),
        otcFormatConfig = otcFormatConfig,
        swapFloatingIncomeReceiveOnlyMode = PS.Config.ErpElement.SwapFloatingIncomeReceiveOnlyMode
    };
    //pageObj.clearingAgencyMap.Remove("甲方");
    //pageObj.clearingAgencyMap.Remove("已方");

}
@section CSS{
    <link rel="stylesheet" href="~/Style/Css/swapTradeEditV2.css?v=@(HtmlUtil.JsVersion)" />
}
@section JS{
    <script type="text/javascript">
        const page = @Json.Serialize(pageObj);
        page.Trade.StartDate = page.Trade.StartDate ? page.Trade.StartDate.substr(0, 10) : "";
        page.Trade.TradeDate = page.Trade.TradeDate ? page.Trade.TradeDate.substr(0, 10) : "";
        page.Trade.ExerciseDate = page.Trade.ExerciseDate ? page.Trade.ExerciseDate.substr(0, 10) : "";
    </script>
    <script src="@HtmlUtil.BasicDataJs("品种","客户","簿记","交易员")"></script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/fast/fastVue.components.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/front/swappriceprecision?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/swaptrade/swapPricePrecisionHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/swaptrade/swapCalc.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/swaptrade/swapTradeEdit.js?v=@HtmlUtil.JsVersion"></script>
}
<div id="tradeEdit">
    <form id="tradeEditForm">
        <div class="row no-gutters">
            <div class="col-auto" style="width:400px;">
                <div class="titleDiv">
                    <div class="titleHead"></div>
                    <div class="titleLabel"><label>基本信息</label></div>
                </div>
                <div class="yc-panel">
                    <div class="form-group">
                        <label class="formlabel half">产品结构</label>
                        <select v-model="trade.StructureType" v-on:change="changeStructureType" :disabled="trade.id>0">
                            <option value="普通债券类收益互换">普通债券类收益互换</option>
                            <option value="普通收益互换">普通收益互换</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">簿记账户</label>
                        <input type="hidden" name="AssetBookName" id="AssetBookName" v-model="trade.AssetBookName" />
                        <input type="text" name="AssetId" id="AssetId" value="trade.AssetId" class="text-box" />
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">交易对手方</label>
                        @if (pageObj.canChangeClient)
                        {
                            <input type="hidden" name="ClientName" id="ClientName" v-model="trade.ClientName" />
                            <input type="text" name="ClientId" id="ClientId" v-model="trade.ClientId" :title="trade.ClientName" class="text-box" />
                        }
                        else
                        {
                            <input type="hidden" name="ClientId" id="ClientId" v-model="trade.ClientId" />
                            <input type="text" name="ClientName" id="ClientName" v-model="trade.ClientName" :title="trade.ClientName" readonly class="text-box" />
                        }

                    </div>
                    <div class="form-group">
                        <label class="formlabel half">交易员</label>
                        <input type="hidden" name="TraderName" id="TraderName" v-model="trade.TraderName" />
                        <input type="text" name="TraderId" id="TraderId" v-model="trade.TraderId" class="text-box" />
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">成交日期</label>
                        <vue-datepicker :holiday="1" v-model="trade.TradeDate" v-on:input="onTradeDateChange"/>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">开始日期</label>
                        <vue-datepicker ref="startDatePicker" :mindate="trade.TradeDate" :holiday="1" v-model="trade.StartDate" v-on:input="onStartDateChange" />
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">到期日期</label>
                        <vue-datepicker ref="exerciseDatePicker" name="ExerciseDate" :holiday="1" v-model="trade.ExerciseDate" v-on:input="changeExerciseDate" />
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">名义本金</label>
                        <vue-number-input id="StockEqvNotional" name="StockEqvNotional" v-model="trade.StockEqvNotional" v-on:input="changeStockEqvNotional" v-bind:format="inputFormatEqvNotional"></vue-number-input>
                    </div>
                    @*<div class="form-group" style="display:flex;line-height:35px">
                        <label class="formlabel half">初始预付金</label>
                        <div style="width:51%">
                            <template v-if="trade.trade_Initial_Margin.MarginType==0">
                                <vue-number-input v-model="trade.trade_Initial_Margin.MarginValue" v-bind:format="inputFormatSwapRate" style="width:65% !important;margin-left:4px;"></vue-number-input>
                                <a href="javascript:;" title="点击后切换成绝对值权利金" v-on:click="showAbsPrice" class="yt-input-group-append" tabindex="-1">%</a>
                            </template>
                            <template v-else>
                                <vue-number-input v-model="trade.trade_Initial_Margin.MarginValue" v-bind:format="inputFormatTradeSinglePrice" style="width:65% !important;margin-left:4px;"></vue-number-input>
                                <a href="javascript:;" title="点击后切换成标的价格百分比" v-on:click="showPercentPrice" class="yt-input-group-append" tabindex="-1">￥</a>
                            </template>
                            <button :class="trade.trade_Initial_Margin.Direction==2?'btn btn-default swappay':'btn btn-default swapget'" type="button" style="min-width: 56px; height: 31px; border-color: #dee2e6 !important;margin-left:10px;" v-on:click="changeInitialMargin">{{trade.trade_Initial_Margin.Direction==2?"支付":"收取"}}</button>
                        </div>
                    </div>*@
                    <div class="form-group">
                        <label class="formlabel half">交易编号</label>
                        <input class="text-box" type="text" v-model="trade.TradeNumber" placeholder="留空自动生成">
                    </div>
                    <div id="salesCommissionCtrl"></div>
                    <div class="form-group">
                        <label class="formlabel half">流水簿记模式</label>
                        <select v-model="trade.trade_extend.ExtendObj.FlowBookMode" disabled>
                           @* <option value="0">否</option>*@
                            <option value="1">先进先出</option>
                          @*  <option value="2">加权平均</option>
                            <option value="3">重置</option>*@
                        </select>
                    </div>
                    <div class="form-group" >
                        <label class="formlabel half">交易场所</label>
                        <select v-model="viewState.Extend.TradingPlace" v-on:change="changeTradingPlace">
                            <option v-for="item in page.tradingPlaceMap" :value="item">{{item}}</option>
                        </select>
                    </div>

                    <div class="form-group" >
                        <label class="formlabel half">清算机构</label>
                        <select name="ClearingAgency" v-model="viewState.Extend.ClearingAgency" v-on:change="changeClearingAgency">
                            <option v-for="item in page.clearingAgencyMap" :value="item">{{item}}</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">主协议编号</label>
                        <select id="MainProtocolCode" name="MainProtocolCode" v-on:change="changeMainProtocolCode" v-if="page.canChangeClient">
                        </select>
                        <input name="MainProtocolCode" id="MainProtocolCode" class="text-box" type="text" v-if="!page.canChangeClient" readonly>
                    </div>

                    <div class="form-group">
                        <label class="formlabel half">补充协议编号</label>
                        <select name="SupProtocolCode" id="SupProtocolCode" v-if="page.canChangeClient">
                        </select>
                        <input name="SupProtocolCode" id="SupProtocolCode" class="text-box" type="text" v-if="!page.canChangeClient" readonly>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">交易对手方角色</label>
                        <select name="OpponentRole" v-model="trade.OpponentRole">
                            <option>甲方</option>
                            <option>乙方</option>
                        </select>
                    </div>
                </div>

                <div class="titleDiv">
                    <div class="titleHead"></div>
                    <div class="titleLabel"><label>收益选项</label></div>
                </div>
                <div class="yc-panel">
                    <div class="form-group">
                        <label class="formlabel half">年化天数</label>
                        <vue-number-input v-model="trade.trade_extend.ExtendObj.AnnualDays" v-bind:format="inputFormatInteger"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">计息方式</label>
                        <select v-model="trade.trade_extend.ExtendObj.InterestCalcMode">
                            <option value="11">算头算尾</option>
                            <option value="10">算头不算尾</option>
                            <option value="01">不算头算尾</option>
                            <option value="00">不算头不算尾</option>
                        </select>
                    </div>
                    @*<div class="form-group">
                        <label class="formlabel half">是否开仓时收取开仓费</label>
                        <select v-model="trade.trade_extend.ExtendObj.NeedOpenFee">
                            <option value=true>是</option>
                            <option value=false>否</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">收费基本单位</label>
                        <select v-model="trade.trade_extend.ExtendObj.OpenFeeType" v-on:change="changeOpenFeeType">
                            <option value=0>按数量收费</option>
                            <option value=1>按份数收费</option>
                        </select>
                    </div>*@
                    <div class="form-group">
                        <label class="formlabel half">结算规则</label>
                        <select v-model="trade.trade_extend.ExtendObj.SettlementRules">
                            <option value=0>T+0</option>
                            <option value=1>T+1</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">派息金额支付日</label>
                        <select v-model="trade.trade_extend.ExtendObj.DividendPayDate">
                            <option value=0>到期结算日</option>
                            <option value=1>派息日+0</option>
                            <option value=2>派息日+1</option>
                            <option value=3>派息日+2</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">保证金模板</label>
                        <select v-model="trade.MarginTemplateName">
                            <option v-for="item in page.swapMarginTemplateItems" :key="item.Value" :value="item.Value">
                                {{ item.Text }}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="row no-gutters swaprow">
                    <div class="titleDiv">
                        <div class="titleHead"></div>
                        <div class="titleLabel"><label>预付金</label></div>
                    </div>
                    <div class="yc-panel">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <th>收支方向</th>
                                    <th>资金类别</th>
                                    <th>发生日期</th>
                                    <th>金额</th>
                                    <th>币种</th>
                                    <th>预付金返息率</th>
                                    <th>利率是否年化</th>
                                    <th>结算规则</th>
                                    <th><button class="btn btn-primary swapadd" type="button" v-on:click="addMarginSwapRate">+</button></th>
                                </tr>
                                <tr v-for="item in marginSwapList">
                                    <td :class="item.InterestDirection==1?'swapget':'swappay'" style="width:116px;">
                                        <select v-model="item.InterestDirection" style="width:91px;">
                                            <option value=1>收取</option>
                                            <option value=2>支付</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select v-model="item.InterestMode">
                                            <option value=5>初始预付金</option>
                                            <option value=6>追加预付金</option>
                                        </select>
                                    </td>
                                    <td>
                                        <vue-datepicker :mindate="trade.TradeDate" :maxdate="trade.ExerciseDate" name="HappenDate" :holiday="1" v-model="item.HappenDate" style="width:100px;" ref="happenDateRefs" />
                                    </td>
                                    <td>  
                                        <vue-number-input v-bind:format="inputFormatTradeSinglePriceFixed2" v-model="item.InterestPrincipalFix" style="width:100px;"></vue-number-input>
                                    </td>
                                    <td>
                                        <select v-model="item.Currency" style="width:70px;">
                                            <option v-for="option in currencys">
                                                {{ option.Text }}
                                            </option>
                                        </select>
                                    </td>
                                    <td>
                                        <vue-number-input v-model="item.InterestRateDefault" v-bind:format="inputFormatSwapRate" v-on:input="blurSwapRate(item)" style="width:70px;"></vue-number-input>
                                    </td>
                                    <td>
                                        <select v-model="item.IsAnnualized" style="width:61px;">
                                            <option value=false>否</option>
                                            <option value=true>是</option>
                                        </select>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger" type="button" v-on:click="initObservationDates(item,0)">设置观察日</button>
                                    </td>
                                    <td>
                                        <a href="javascript:void(0);" title="删除"  v-on:click="deleteMarginSwapRate(item.index)"><span class="glyphicon glyphicon-minus" style="color:#ff0000"></span></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row no-gutters swaprow">
                    <div class="titleDiv">
                        <div class="titleHead"></div>
                        <div class="titleLabel"><label>利息端</label></div>
                    </div>
                    <div class="yc-panel">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <th>收支方向</th>
                                    <th>计息基本类型</th>
                                    <th>计息基数</th>
                                    <th>利率</th>
                                    <th>利率是否年化</th>
                                    <th>计息方式</th>
                                    <th>重置频率(天)</th>
                                    <th>利率准则</th>
                                    <th>类别</th>
                                    <th>结算规则</th>
                                    <th> <button class="btn btn-primary swapadd" type="button" v-on:click="addGetSwapRate">+</button></th>
                                </tr>
                                <tr v-for="item in getSwapList">
                                    <td :class="item.InterestDirection==1?'swapget':'swappay'" style="width:116px;">
                                        <select v-model="item.InterestDirection" style="width:91px;">
                                            <option value=1>收取</option>
                                            <option value=2>支付</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select v-model="item.InterestMode" v-on:change="changeInterestMode(item)">
                                            <option value="9">标的期初全价</option>
                                            <option value=1>固定值</option>
                                            <option value=2>合约名义本金规模</option>
                                        </select>
                                    </td>
                                    <td>
                                        <template v-if="item.InterestMode==1">
                                            <vue-number-input name="InterestPrincipal" v-bind:format="inputFormatEqvNotional" v-model="item.InterestPrincipalFix"></vue-number-input>
                                        </template>
                                        <template v-else>
                                            <vue-number-input name="StockEqvNotional" v-bind:format="inputFormatEqvNotional" v-model="trade.StockEqvNotional" style="background-color: #fff !important; border: none !important;" disabled></vue-number-input>
                                        </template>
                                    </td>
                                    <td>
                                        <vue-underlying-rate id="item.FloatRateUnderlyingCode" v-model="item.FloatRateUnderlyingCode" v-on:change="setFloatRateUnderlyingCode($event,item)" style="width:70px;"></vue-underlying-rate>+
                                        <vue-number-input v-model="item.InterestRateDefault" v-bind:format="inputFormatSwapRate" v-on:input="blurSwapRate(item)" style="width:70px;"></vue-number-input>
                                    </td>
                                    <td>
                                        <select v-model="item.IsAnnualized" style="width:61px;" :disabled="item.FloatRateUnderlyingCode!='--'&&item.FloatRateUnderlyingCode!=''&&item.FloatRateUnderlyingCode!=null">
                                            <option value=false>否</option>
                                            <option value=true>是</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select v-model="item.InterestType" style="width:61px;" v-on:change="changeInterestType(item)">
                                            <option value=0>单利</option>
                                            <option value=1>复利</option>
                                        </select>
                                    </td>
                                    <td>
                                        <vue-number-input v-model="item.interest_rest_days" style="width:70px;" v-bind:format="inputFormatInteger"></vue-number-input>
                                    </td>
                                    <td>
                                        <select v-model="item.interest_rule" :disabled="item.FloatRateUnderlyingCode=='--'||item.FloatRateUnderlyingCode==''||item.FloatRateUnderlyingCode==null">
                                            <option value=0>当前营业日</option>
                                            <option value=-1>前一营业日</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select v-model="item.category_tag">
                                            @foreach (var option in categoryTagOptions)
                                            {
                                                <option value="@option.Value">@option.Text</option>
                                            }
                                        </select>
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger" type="button" v-on:click="initObservationDates(item,1)">设置观察日</button>
                                    </td>
                                    <td>
                                       <a href="javascript:void(0);" title="删除"  v-on:click="deleteSwapRate(item.index)"><span class="glyphicon glyphicon-minus" style="color:#ff0000"></span></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row no-gutters swaprow" v-if="trade.StructureType!='多空组合'">
                    <div class="titleDiv">
                        <div class="titleHead"></div>
                        <div class="titleLabel"><label>浮动收益端</label></div>
                    </div>
                    <div class="yc-panel">
                        <table class="table table-bordered">
                            <tbody>
                                <tr class="swapflowtr">
                                    <th v-if="!page.swapFloatingIncomeReceiveOnlyMode">收支方向</th>
                                    <th>多空方向</th>
                                    <th>标的代码</th>
                                    <th v-if="trade.StructureType!='普通收益互换'">期初标的交割全价%</th>
                                    <th v-if="trade.StructureType!='普通收益互换'">期初标的交割净价%</th>
                                    <th v-if="trade.StructureType!='普通收益互换'">期初标的成交收益率%</th>
                                    <th v-if="trade.StructureType=='普通收益互换'">期初标的价格</th>
                                    <th>数量</th>
                                    <th>基础费率</th>
                                    <th>交易费用后付</th>
                                </tr>
                                <tr class="swapflowtr" v-for="item in paySwapList">
                                    <td v-if="!page.swapFloatingIncomeReceiveOnlyMode" :class="item.PosiDirection==1?'swapget':'swappay'" style="width:116px;">
                                        <select v-model="item.PosiDirection">
                                            <option value=1>收取</option>
                                            <option value=2>支付</option>
                                        </select>
                                    </td>
                                    <td>
                                        <select v-model="item.PositionType">
                                            <option value=1>多头</option>
                                            <option value=2>空头</option>
                                        </select>
                                    </td>
                                    <td>
                                        <vue-underlying-nonbond :key="getPosiPriceFormatKey(item,'UnderlyingCode')" v-if="trade.StructureType=='普通收益互换'" v-model="item.UnderlyingCode" v-on:change="setUnderlyingCode($event,item)"></vue-underlying-nonbond>
                                        <vue-underlying-bond :key="getPosiPriceFormatKey(item,'normalUnderlyingCode')" v-else v-model="item.UnderlyingCode" v-on:change="setUnderlyingCode($event,item)"></vue-underlying-bond>
                                        <a href="javascript:void(0);" title="发行信息" v-on:click="showUnderlyingInfo(item)" :id="'popover'+item.index" class="un" v-show="trade.StructureType!='普通收益互换'">
                                            <span class="glyphicon glyphicon-edit" aria-hidden="true" style="color:#ff0000"></span>
                                        </a>
                                    </td>
                                    <td v-if="trade.StructureType!='普通收益互换'">
                                        <vue-swap-price-input :key="getPosiPriceFormatKey(item,'PosiGrossPrice')" v-model="item.PosiGrossPrice" v-bind:format="getPosiPriceInputFormat(item,'grossPrice')" v-on:input="onDpPriceInput(item)" v-on:enter="onBondPriceEnter(item,'DP')" v-on:keydown="onBondPriceKeydown(item,'DP',$event)"></vue-swap-price-input>
                                        <span style="color:#2e7d32;font-size:11px;margin-left:4px;" v-if="item.isBond && item.bondDriverType==='DP'">源</span><span style="color:#1565c0;font-size:11px;margin-left:4px;" v-else-if="item.isBond && item.bondAuto && item.bondAuto.DP">AUTO</span><span style="color:#ef6c00;font-size:11px;margin-left:4px;" v-if="item.isBond && item.bondRev && item.bondRev.DP" title="人工输入：未回车触发计算器">REV</span>
                                    </td>
                                    <td v-if="trade.StructureType!='普通收益互换'">
                                        <vue-swap-price-input :key="getPosiPriceFormatKey(item,'PosiNetNoFeePrice')" v-model="item.PosiNetNoFeePrice" v-bind:format="getPosiPriceInputFormat(item,'netPrice')" v-on:input="onBondPriceEdit(item,'CP')" v-on:enter="onBondPriceEnter(item,'CP')" v-on:keydown="onBondPriceKeydown(item,'CP',$event)"></vue-swap-price-input>
                                        <span style="color:#2e7d32;font-size:11px;margin-left:4px;" v-if="item.isBond && item.bondDriverType==='CP'">源</span><span style="color:#1565c0;font-size:11px;margin-left:4px;" v-else-if="item.isBond && item.bondAuto && item.bondAuto.CP">AUTO</span><span style="color:#ef6c00;font-size:11px;margin-left:4px;" v-if="item.isBond && item.bondRev && item.bondRev.CP" title="人工输入：未回车触发计算器">REV</span>
                                    </td>
                                    <td v-if="trade.StructureType!='普通收益互换'">
                                        <vue-swap-price-input :key="getPosiPriceFormatKey(item,'InitYtm')" v-model="item.InitYtm" v-bind:format="getPosiPriceInputFormat(item,'yield')" v-on:input="onBondPriceEdit(item,'YD')" v-on:enter="onBondPriceEnter(item,'YD')" v-on:keydown="onBondPriceKeydown(item,'YD',$event)"></vue-swap-price-input>
                                        <span style="color:#2e7d32;font-size:11px;margin-left:4px;" v-if="item.isBond && item.bondDriverType==='YD'">源</span><span style="color:#1565c0;font-size:11px;margin-left:4px;" v-else-if="item.isBond && item.bondAuto && item.bondAuto.YD">AUTO</span><span style="color:#ef6c00;font-size:11px;margin-left:4px;" v-if="item.isBond && item.bondRev && item.bondRev.YD" title="人工输入：未回车触发计算器">REV</span>
                                    </td>
                                    <td v-if="trade.StructureType=='普通收益互换'">
                                        <vue-swap-price-input :key="getPosiPriceFormatKey(item,'normalPosiGrossPrice')" v-model="item.PosiGrossPrice" v-bind:format="getPosiPriceInputFormat(item,'grossPrice')" v-on:input="changeSpotPrice(item)"></vue-swap-price-input>
                                    </td>
                                    <td>
                                        <vue-number-input v-model="item.PosiQuantity" v-on:input="changeQuantity(item)" v-bind:format="getQuantityInputFormat(item)"></vue-number-input>{{item.underlying!=null?item.underlying.QuoteUnitString:''}}
                                    </td>
                                    <td>
                                        <template v-if="posiFeeModePercent">
                                            <vue-number-input v-model="item.PosiTradingFeeUnit" v-on:input="changeTradingFeeUnit(item)" v-bind:format="inputFormatPosiFeePercent"></vue-number-input>
                                            <a href="javascript:;" title="点击后切换成单位数量模式" v-on:click="showPayAbsPrice" class="yt-input-group-append" tabindex="-1">%</a>
                                        </template>
                                        <template v-else>
                                            <vue-number-input v-model="item.PosiTradingFeeUnit" v-on:input="changeTradingFeeUnit(item)" v-bind:format="inputFormatPosiFeeUnit"></vue-number-input>
                                            <a href="javascript:;" title="点击后切换成百分比模式" v-on:click="showPayPercentPrice" class="yt-input-group-append" tabindex="-1">￥</a>
                                        </template>
                                    </td>
                                    <td>
                                        <vue-number-input v-model="item.PosiTradingFeePending" v-bind:format="inputFormatTradeSinglePriceFixed2"></vue-number-input>
                                        <div class="bubble-box">我方{{item.PosiDirection==1?"支付":"收取"}}交易费用</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row no-gutters swaprow" v-if="trade.StructureType=='多空组合'">
                    <div class="titleDiv">
                        <div class="titleHead"></div>
                        <div class="titleLabel"><label>浮动收益端</label></div>
                    </div>
                    <div v-if="!page.swapFloatingIncomeReceiveOnlyMode" class="yc-panel" style="width:100px">
                        <table class="table table-bordered">
                            <tbody>
                                <tr class="swapflowtr">
                                    <td>收支方向</td>
                                </tr>
                                <tr class="swapflowtr">
                                    <td :class="item.PosiDirection==1?'swapget':'swappay'" v-for="item in paySwapList" style="width:116px;">
                                        <select v-model="item.PosiDirection">
                                            <option value=1>收取</option>
                                            <option value=2>支付</option>
                                        </select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <label style="margin-left: 15px; font-size: 12px; color: #878181; ">说明：多空组合浮动收益部分将通过流水的方式进行簿记</label>
                </div>
                <div class="row no-gutters swaprow">
                    <div class="titleDiv">
                        <div class="titleHead"></div>
                        <div class="titleLabel"><label>交易备注</label></div>
                    </div>
                    <div class="yc-panel" style="border:none;background-color:#f5f5f5;box-shadow:none">
                        <div style="width:80%;float:left">
                             <textarea v-model="trade.Comments" class='text-box text-left' rows='3' id='Comments'></textarea>
                        </div>
                        <div style="float:left;margin-top:10px;margin-left:36px;">
                            @if (isUseApproval)
                            {
                                <button class="btn btn-primary swapclose" type="button" v-on:click="submit('reject')">拒绝</button>
                                <button class="btn btn-primary" type="button" v-on:click="submit('pass')">审批通过</button>
                            }
                            else
                            {
                                <button class="btn btn-default swapclose" type="button" onclick="layer.closeMe();">关闭</button>
                                <button class="btn btn-primary " type="button" v-on:click="savetrade">保存</button>
                            }
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    
                </div>
            </div>
        </div>
    </form>
    <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>
    <div id="observationInfosEdit" style="display:none;">
        <div class="yc-panel" style="margin-right:1rem !important">
            <div class="row no-gutters">
                <div class="col-6 mb-2">
                    <span>起息日</span>
                    <vue-datepicker :mindate="trade.StartDate" :maxdate="trade.ExerciseDate" :holiday="1" v-model="observation.ObservationStart" style="margin-left:28px;width:100px" ref="observationStartRefs"></vue-datepicker>
                    <span v-show="observationType==0"><input type="checkbox" v-model="observation.IsDeductPrincipal">扣除本金</span>
                </div>
                <div class="col-6 mb-2">
                    <span>观察日间隔</span>
                    <input type="number" class="interval" id="ObservationNum" v-model="observation.ObservationNum" min="1" />
                    <select id="ObservationUnit" style="width: 40px;" v-model="observation.ObservationUnit">
                        <option v-for="item in page.timeUnits" :value="item.Value">{{item.Text}}</option>
                    </select>
                </div>
                <div class="col-6 mb-2" v-show="observationType==1">
                        <span>交易日历</span>
                        <select id="ObservationCalendar" style="width: 126px;margin-left:10px" v-model="observation.ObservationCalendar">
                            <option value="Chn">交易所日历</option>
                            <option value="IB">银行间日历</option>
                        </select>
                    </div>
                    <div class="col-6 mb-2" v-show="observationType==1">
                        <span>结算规则</span>
                        <select id="ObservationSettlementRules" style="width: 126px;margin-left:13px" v-model="observation.ObservationSettlementRules">
                            <option value=0>T+0</option>
                            <option value=1>T+1</option>
                            <option value=2>T+2</option>
                            <option value=3>T+3</option>
                        </select>
                    </div>
                <div class="col-6 mb-2">
                    <span>节假日调整</span>
                    <select id="ObservationHolidayType" style="width:120px" v-model="observation.ObservationHolidayType">
                        <option v-for="item in observationHolidayTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
                <div class="col-6 mb-2">
                    <span>对齐规则</span>
                    <select id="AlignEnd" style="width: 126px;margin-left:13px" v-model="observation.ObservationAlignEnd">
                        <option v-for="item in alignEndTypes" :value="item.value">{{item.text}}</option>
                    </select>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col">
                    <button class="btn btn-sm btn-outline-danger" v-on:click="GetObservationDates()">生成观察日</button>
                </div>
                <div class="col">
                    <button class="btn btn-sm btn-outline-danger" v-on:click="SetObservationDates()">编辑观察日</button>
                </div>
            </div>

            <div class="div-group">
                <div id="divItems" class="searchdiv" style="text-align: center;padding-left: 0px;padding-right: 0px;margin: 0px;">
                    <ol id="ol" style="text-align:left;">
                        <span style="min-width:100px;display: inline-block;">观察日期</span>
                        <span v-show="observationType==1" style="min-width:100px;display: inline-block;">结算日期</span>
                        <span style="min-width:120px;display: inline-block;">互换利率</span>
                        <span style="display: inline-block;"><input type="checkbox" id="checkAllclose" v-on:click="checkedAll()" :checked="observation.CheckedAll">是否结算</span>
                        <li v-for="item in observation.ObservationDataList">
                            <input type="text" class="field1" style="min-width:86px;margin-right:1rem;" v-model="item.date">
                            <input v-show="observationType==1" type="text" class="field3" style="min-width:86px;margin-right:1rem;" v-model="item.SettlementDate" readonly>
                            <template v-if="observationType==1">
                                <span style="display:inline-block;text-align:center;margin-right:2px;">{{item.floatRateCode}}</span>+
                                <input type="text" class="field4" style="width:50px;" v-model="item.val" v-on:blur="formatObservationRateInput(item)">%
                            </template>
                            <template v-else>
                                <input type="text" class="field2" style="" v-model="item.val" v-on:blur="formatObservationRateInput(item)">%
                            </template>
                            <input type="checkbox" name="checkclose" class="field5" v-model="item.itemChecked" v-on:click="checkedItem(item)" :disabled="item.disabled">
                            <a href="#" class="delete" v-on:click="deleteObItem(item)">
                                <span class="glyphicon glyphicon-remove"></span>
                            </a>
                        </li>
                    </ol>
                    <input type="button" class="btn btn-primary" v-on:click="addnewitem" value="添加">
                </div>
            </div>
            <div class="div-group" style="text-align:center;">
                <button class="btn btn-primary" v-on:click="ObservationConfirm()">确定</button>
                <button class="btn btn-primary" v-on:click="closeParentWindow()">取消</button>
            </div>
        </div>
        <div class="modal fade" id="myModal" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">详情设置</h4>
                        <button type="button" class="close" v-on:click="closeObservationModal()">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <textarea v-model="observation.ObservationInterval" style="width: 100%; min-height: 300px;" v-on:paste="pasteMe($event)"></textarea>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn" v-on:click="saveObservationModal()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>