@{
    ViewBag.Title = "T型报价";

    Layout = "~/Views/Shared/_MainLayout.cshtml";
    if (Context.Request.Query["display"] == "info")
    {
        Layout = "~/Views/Shared/_InfoLayout.cshtml";
    }
}
@section CSS{
    <link href="~/Style/Css/t_table.css" rel="stylesheet" />

}
@section JS
{
    <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/t_table.js?v=@(HtmlUtil.JsVersion)"></script>
}

<div id="listdiv">
    <div class="form-inline searchdiv">
        <label class="mx-2">执行价间隔</label>
        <input type="number" step="1" style="width:90px" class="btn-sm" v-model="Model.ZhiXingJianGe" min="1" max="9999999" v-on:change="changeJianGe()" id="zhixingjiange" />
        <label class="mx-2">执行价数量</label>
        <select class="" v-model="Model.ZhiXingShuLiang" v-on:change="changeZhiXingShuLiang()" id="ZhiXingShuLiang">
            <option>3</option>
            <option>5</option>
            <option>7</option>
            <option>9</option>
            <option>11</option>
            <option>13</option>
            <option>15</option>
            <option>17</option>
            <option>19</option>
        </select>
        <div class="d-inline-block ml-3 mr-3">
            <input type="button" class="btn btn-primary" value="读取波动率" v-on:click="calcTTable()" />
            <input type="button" class="btn btn-primary" title="波动率修改后计算" value="计算价格" v-on:click="calcVolTTable()" />
        </div>
        <label class="mx-2">报价形式</label>
        <select v-model="Model.SelectModel" v-on:change="handlechange" id="selected">
            <option v-for="(QM ,index) in Model.QuotationModes" :value="QM.Mode">{{QM.Mode}}</option>
        </select>
    </div>

    <div class="mt-4">
        <div class="row no-gutters">
            <div class="col-auto" style="width:450px;">
                <div class="yc-panel">
                    <table class="table table-borderless table-left">
                        <tr>
                            <td><label class="name-input">行权方式</label></td>
                            <td>
                                <select v-model="Model.ExerciseMode" id="selExerciseMode" v-on:change="checkPayOffType()">
                                    @Html.Raw(GlobalData.GetOptions(ConsTrade.ExerciseType.GetSelectItems()))
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">定价模型</label></td>
                            <td>
                                <select v-model="Model.PricingModel" class="pricing-model">
                                    <option>BSM</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">标的类型</label></td>
                            <td>
                                <select class="chosen-select" v-model="Underlying.UnderlyingInstrumentType" onchange="vue.setUnderlyingInstrumentType()" id="selUnderlyingInstrumentType">
                                    @Html.Raw(GlobalData.GetOptions(ConsGlobal.InstrumentType.SelectItems()));
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">标的品种</label></td>
                            <td>
                                <input id="VarietyId" v-model="Underlying.UnderlyingTypeId" onchange="vue.setVariety()" class="text-box" type="text" name="VarietyId">
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">标的代码</label></td>
                            <td>
                                <input id="UnderlyingCode" class="text-box" type="text" onchange="vue.changeunderlying()" name="UnderlyingCode">
                                <span style="color: red; display: inline-block;">*</span>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">标的价格</label></td>
                            <td>
                                <input id="UnderlyingPrice" class="stand-price" type="text" v-model="Underlying.Price" v-on:change="changeUnderlyingPrice()" />
                                <span style="color: red; display: inline-block;">*</span>
                                <a href="javascript:void(0)" v-on:click="getCTPdata()"><span title="刷新价格" class="glyphicon glyphicon-refresh"></span></a>
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">交易单位</label></td>
                            <td>
                                <input class="stand-price" type="text" v-model="Variety.TradeUnit" readonly />
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">报价单位</label></td>
                            <td>
                                <input class="stand-price" type="text" v-model="Variety.QuoteUnit" readonly />
                            </td>
                        </tr>
                        <tr>
                            <td><label class="name-input">期权到期日</label></td>
                            <td>
                                <input type="text" class="datepicker date-option" :deadline="Underlying.MaturityDate" v-model="Model.ExerciseDate" id="Trade_ExerciseDate" onchange="vue.exerciseDateChange()" />
                                <span style="color: red; display: inline-block;">*</span>
                            </td>
                        </tr>
                    </table>
                    <hr />
                    <div class="text-right" v-html="Model.WorkDayHTML"></div>
                </div>
            </div>
            <div class="col">
                <div class="yc-panel">
                    <table style="table-layout:fixed;margin-bottom:5px;" class="table table-bordered table-striped table-sm">
                        <tr>
                            <th :colspan="2" class="call-option" style="width:330px;" :title="Model.OtherInfo">看涨期权</th>
                            <th><span v-cloak>{{Underlying.UnderlyingCode}}</span></th>
                            <th :colspan="2" class="put-option" style="width:330px;" :title="Model.OtherInfo">看跌期权</th>
                        </tr>
                        <tr>
                            <th onmouseover="vue.showAlink(this)" onmouseout="vue.hideAlink(this)">
                                买价Bid
                                <a href="javascript:void(0)" class="ahide" v-on:click="down('CallBidVol')"><span class="glyphicon glyphicon-arrow-down" title="减少"></span></a>
                                <a href="javascript:void(0)" class="ahide" v-on:click="up('CallBidVol')"><span class="glyphicon glyphicon-arrow-up" title="增加"></span></a>
                            </th>
                            <th onmouseover="vue.showAlink(this)" onmouseout="vue.hideAlink(this)">
                                卖价Ask  <a href="javascript:void(0)" class="ahide" v-on:click="down('CallAskVol')"><span class="glyphicon glyphicon-arrow-down" title="减少"></span></a>
                                <a href="javascript:void(0)" class="ahide" v-on:click="up('CallAskVol')"><span class="glyphicon glyphicon-arrow-up" title="增加"></span></a>
                            </th>
                            <th>执行价格</th>
                            <th onmouseover="vue.showAlink(this)" onmouseout="vue.hideAlink(this)">
                                买价Bid  <a href="javascript:void(0)" class="ahide" v-on:click="down('PutBidVol')"><span class="glyphicon glyphicon-arrow-down" title="减少"></span></a>
                                <a href="javascript:void(0)" class="ahide" v-on:click="up('PutBidVol')"><span class="glyphicon glyphicon-arrow-up" title="增加"></span></a>
                            </th>
                            <th onmouseover="vue.showAlink(this)" onmouseout="vue.hideAlink(this)">
                                卖价Ask  <a href="javascript:void(0)" class="ahide" v-on:click="down('PutAskVol')"><span class="glyphicon glyphicon-arrow-down" title="减少"></span></a>
                                <a href="javascript:void(0)" class="ahide" v-on:click="up('PutAskVol')"><span class="glyphicon glyphicon-arrow-up" title="增加"></span></a>
                            </th>
                        </tr>
                        <tr v-for="(record,index) in Model.TQuoteRecords.quotaList" v-cloak>
                            <td>
                                <span class="spbuy dataone">
                                    <input type="number" step="0.01" class="volinput" v-on:blur="FormatProxyValue(event)" v-model="record.CallBidVolProxy" />%
                                </span>
                                <span class="spbuy percent volinput datatwo" style="" title="买价Bid百分比">
                                    {{record.CallBidPricePercent|percentVol}}%
                                </span>
                                @*绝对价格*@
                                <span class="spbuy volinput datathree" title="买价Bid绝对价格">
                                    {{record.CallBidPrice | FixNumber}}
                                </span>
                            </td>
                            <td>
                                @*波动率*@
                                <span class="spbuy dataone">
                                    <input type="number" step="0.01" class="volinput" v-on:blur="FormatProxyValue(event)" v-model="record.CallAskVolProxy" />%
                                </span>
                                @*百分比*@
                                <span class="spbuy percent volinput datatwo" title="卖价Ask百分比">
                                    {{ record.CallAskPricePercent|percentVol}}%
                                </span>
                                @*绝对价格*@
                                <span class="spbuy volinput datathree" title="卖价Ask绝对价格">
                                    {{record.CallAskPrice | FixNumber}}
                                </span>
                            </td>
                            <td id="LatestPrice" v-if="Model.TQuoteRecords.quotaList.length-1==(index*2)" style="color:red">
                                <span>{{record.Strike}}</span>
                            </td>
                            <td v-else>
                                <span>{{record.Strike}}</span>
                            </td>

                            <td>
                                @*波动率*@
                                <span class="spbuy dataone">
                                    <input type="number" step="0.01" class="volinput" v-on:blur="FormatProxyValue(event)" v-model="record.PutBidVolProxy" />%
                                </span>
                                @*百分比*@
                                <span class="spbuy percent volinput datatwo" title="买价Bid百分比">
                                    {{percentVol(record.PutBidPricePercent)}}%
                                </span>
                                @*绝对价格*@
                                <span class="spbuy volinput datathree" title="买价Bid绝对价格">
                                    {{record.PutBidPrice | FixNumber}}
                                </span>
                            </td>
                            <td>
                                @*波动率*@
                                <span class="spbuy dataone">
                                    <input type="number" step="0.01" class="volinput" v-on:blur="FormatProxyValue(event)" v-model="record.PutAskVolProxy" />%
                                </span>
                                @*百分比*@
                                <span class="spbuy percent volinput datatwo" title="卖价Ask百分比">
                                    {{percentVol(record.PutAskPricePercent)}}%
                                </span>
                                @*绝对价格*@
                                <span class="spbuy volinput datathree" title="卖价Ask绝对价格">
                                    {{record.PutAskPrice | FixNumber}}
                                </span>
                            </td>
                        </tr>
                    </table>
                    <p v-cloak style="text-align:right;font-size:14px;font-weight:700;margin:0;">期权到期日:&nbsp;{{Model.ExerciseDate}}</p>
                </div>
            </div>
        </div>
    </div>
</div>