@using EnumHelper = System.Web.Mvc.Html.EnumHelper

@model Trade_StructureOption
@{
    ViewBag.Title = "交易信息 | 编辑";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var companyName = PS.Config.CompanyShortName;
    Model.TradeAmount = 1;
    var pageObj = new
    {
        IsTradeVol = PS.Config.IsTradeVol,
        SkewMapVol = PS.Config.ErpElement.SkewMapVolConstruction,
        VolMoreAccurate = PS.Config.ErpElement.VolMoreAccurate
    };
}
@section CSS{
    <style>
        [v-cloak] {
            display: none;
        }

        .yt-input-append > a {
            color: #e33333;
        }

        .yt-table-form td, .yt-table-form th {
            text-align: left;
            vertical-align: middle;
        }

        .yt-table-form > tbody > tr td:first-child {
            padding-left: 30px;
        }

        .legend {
            text-align: center;
            text-decoration: underline;
            border-bottom: 0px !important;
        }

        .ui-datepicker-calendar tr td:first-child {
            padding-left: 0;
        }
    </style>
}
@section JS
{
    <script type="text/javascript">
        var Model = @Json.Serialize(Model);
        const pageData =@Json.Serialize(pageObj);
    </script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="@HtmlUtil.BasicDataJs("品种")"></script>
    <script src="~/Scripts/app/tradeHelper.js?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/pricing/structureoption.js?v=@(HtmlUtil.JsVersion)"></script>
}
<div id="listdiv" class="yc-panel" v-cloak>
    <h4 class="legend">{{Model.Name}} - {{Model.CnName}}</h4>
    <table class="table table-sm table-bordered yt-table-form">
        <colgroup>
            <col span="1" width="120" />
        </colgroup>
        @if (ViewBag.SimpleMode && PS.Config.Is润和)
        {
            <tr hidden>
                <td>标的类型</td>
                <td>
                    <select name="UnderlyingInstrumentType" v-model="Model.UnderlyingInstrumentType" v-on:change="changeInstrumentType">
                        @foreach (var item in ConsGlobal.InstrumentType.SelectItems())
                        {
                            <option value="@(item.Value)">@(item.Text)</option>
                        }
                    </select>
                </td>
            </tr>
            <tr hidden>
                <td>标的品种</td>
                <td>
                    <input id="VarietyId" v-model="Model.VarietyId" class="text-box" type="text" name="VarietyId">
                </td>
            </tr>
        }
        else
        {
            <tr hidden>
                <td>标的类型</td>
                <td>
                    <select name="UnderlyingInstrumentType" v-model="Model.UnderlyingInstrumentType" v-on:change="changeInstrumentType">
                        @foreach (var item in ConsGlobal.InstrumentType.SelectItems())
                        {
                            <option value="@(item.Value)">@(item.Text)</option>
                        }
                    </select>
                </td>
            </tr>
            <tr>
                <td>标的品种</td>
                <td>
                    <input id="VarietyId" v-model="Model.VarietyId" class="text-box" type="text" name="VarietyId">
                </td>
            </tr>
        }
        <tr>
            <td>标的代码</td>
            <td>
                <input id="UnderlyingCode" class="text-box" type="text" name="UnderlyingCode">
            </td>
        </tr>
        <tr>
            <td>交易方向</td>
            <td>
                <select v-model="Model.BuySell">
                    <option value="卖出">@(PS.Config.Is润和 ? "客户买入" : (companyName + "卖出"))</option>
                    <option value="买入">@(PS.Config.Is润和 ? "客户卖出" : (companyName + "买入"))</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>交易数量</td>
            <td><input class="tradenum" type="number" v-bind:disabled="IsMoneynessOption" v-model="Model.TradeAmount" v-on:blur="changeAmount" />{{Model | ShowUnit}}<span style="color:red">*</span></td>
        </tr>
        <tr>
            <td>行权方式</td>
            <td>
                <select v-model="Model.ExerciseMode">
                    @Html.Raw(GlobalData.GetOptions(ConsTrade.ExerciseType.GetSelectItems()))
                </select>
            </td>
        </tr>
        <tr v-if="Model.Name!='Straddle' && Model.Name!='Preplicating' && Model.Name!='Strangle'&& Model.Name!='Box Spread'&& Model.Name!='Risk Reversal'&& Model.Name!='Collar'&& Model.Name!='Preplicating Underlying'">
            <td>看涨看跌</td>
            <td>
                <select v-model="Model.OptionType">
                    @Html.Raw(GlobalData.GetOptions(ConsTrade.OptionType.GetSelectItems()))
                </select>
            </td>
        </tr>
        <tr>
            <td>交易日期</td>
            <td>
                <input style="width: 148px;" class="datepicker" :deadline="Model.ExerciseDate" v-model="Model.TradeDate" id="ModelTradeDate" />
            </td>
        </tr>
        <tr>
            <td>到期日期{{Model.Name == 'Calender Spread'?"1":""}}</td>
            <td>
                <input class="datepicker" :deadline="Model.MaturityDate" v-model="Model.ExerciseDate" id="ModelExerciseDate" />
                <span style="color:red">*</span>
            </td>
        </tr>
        <tr v-if="Model.Name=='Calender Spread'">
            <td>到期日期2</td>
            <td>
                <input class="datepicker" :deadline="Model.MaturityDate" v-model="Model.ExerciseDate2" id="ModelExerciseDate2" /><span style="color:red">*</span>
            </td>
        </tr>
        <tr v-if="  Model.Name == 'Collar'">
            <td>Collar类型</td>
            <td>
                <select v-model="Model.SeagullType" class="Collar">
                    @Html.Raw(GlobalData.GetOptions(StructureOption_Code.SeagullTypes))
                </select>
                <span style="color:red">*</span>
            </td>
        </tr>
        <tr>
            <td>期初标的价格</td>
            <td>
                <input type="number" class="price" v-model="Model.Price" v-on:change="changeUnderlyingPrice" max="999999" min="-999999" />
                <a href="javascript:void(0)" class="yt-input-append" v-on:click="refreshUnderlyingPrice()" title="使用系统标的价格">
                    <span class="fa fa-refresh"></span>
                </a>
            </td>
        </tr>
        <tr>
            <td>名义本金</td>
            <td> <input type="number" class="stroke" v-bind:disabled="!IsMoneynessOption" v-model="Model.StockEqvNotional" v-on:change="changeStockEqvNotional" /><span style="color:red">*</span></td>
        </tr>
        <tr v-if="Model.Name!='Butterfly' && Model.Name!='Straddle' ">
            <td>执行价格{{Model.Name == 'Calender Spread'?"":"1"}}</td>
            <td>
                <vue-number-input name="Strike1" v-model="Model.Strike" v-bind:format="inputFormatStrike"></vue-number-input>
                <span class="yt-input-append">
                    <a href="javascript:;" v-if="IsMoneynessOption" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                    <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                </span>
            </td>
        </tr>
        <tr v-if="Model.Name!='Straddle' && Model.Name!='Butterfly' && Model.Name!='Calender Spread'">
            <td>执行价格2</td>
            <td>
                <vue-number-input name="Strike2" v-model="Model.Strike2" v-on:input="setStrike('Strike2')" v-bind:format="inputFormatStrike"></vue-number-input>
                <span class="yt-input-append">
                    <a href="javascript:;" v-if="IsMoneynessOption" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                    <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                </span>
            </td>
        </tr>
        <tr v-if="Model.trades.length>=3 && Model.Name != 'Box Spread' && Model.Name!='Butterfly'">
            <td>执行价格3</td>
            <td>
                <vue-number-input name="Strike3" v-model="Model.Strike3" v-on:input="setStrike('Strike3')" v-bind:format="inputFormatStrike"></vue-number-input>
                <span class="yt-input-append">
                    <a href="javascript:;" v-if="IsMoneynessOption" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                    <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                </span>
            </td>
        </tr>
        <tr v-if="Model.trades.length>=4 && Model.Name != 'Box Spread'">
            <td>执行价格4</td>
            <td>
                <vue-number-input name="Strike4" v-model="Model.Strike4" v-bind:format="inputFormatStrike"></vue-number-input>
                <span class="yt-input-append">
                    <a href="javascript:;" v-if="IsMoneynessOption" v-on:click="showAbsStrike" title="点击后切换成绝对值执行价格" tabindex="-1">%</a>
                    <a href="javascript:;" v-else v-on:click="showPercentStrike" title="点击后切换成标的价格百分比" tabindex="-1">￥</a>
                </span>
            </td>
        </tr>

        <tr v-if="Model.Name=='Butterfly'">
            <td>执行价格间距</td>
            <td> <input type="number" class="stroke" v-model="Model.StrikeGap" /><span style="color:red">*</span></td>
        </tr>

        @if (!ViewBag.SimpleMode && PS.Config.Is润和)
        {
            <tr>
                <td>收益结算</td>
                <td>
                    <select id="SettlementType" v-model="Model.SettlementType">
                        @Html.Raw(GlobalData.GetOptions(EnumHelper.GetSelectList(typeof(SettlementTypeEnum))))
                    </select>
                </td>
            </tr>
        }

        <template v-if="showTradeMore">
            <tr>
                <td>成交波动率</td>
                <td>
                    <vue-number-input v-model="trade.TradeOpenVolatility" v-bind:format="inputFormatVolPercent"></vue-number-input>
                </td>
            </tr>
            <tr>
                <td>目标波动率</td>
                <td>
                    <vue-number-input v-model="trade.TradeCloseVolatility" v-bind:format="inputFormatVolPercent"></vue-number-input>
                </td>
            </tr>
            <tr>
                <td>平滑过渡天数</td>
                <td>
                    <input type="number" min="0" v-model="trade.NumOfSmoothingDays" />
                </td>
            </tr>
            <tr>
                <td>权利金</td>
                <td>
                    <template v-if="trade.IsUsePremiumRate">
                        <vue-number-input name="PremiumRate" v-model="trade.PremiumRate" v-bind:format="inputFormatPremiumRate"></vue-number-input>
                        <span class="yt-input-append">
                            <a href="javascript:;" title="点击后切换成绝对值权利金" v-on:click="showAbsPrice" tabindex="-1">%</a>
                        </span>
                    </template>
                    <template v-else>
                        <vue-number-input name="TradeSinglePrice" v-model="trade.TradeSinglePrice" v-bind:format="inputFormatSinglePrice"></vue-number-input>
                        <span class="yt-input-append">
                            <a href="javascript:;" title="点击后切换成标的价格百分比" v-on:click="showPercentPrice" class="yt-input-append" tabindex="-1">￥</a>
                        </span>
                    </template>
                </td>
            </tr>
        </template>
        <tr v-if="Model.Name=='Calender Spread'">
            <td colspan="2" style="padding-left: 34px; text-align: left; font-size: 12px;font-weight:bold">说明：到期日期2须早于到期日期1</td>
        </tr>
    </table>
    <div class="text-center">
        <input type="button" v-on:click="submitstructure()" value="确定" class="btn btn-primary" />
        <input type="button" onclick="layer.closeMe()" value="取消" class="btn btn-primary" />
    </div>
</div>
<div style="height:50px"></div>