@model BasicViewModel
@{
    ViewBag.Title = "波动率曲面";
    ViewBag.Menu = "报价管理-波动率曲面";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
    var pageObj = new
    {
        valueDate = valuedateBLL.ValueDate.ToString("yyyy-MM-dd"),
        varieties = JsDataModel.GetVarieties(CurUser,true),
        volMoreAccurate = YLErp.PS.Config.ErpElement.VolMoreAccurate
    };
}

@section CSS{
    <style>
        .yt-input-block { display: inline-block; line-height: 29px; margin-right: 10px; }
        .yt-input-block > label { margin-right: 3px; }
        .yt-input-file { display: none; height: auto !important; }
        .uploadButton { vertical-align: middle; border: 1px solid darkgray; display: inline-block; line-height: 27px; padding: 0 3px; min-width: 90px; background-color: azure; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
        .volInput { width: 77px; height: 24px; }
        .formdata { height: 24px; padding: 0 10px 0 0; min-width: 90px; display: inline; }
        #volsurface tr td:first-child { background: #09bbbd; color: #fff; white-space: nowrap; }
        #volsurface tr td:not(:first-child):nth-child(even) a span { color: #09bbbd; }
        #ui-datepicker-div { z-index: 112 !important; }
    </style>
}
@section JS
{
    <script type="text/javascript">
        const pageObj = @Json.Serialize(pageObj);
    </script>
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Statics/libs/export/excellentexport.js?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/volatility/skewMap.js?v=@(HtmlUtil.JsVersion)"></script>
}

<!--全局SkewMap-->
<div class="yc-panel">
    <h4>全局SkewMap</h4>
    <hr />
    <div class="row">
        <div class="col p-2">
            <div class="yt-input-block">
                <label>SkewMap模式</label>
                <select id="skewMapType" class="formdata">
                    <option value="Bid">Bid</option>
                    <option value="Ask">Ask</option>
                </select>
            </div>
            <div class="yt-input-block">
                <label>SkewMap文件:</label>
                <input type="file" id="uploadSkewMapCtrl" class="yt-input-file" accept=".csv">
                <div class="uploadButton">请选择...</div>
            </div>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" type="button" onclick="globalHandler.upload();">导入</button>
            <button class="btn btn-primary" type="button" onclick="globalHandler.download();">导出</button>
        </div>
    </div>

    <form id="formGlobal" action="/skewMap/DownLoadSkewMap" method="post" target="_blank">
        <input type="hidden" name="type" id="hide_skewMapType" />
    </form>
</div>

<!--光证波动率-->
<div class="yc-panel">
    <h4>光证波动率</h4>
    <hr />
    <div class="row">
        <div class="col">
            <div class="yt-input-block">
                <label>标的品种</label>
                <div class="formdata">
                    <input type="text" id="varietyId_gz" />
                </div>
            </div>
            <div class="yt-input-block">
                <label>维护日期</label>
                <div class="formdata">
                    <input type="text" id="maintainDate_gz" />
                </div>
            </div>

            <div class="yt-input-block">
                <label>光证波动率</label>
                <div class="formdata">
                    <input class="volInput" type="text" id="varietyVol_gz" />
                </div>
            </div>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" id="btnSaveGzVol" type="button" onclick="gzVolHandler.saveVol();">保存</button>
        </div>
    </div>
</div>

<!--标的BaseVol-->
<div id="baseVolRange" class="yc-panel">
    <h4>标的BaseVol</h4>
    <hr />
    <div class="row">
        <div class="col">
            <div class="yt-input-block">
                <label>BaseVol文件:</label>
                <input type="file" id="uploadBaseVolCtrl" class="yt-input-file" accept=".xlsx">
                <div class="uploadButton">请选择...</div>
            </div>
        </div>
        <div class="col-auto">
            <button class="btn btn-primary" type="button" onclick="baseVolHandler.upload();">导入</button>
            <button class="btn btn-primary" type="button" onclick="baseVolHandler.download(false);">导出</button>
            <button class="btn btn-primary" type="button" onclick="baseVolHandler.download(true);">批量导出</button>
        </div>

        <form id="formBaseVol" action="/skewMap/DownLoadBaseVol" method="post" target="_blank">
            <input type="hidden" name="valueDate" id="hide_base_valueDate" />
            <input type="hidden" name="underlyingCode" id="hide_base_underlyingCode" />
        </form>
    </div>

    <hr />

    <div id="listdiv">
        <div>
            @*<div class="yt-input-block">
                    <label>标的类型</label>
                    <div class="formdata">
                        <select class="form-control" id="selUnderlyingInstrumentType"></select>
                    </div>
                </div>
                <div class="yt-input-block">
                    <label>标的品种</label>
                    <div class="formdata">
                        <select class="form-control" id="varietyId"></select>
                    </div>
                </div>*@

            <div class="yt-input-block">
                <label>标的代码</label>
                <div class="formdata">
                    <input type="text" id="selUnderlying" />
                </div>
            </div>

            <div class="yt-input-block">
                <label>维护日期</label>
                <div class="formdata" id="divQuotationDate">
                    <input type="text" id="maintainDate" />
                </div>
            </div>
        </div>

        <div class="mt-3">
            <button class="btn btn-primary" type="button" onclick="baseVolHandler.addExpire();">增加期限</button>
            <button class="btn btn-primary" type="button" onclick="baseVolHandler.clearChange();">清除修改</button>
            <button class="btn btn-primary" type="button" onclick="baseVolHandler.saveBaseVol();" id="btnSaveBaseVol">保存</button>
        </div>

        <div class="mt-3" id="baseVolWrap">

            <table class="table table-bordered table-sm table-striped" id="volsurface" style="width:auto;">
                <tbody>
                    <template v-for="(expire,index) in expireList">
                        <tr v-if="index == 0">
                            <td style="width:100px;" class="due-date">期限</td>
                            <template v-for="(vol,i) in expire.Vols">
                                <td style="width:100px;">
                                    <template>
                                        <span>{{vol.StrikeProxy}}%</span>
                                    </template>
                                </td>
                            </template>
                        </tr>
                        <tr>
                            <template v-for="(vol,i) in expire.Vols">
                                <template v-if="i==0">
                                    <td style="width:120px;">
                                        <template v-if="expire.IsNewExpire==true ">
                                            <input type="text" style="width:90px" class="" v-model="expire.Expire" v-on:blur="checkAddExpire(event)" id="newAddExpire" />
                                            <input type="hidden" />
                                        </template>
                                        <template v-else>
                                            <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="点击删除行"></span></a>
                                    </td>
                                </template>
                                <td>
                                    <div class="input-group">
                                        <input class="volInput form-control" type="number" max="100" step="0.1" :Expire="expire.Expire" :Strike="vol.Strike" v-on:change="checkvols(event)" v-model="vol.VolProxy">
                                        <span class="input-group-append" style="padding:0 4px;line-height:30px;">%</span>
                                    </div>
                                </td>
                            </template>
                        </tr>
                    </template>
                </tbody>
            </table>

            <div class="mt-3">
                <label class="mr-1">BidVar</label>
                <div class="formdata">
                    <input class="volInput" type="number" max="100" step="1" Expire="BidVar" v-on:blur="checkVar(event)" v-model="BidVar">
                </div>
                <label class="ml-2 mr-1">AskVar</label>
                <div class="formdata">
                    <input class="volInput" type="number" max="100" step="1" Expire="AskVar" v-on:blur="checkVar(event)" v-model="AskVar">
                </div>
            </div>
        </div>

    </div>
</div>