@using YLErp.QdpModule.Constants
@model VolsurfaceEditModel
@{
    ViewBag.Title = "波动率曲面";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}
@section CSS{
    <link href="~/Style/Css/today_volsurface_edit.css?v=1" rel="stylesheet" />
}
@section JS
{
    <script type="text/javascript">
        var pageVue = @Json.Serialize(Model);
    </script>

    <script src="~/Statics/libs/export/excellentexport.js?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Statics/libs/echarts/echarts.min.js?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Statics/libs/echarts/echarts-gl.min.js?v=@(HtmlUtil.JsVersion)"></script>
    <script src="@HtmlUtil.BasicDataJs("品种")"></script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/volatility/volsurfaceeditV2.js?v=@HtmlUtil.JsVersion"></script>
}

<div id="listdiv" class="yc-panel">
    <div class="d-flex form-colored mb-3">
        <div style="display:none">
            <label class="ml-2">标的类型</label>
            <select v-model="Underlying.InstrumentType" v-on:change="changeInstrumentType">
                <option v-for="item in tradeHelper.InstrumentTypes" :value="item.value">{{item.text}}</option>
            </select>
        </div>
        <div>
            <label class="ml-2">标的品种</label>
            <input id="VarietyId" name="VarietyId" class="text-box" type="text">
        </div>
        <div>
            <label class="ml-2">标的代码</label>
            <input id="UnderlyingCode" name="UnderlyingCode" class="text-box" type="text">
        </div>
        <div>
            <label class="ml-2">波动率类型</label>
            <select class="chosen-select" style="width: 75px;" v-model="Model.VolType" v-on:change="changeVolType">
                @foreach (var item in ConsVolInfos.VolTypesWithOutAB)
                {
                    <option value="@(item)">@(item)</option>
                }
            </select>
        </div>
        <div>
            <label class="ml-2">维护日期</label>
            <input id="maintainDate" type="text" value="@(Model.ValueDate)" />
        </div>
        <div style="padding: 0.25rem" v-show="Underlying.MaturityDate">
            <label class="ml-2">标的到期日</label>
            <label>{{Underlying.MaturityDate}}</label>
        </div>
    </div>

    @if (PS.Config.Is宏源)
    {
        <div style="float: left;margin-right: 6px;">
            <label class="ml-2">ASK不低于</label>
            <input type="number" step="1" class="numberType" onchange="vue.changeReviewDownLimitMethod()" v-bind:disabled="!pageVue.VolCheckRight" v-model="Model.ReviewDownLimit" id="ReviewDownLimit" />
            <span class="suffix">%</span>
        </div>
        <div>
            <label class="ml-2">BID不高于</label>
            <input type="number" step="1" class="numberType" onchange="vue.changeReviewUpLimitMethod()" v-bind:disabled="!pageVue.VolCheckRight" v-model="Model.ReviewUpLimit" id="ReviewUpLimit" />
            <span class="suffix">%</span>
        </div>
    }

    <div class="mb-3 ml-2">
        <input type="button" v-bind:disabled="!SetSaveVol" class="btn btn-primary" title="导入波动率数据" value="导入" v-on:click="upLoadVolsurface" />
        <input type="button" class="btn btn-primary" value="导出" v-on:click="excelOutput('tableExcel')" style="margin:0px 5px;" />
        <input type="button" class="btn btn-primary" value="批量导出" v-on:click="downLoadVolsurface()" />
    </div>

    <div class="mb-3 ml-2">
        <input type="button" v-bind:disabled="!SetSaveVol" v-show="Model.VolType!='报价Bid' && Model.VolType!='报价Ask'" class="btn btn-primary" value="增加行权价" v-on:click="addStrike" />
        <input type="button" v-bind:disabled="!SetSaveVol" v-show="Model.VolType!='报价Bid' && Model.VolType!='报价Ask'" class="btn btn-primary" title="增加期限" value="增加期限" v-on:click="addExpire" style="margin-left:5px;" />
        <label class="" style="margin-left:30px;">插值方法</label>
        <select class="chosen-select" v-bind:disabled="Model.VolType=='报价Bid' || Model.VolType=='报价Ask'" v-model="Model.InterpolationMethod" style="margin-right:30px;" chosenwidth="250px !important">
            @Html.Raw(GlobalData.GetOptions(YLErp.QdpModule.Constants.ConsVolInfos.InterpolationMethods))
        </select>
        <input type="button" class="btn btn-primary" v-bind:disabled="!SetSaveVol" value="清除修改" v-on:click="updateVolTable" />
        <input type="button" class="btn btn-primary" v-bind:disabled="!SetSaveVol" value="保存" title="保存波动率" v-on:click="submitSurface" style="margin:0px 5px;" />
        <div class="dropdown d-inline-block">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">刷新图形</button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="javascript:;" v-on:click="refresh3DChart()">3D曲面</a>
                <a class="dropdown-item" href="javascript:;" v-on:click="refreshVolSmileChart()">微笑曲线</a>
            </div>
        </div>
    </div>

    <div class="d-flex">
        <!--期限-->
        <div style="width:250px;min-width:250px;">
            <table class="table table-bordered table-expire" id="volsurfaceFixed">
                <tr>
                    <td colspan="2" class="due-date text-center">期限\{{StrikeDesc}}</td>
                </tr>
                <template v-for="(expire,index) in expireList">
                    <tr v-if="expire.ValidState!='InValid'" v-for="(voltype,vindex) in VolTypes">
                        <template v-if="vindex==0">
                            <td v-bind:rowspan="VolTypes.length" style="width:120px;">
                                <template v-if="expire.IsNewExpire==true">
                                    <input type="text" style="width:50px" class="" v-on:blur="checkAddExpire(event)" id="newAddExpire" />
                                    <input type="hidden" v-model="expire.Expire" />
                                </template>
                                <template v-else>
                                    <input type="checkbox" class="expireCheckBox" />
                                    <span style="font-size:larger">{{expire.Expire}}</span>
                                </template>
                                <a href="javascript:void(0)" v-on:click="deleteExpire(expire)"><span class="glyphicon glyphicon-remove" title="点击删除行" style="color:#fff;"></span></a>
                                <a href="javascript:void(0)" v-on:click="upExpire(expire)"><span class="glyphicon glyphicon-arrow-up" title="增加" style="color:#fff;"></span></a>
                                <a href="javascript:void(0)" v-on:click="downExpire(expire)"><span class="glyphicon glyphicon-arrow-down" title="减少" style="color:#fff;"></span></a>
                            </td>
                        </template>
                        <td style="background:#4b545c;color:#fff;width:100px;">
                            {{voltype.VolModelName| SetVolTypeName}}
                            <span style="display:none">{{expire.Expire}}</span>
                            <a href="javascript:void(0)" v-on:click="upExpireSubLine(expire,voltype)"><span class="glyphicon glyphicon-arrow-up" title="增加" style="color:#fff;"></span></a>
                            <a href="javascript:void(0)" v-on:click="downExpireSubLine(expire,voltype)"><span class="glyphicon glyphicon-arrow-down" title="减少" style="color:#fff;"></span></a>
                        </td>
                    </tr>
                </template>
            </table>
        </div>
        <!--波动率值-->
        <div id="table-wrap-scroll" style="position:relative">
            <table class="table table-bordered table-volinput" id="volsurface">
                <tr>
                    <td v-for="(strike,index) in orderStrikes" v-if="strike.ValidState!='InValid'" style="width:100px;" class="text-center">
                        <template v-if="strike.IsNewStrike==true">
                            <input type="number" style="width:90px" step="0.01" class="btn-sm" v-on:blur="checkAddStrike()" id="newAddStrike" />
                            <input type="hidden" v-model="strike.Strike" />
                        </template>
                        <template v-else>
                            <span v-if="Model.VolSurfaceMode=='MoneynessVol'">{{strike.Strike | toPercent}}</span>
                            <span v-else>{{strike.Strike | FixNumber}}</span>
                        </template>
                        <a href="javascript:void(0)" v-show="Model.VolType!='报价Bid' && Model.VolType!='报价Ask'" v-on:click="deleteStrike(strike)"><span class="glyphicon glyphicon-remove" title="点击删除列"></span></a>
                    </td>
                </tr>
                <template v-for="(expire,index) in expireList">
                    <tr v-if="expire.ValidState!='InValid'" v-for="(voltype,vindex) in VolTypes">
                        <template v-for="(strike,strikeIndex) in orderStrikes">
                            <template v-if="strike.ValidState!='InValid'">
                                <td><input class="volInput" type="number" max="100" step="0.1" :voltype="voltype.VolModelName" :Expire="expire.Expire" :Strike="strike.Strike" v-on:blur="checkvols(event)" v-model="getVol(expire,strike,voltype).PercentVol">%</td>
                            </template>
                        </template>
                    </tr>
                </template>
            </table>
        </div>
    </div>

    <!---历史波动率-->
    <div class="mb-3">
        <div>
            <label class="ml-2">历史波动率天数</label>
            <select class="chosen-select" id="lookbackDays">
                <option value="30" selected>30天</option>
                <option value="60">60天</option>
                <option value="90">90天</option>
            </select>
            <input type="button" class="btn btn-primary" value="刷新历史波动率" title="刷新历史波动率" v-on:click="historicalVolCurve()" style="margin:0px 5px;" />
        </div>
        <div id="historicalVolCurveChart" style="height:400px;width:700px;"></div>
    </div>

    <div class="form-group form-group-lg">
        <div style="display:none;float:left;margin-right:80px;">
            <label class="col-sm-2 control-label formGroupInputLarge">欧式期权行权日</label>
            <div class="col-sm-4">
                <input type="text" class="text datepicker" id="TempExerciseDate" v-model="Underlying.ExerciseDate" />
            </div>
        </div>
        <div style="display:none;float:left;margin-right:80px;">
            <label class="col-sm-2 control-label">标的价格</label>
            <div class="col-sm-4" style="min-width:210px;">
                <input type="number" class="number" v-model="Underlying.Price" />
                <a href="javascript:void(0)" v-on:click="getUnderlyingPrice"><span title="刷新价格" class="glyphicon glyphicon-refresh"></span></a>
            </div>
        </div>
    </div>

    <!--导出用-->
    <a onfocus="this.blur();" style="display:none;" download="code.xls" id="exceloutput" class="ipt-todo hide">code</a>
    <div class="sr-only" :update="updateKey.volstate">
        <div :id="'table'+v.VolModelName" v-for="(v,i) in VolTypes">
            <table>
                <tr>
                    <th>{{Underlying.Code}}</th>
                    <th v-if="!s.IsNewStrike" v-for="(s,index) in  orderStrikes">
                        <template v-if="Model.VolSurfaceMode=='MoneynessVol'">
                            {{s.Strike | toPercent}}
                        </template>
                        <template v-else>
                            {{s.Strike | FixNumber}}
                        </template>
                    </th>
                </tr>
                <tr v-if="!e.IsNewExpire" v-for="(e ,i) in expireList">
                    <th>{{e.Expire}}</th>
                    <th v-if="!s.IsNewStrike" v-for="(s,ii) in  orderStrikes">{{getVol(e, s, v).Vol}}</th>
                </tr>
            </table>
        </div>
        <div id="exceloutputWrap" v-once></div>
    </div>
</div>

<div id="volSurfaceChart" style="width: 500px; height: 500px;padding:50px; display: none;"></div>