@model ScenarioModel
@{
    ViewBag.Title = "情景分析计算";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var pageObj = new
    {
        UnderlyingPrices = ConsTrade.PriceRate,
        Volatilities = ConsTrade.VolRate,
        ScenConfigs = Model.ScenConfigs,
        SearchModel = Model.SearchModel,
        ValueDate = valuedateBLL.ValueDate.OtcFormatDate(),
        Scenaroid = Context.Request.Query["scenaroid"].ToString(),
        SysRiskFreeRate = valuedateBLL.SysRiskFreeRate()
    };
    var Norms = new string[] { "Pv", "Delta", "Gamma", "Theta", "Vega", "PnL", "PnLPercent", "DeltaChg", "DeltaInLots", "DeltaCash", "GammaCash" };
    var VolTypes = new List<string> { "对冲", "持仓" };
    VolTypes.AddRange(YLErp.QdpModule.Constants.ConsVolInfos.VolTypes);
}
@section CSS{
    <link href="~/Statics/libs/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <style>
        .table td, .table th {
            padding: 0.25rem;
        }

        .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
            border: 1px solid #313131 !important;
        }

        .table-result > thead > tr > th {
            background: #3f484d;
            color: #fff;
        }

        .table-result > tbody {
            background: #fff;
        }

        .table-result .tdstrip {
            background: #C6E2FF;
        }

        .table-result > tbody td:first-child {
            vertical-align: middle;
        }

        .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
            width: 150px;
        }

        .tree-diy-field {
            width: 50px;
            color: #0d6efd !important;
            text-decoration: underline !important;
        }

            .tree-diy-field.UnderlyingPrice {
                margin-left: 0.9rem !important;
            }

        .tree-diy-changed {
            background: #ffe699 !important;
        }

        .chart-action {
            transition: background .25s,border-color .25s;
            background: rgba(40,44,52,.05);
            border: 1px solid transparent;
            border-radius: 6px;
            color: #1695F0;
            text-decoration: none !important;
            display: inline-block;
            font-size: .8rem;
            padding: 8px 16px;
            margin: 0 8px 8px 0;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

            .chart-action:hover, .chart-action.active {
                background: rgba(48,128,208,.15);
                border-color: rgba(48,128,208,.2);
                color: #3080d0;
            }
    </style>
}
@section JS
{
    <script>
        const pageData = @Json.Serialize(pageObj);
    </script>
    <script src="~/Statics/libs/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script src="~/Statics/libs/export/excellentexport.js"></script>
    <script src="~/Statics/libs/chart/chart.min.js"></script>
    <script src="~/Scripts/app/scenario/scenarioCalc.js?v=@(HtmlUtil.JsVersion)"></script>
}

<div class="searchdiv" id="searchdiv">
    <div class="d-flex">
        <div class="mr-2">
            <label>情景配置</label>
            <select v-model="ConfigId" v-on:change="scenChange" class="selectpicker">
                <option v-for="(item,index) in pageData.ScenConfigs" v-bind:value="item.id">{{item.ConfigName}}</option>
            </select>
        </div>
        <div class="mr-2">
            <label>分析指标</label>
            <select v-model="Norms" name="Norms" multiple class="selectpicker">
                @foreach (var norm in Norms)
                {
                    <option value="@(norm)">@norm</option>
                }
            </select>
        </div>
        <div class="mr-2">
            <label>波动率</label>
            <select class="selectpicker" v-model="VolType" name="VolType" v-on:change="changeVolType">
                @foreach (var voltype in VolTypes)
                {
                    <option value="@(voltype)">@voltype</option>
                }
            </select>
        </div>
        <div class="mr-2">
            <label>无风险利率</label>
            <vue-number-input name="RiskFreeRate" v-model="RiskFreeRate" v-bind:format="RiskFreeRateFormat"></vue-number-input>
        </div>
        <div class="mr-2">
            <label>估值日期</label>
            <input name="ValueDate" type="date" v-model="ValueDate" />
        </div>
        <div class="mr-2">
            <button type="button" class="btn btn-primary ml-3" v-on:click="calculate">计算</button>
        </div>
    </div>
    <div class="mt-3">
        <label><input type="checkbox" name="UseTradeDivendRate" v-model="UseTradeDivendRate" v-on:change="changeUseTradeDivendRate" />&nbsp;使用交易分红率</label>
        @if (PS.Config.Company == CompanyEnum.宏源)
        {
            <label style="margin-left:5px"><input type="checkbox" name="IsFullyHedged" v-model="IsFullyHedged" v-on:change="changeIsFullyHedged" />&nbsp;完全对冲假设</label>
        }
    </div>
</div>

<div id="listdiv" class="row no-gutters mr-3">

    <div class="col-auto mr-3" style="width:300px;">
        <div class="yc-panel mt-0 mr-0" style="min-height:300px;">
            <ul id="underlyingTree" class="ztree"></ul>
        </div>
    </div>

    <div class="col" id="resultdiv">

        <table id="excelTable" class="table table-bordered table-result">
            <thead>
                <tr>
                    <th style="width:130px">{{yType}}\{{xType}}</th>
                    <th style="width:100px">分析指标</th>
                    <th v-for="item in xRates">
                        <a href="javascript:;" v-on:click="showChartX" style="color:#fff;">{{item}}</a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in resultRows">
                    <td v-if="item.rowspan" v-bind:rowspan="item.rowspan">
                        <a href="javascript:;" v-on:click="showChartY">{{item.yRate}}</a>
                    </td>
                    <td style="background:#6F9EBA">{{item.norm}}</td>
                    <td v-for="v in item.values" v-bind:class="item.tdStyle">{{v}}</td>
                </tr>
            </tbody>
        </table>

        <div style="text-align: center; margin-top: 20px;">
            <a onfocus="this.blur();" style="display:none;" download="code.xls" id="export_excel_byUnderlying" class="hide">code</a>
            <a onfocus="this.blur();" style="display:none;" download="code.xls" id="export_excel_byVariety" class="hide">code</a>
            <a onfocus="this.blur();" style="display:none;" download="code.xls" id="export_excel_byUnderlyings" class="hide">code</a>
            <input value="汇总导出Excel" type="button" class="btn btn-primary" v-on:click="exportByUnderlying" />
            <input value="按标的导出Excel" type="button" class="btn btn-primary" v-on:click="exportByUnderlyings" />
            <input value="按品种导出Excel" type="button" class="btn btn-primary" v-on:click="exportByVariety" />
        </div>

        <table id="excelTable2" style="display:none">
            <template v-for="vResult in vResults">
                <tr>
                    <td><strong>{{vResult.VarietyCode}}</strong></td>
                </tr>
                <tr>
                    <th style="width:130px">{{yType}}\{{xType}}</th>
                    <th style="width:100px">分析指标</th>
                    <th v-for="item in xRates">{{item}}</th>
                </tr>
                <tr v-for="item in vResult.rows">
                    <td v-if="item.yRate" v-bind:rowspan="item.rowspan">{{item.yRate}}</td>
                    <td style="background:#6F9EBA">{{item.norm}}</td>
                    <td v-for="v in item.values" v-bind:class="item.tdStyle">{{v}}</td>
                </tr>
            </template>
        </table>
        <table id="excelTable3" style="display:none">
            <template v-for="vUnderlyingResult in vUnderlyingResults">
                <tr>
                    <td><strong>{{vUnderlyingResult.UnderlyingCode}}</strong></td>
                </tr>
                <tr>
                    <th style="width:130px">{{yType}}\{{xType}}</th>
                    <th style="width:100px">分析指标</th>
                    <th v-for="item in xRates">{{item}}</th>
                </tr>
                <tr v-for="item in vUnderlyingResult.rows">
                    <td v-if="item.yRate" v-bind:rowspan="item.rowspan">{{item.yRate}}</td>
                    <td style="background:#6F9EBA">{{item.norm}}</td>
                    <td v-for="v in item.values" v-bind:class="item.tdStyle">{{v}}</td>
                </tr>
            </template>
        </table>
    </div>
</div>

<div id="myChartDiv" style="display:none;padding:0 0 10px 10px;">
    <canvas id="myChart" width="800" height="550"></canvas>
    <div class="chart-actions mt-4 text-center"></div>
</div>

<table id="excelTable_export" style="display:none"></table>

<script type="text/html" id="exportHeaderTpl">
    <table>
        <tr>
            <th>分析指标:</th>
            <td><%= _.join(Norms,',')  %></td>
            <th>无风险利率:</th>
            <td><%= RiskFreeRate %></td>
            <th>估值日期:</th>
            <td><%= ValueDate %></td>
        </tr>
        <% _.forEach(Underlyings,function(x){ %>
        <tr>
            <th>标的:</th>
            <td><%= x.UnderlyingCode %></td>
            <th>价格:</th>
            <td><%= x.UnderlyingPrice %></td>
            <th>分红率:</th>
            <td><%= x.DividenRate %></td>
            <th>波动率:</th>
            <td><%= x.ConstVol %></td>
        </tr>
        <% }) %>
        <tr></tr>
    </table>
</script>

<script type="text/html" id="underlyingPopEditTpl">
    <div style="width:180px" class="underlying-pop" id="underlyingPop">
        <input type="hidden" id="underlying_tid" />
        <div class="input-group">
            <input type="text" class="form-control" id="underlying_edit" />
            <div class="input-group-append">
                <a href="javascript:;" class="p-2" onclick="pageMgr.underlying_updatePopEdit()"><span class="fa fa-check text-success"></span></a>
                <a href="javascript:;" class="pt-2 pr-2" onclick="pageMgr.underlying_closePopEdit()"><span class="fa fa-close text-secondary"></span></a>
            </div>
        </div>
    </div>
</script>