@{
    ViewBag.Title = "报价预览";
    
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var valueDate = valuedateBLL.ValueDate.ToString("yyyy-MM-dd");
    var lastValueDate =YLErp.QdpModule.QdpCalendarHelper.GetNonHolidayDefore(valuedateBLL.ValueDate.Date.AddDays(-1));
}
@section CSS{

}
<style>
    #info tr:nth-child(odd) {
        background: #ecedec;
    }

        #info tr:nth-child(odd) td:nth-child(1) {
            background: #ecedec;
        }

        #info tr:nth-child(odd) td:nth-child(2) {
            background: #ecedec;
        }

    #volquotation tr:nth-child(even) {
        background: #ecedec;
    }

    #volquotation tr:nth-child(odd) td:nth-child(3) {
        background: #fff;
    }

        #volquotation tr:nth-child(odd) td:nth-child(3) td {
            background: #fff;
        }

    #volquotation tr:nth-child(even) td:nth-child(3) tr td:nth-child(3) {
        background: #ecedec;
    }
</style>
@section JS{
    <script type="text/javascript">
             var valuedate = moment('@lastValueDate').format("YYYY-MM-DD");
        $(function () {  
            $("#DateHistoryDate").val(valuedate); 
            $("#DateHistoryDate").datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                showOtherMonths: true,
                selectOtherMonths: true,
                onSelect: function (selectedDate) {//选择日期后执行的操作 
                    main.post("/quotationconfirm/getVolatilityQuotation", { date: selectedDate }).done(function (res) {
                        vue.VolatilityQuotation = JSON.parse(res.obj.underlyingjson);
                    }).fail(function () { 
                        vue.VolatilityQuotation = {};
                    });
                }
            }); 
            //初始化
            main.post("/quotationconfirm/getVolatilityQuotation", { date: valuedate }).done(function (res) {
                vue.VolatilityQuotation = JSON.parse(res.obj.underlyingjson);
            }).fail(function () {
                vue.VolatilityQuotation = {};
            });
        });
        
        var VolatilityQuotation  = @Json.Serialize(ViewBag.VolatilityQuotation);
        var quotation = {};
        function searchDate() {
            var valueDate = $("#DateHistoryDate").val();
            if (valueDate == "" || valueDate == null) {
                main.message("请选择有效日期!");
                return;
            }
            window.location.href = "/quotationconfirm/OutPutHistoryPDF/?valueDate=" + valueDate;
        } 
    </script>
    <script src="~/Scripts/app/quotation/quotationpreview.js?v=@(HtmlUtil.JsVersion)"></script>
} 
<div id="listdiv"> 
    <div style="text-align: center;margin: auto;"> 
        日期: <input id="DateHistoryDate" name="DateHistoryDate" type="text" class="datepicker" /> 
        <input value="导出波动率历史" type="button" onclick="searchDate();" style=" background: #d6312f;color: #fff;border:none;border-radius:8px;width:150px;height:28px;margin-left:15px;font-size:16px;line-height:16px;" />
    </div>
    <div id="volquotation" style="width:60%;margin:0px auto;border: none ;">
          
        <table style="width: 100%;max-width: 100%;margin: 20px;border: none ;">
            <tr><td style="border: 1px solid #416fab;height:42px;"></td><td style="border: 1px solid #416fab;"></td><td style="width: 10%;background:#15498c;color:#fff;border: 1px solid #416fab;">到期日</td><td style="background:#15498c;color:#fff;width:10%;border: 1px solid #416fab;">Bid</td><td style="background:#15498c;color:#fff;width:10%;border: 1px solid #416fab;">Ask</td><td style="border: 1px solid #416fab;"></td></tr>
            <template v-for="(vol,index) in VolatilityQuotation">
                <tr style="border: 1px solid #416fab;">
                    <td style="border: 1px solid #416fab;">{{vol.UnderlyingType}}</td>
                    <td style="border: 1px solid #416fab;">{{vol.CommodityCode}}</td>
                    <td colspan="3" style="padding:5px 0px;border: 1px solid #416fab;">
                        <table class="table2" style="background:#eeeeee;width:100%;">
                            <template v-for="(abdata,index2) in vol.BidAskMatureData">
                                <tr><td style="width:27%;">{{abdata.Expire}}</td><td style="width:28%;">{{abdata.BidVol|Fix4Number}}</td><td style="width:28%;">{{abdata.AskVol|Fix4Number}}</td></tr>
                            </template>
                        </table>
                    </td>
                    <td>{{vol.MarketName}}</td>
                </tr>
            </template>
        </table>
    </div>
</div>