@{
    ViewBag.Title = "客户盈亏试算";
    ViewBag.Menu = "风险管理-客户盈亏试算";

    Layout = "~/Views/Shared/_MainLayout.cshtml";
    var pageObj = new
    {
        isTradeVol = PS.Config.IsTradeVol,
        isPvRounded = PS.Config.IsPVRounded,
        g_volMoreAccurate = YLErp.PS.Config.ErpElement.VolMoreAccurate,
        calcDate = valuedateBLL.ValueDate.ToString("yyyy-MM-dd"),
        valueDate = ViewBag.ValueDate?.ToString(),
        configcolumn = configcolumn_data.客户盈亏持仓明细,
        ParentFlag = ViewBag.ParentFlag,
        IsUseDisplayNotional = PS.Config.IsUseDisplayNotional
    };
}
@section CSS{
<style>
    #ValueDate {
        width: 152px !important;
        font-size: 1rem !important;
    }

    .searchArea {
        padding-left: 73px;
    }

        .searchArea .btn-primary {
            margin-left: 300px;
        }

    .btn-back {
        min-width: 70px;
        background: #7f7f7f !important;
        border-radius: 5px !important;
        border-color: #7f7f7f !important;
        padding: 4px 12px;
        outline: none !important;
        color: #fff !important;
        margin: 0 5px 1px 0;
    }

        .btn-back:hover {
            background: #7f7f7f !important;
            border-color: #7f7f7f;
        }

    .btn-price-calc-close {
        position: absolute;
        right: 3px;
        top: 3px;
        height: auto;
        width: 14px;
    }

    .modal {
        margin-top: 12%;
    }

        .modal .modal-header {
            background-color: #555555;
            color: white;
            padding: 8px;
        }

        .modal .modal-footer {
            text-align: center;
            display: block;
        }

    .calcBG {
        background-color: #FEF0DF !important;
    }
</style>
}
@section JS{
<script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
<script type="text/javascript">
    var page = @Json.Serialize(pageObj);
</script>
<script src="~/Scripts/app/risk/CalcWinLossCalc.js?v=@HtmlUtil.JsVersion"></script>
}

<div class="searchdiv">
    <div>
        <span>试算目标：</span>
        @Html.MyAceDropdownInput("ClientId", "客户名称", ClientDataModel.GetAllClient(), false, true, null, false)
        @Html.ShortInput("ValueDate", "估值日期:")
        @Html.MyAceDropdownInput2("ParentFlag", "包含子客户", GlobalData.GetBoolList(false), false)
    </div>
    <div>
        <span>筛选条件：</span>
        @Html.ShortInput("TradeNumber", "交易编号")
        @Html.MyAceDropdownInput("AssetId", "簿记账户", AssetunitController.GetClientassetunit())
        @Html.MyAceDropdownInput("GroupId", "簿记账户组", AssetUnitModel.GetAllAssetUnitGroupItem(), false)
        @{
            var types = ConsTrade.OptionTradeTypes.Concat(new[] { "黑箱结构", "远期" }).ToList();
        }
        @Html.MyAceDropdownInput("TradeTypes", "结构类型", GlobalData.GetSelectItems(types))
    </div>
    <div class="searchArea">
        <div class="search-group">
            <span class="search-label">标的代码</span>
            <select class="" data-placeholder="请选择 标的代码" id="UnderlyingId" name="UnderlyingId" multiple></select>
        </div>
        @Html.SearchDateRange("TradeDate", "交易日期")
        @Html.SearchDateRange("ExerciseDate", "到期日期")
        @MyControls.SearchBtn()
    </div>
</div>

<div class="searchdiv">
    <span>试算结果：</span>
    <div class="search-group">
        <strong class="search-label" for="PvSum">持仓市值</strong>
        <input class="search-input" id="PvSum" name="PvSum" type="text" style="background-color: white; border: none; font-weight: bold;" disabled>
    </div>
    <div class="search-group">
        <strong class="search-label" for="PnlSum">持仓盈亏</strong>
        <input class="search-input" id="PnlSum" name="PnlSum" type="text" style="background-color: white; border: none;  font-weight: bold;" disabled>
    </div>
    <div style="float: right;">
        <button class="btn btn-primary " onclick="batchSetVols();return false;" type="button">批量波动率调整</button>
        <button class="btn btn-primary " onclick="batchSetPrices();return false;" type="button">批量价格调整</button>
        <button class="btn btn-back" onclick="backAll();return false;" type="button">一键重置</button>
    </div>
</div>

<div class="tabbable">
    <ul id="myTab" class="nav nav-tabs nav-main">
        <li class="nav-item">
            <a class="nav-link active" href="#" id="positionTab">持仓明细</a>
        </li>
        @*        <li class="nav-item">
            <a class="nav-link" onclick='locationChange("/risk/ClientWinLossCalcSwap")' id="positionSwapTab">互换持仓明细</a>
            </li>*@
        <div style="width:30px;display:inline;margin-left: 20px;" onclick="showChiCang();return false;">
            <img src="~/Images/configure.png" />
        </div>
    </ul>
</div>

<fieldset id="fieldsetgbox_listGrid" style="margin-bottom: 20px;">
    @Html.Raw(JqGridSimple.OutTable())
</fieldset>

<!--标的价格(正常)-->
<script type="text/html" id="priceNormal">
    <a href="javascript:;" style="display:block;color:inherit" ondblclick="event.stopPropagation();" onclick="showPriceCalcInput('${TradeId}')">
        <strong>${formatVal}</strong>
    </a>
</script>

<!--标的价格(试算)-->
<script type="text/html" id="priceCalc">
    <label style="display:block;position:relative;" onclick="event.stopPropagation();" ondblclick="event.stopPropagation();" title=" ">
        <input type="text"  id="priceInput${TradeId}" onkeydown="if(event.keyCode===13)this.blur();" step="0.1" min="0" onblur="execPriceCalc('${TradeId}', this)" style="width:100%;height:21px;padding-right:16px;" value="${formatVal}" data-originalprice="${price}" />
        <button type="button" onclick="removePriceCalc('${TradeId}', ${price})" class="close btn-price-calc-close"><span>&times;</span></button>
    </label>
</script>

<!--持仓波动率(正常)-->
<script type="text/html" id="volNormal">
    <a href="javascript:;" style="display:block;color:inherit" ondblclick="event.stopPropagation();" onclick="showVolCalcInput('${TradeId}')">
        <strong>${formatVal}</strong>
    </a>
</script>

<!--持仓波动率(试算)-->
<script type="text/html" id="volCalc">
    <label style="display:block;position:relative;" onclick="event.stopPropagation();" ondblclick="event.stopPropagation();" title=" ">
        <input type="text" id="volInput${TradeId}" onkeyup="this.value = this.value.replace('%','') + '%'; this.selectionStart = this.value.length - 1; this.selectionEnd = this.value.length - 1;" onkeydown="if(event.keyCode===13)this.blur();" step="0.1" min="0" onblur="execVolCalc('${TradeId}', this)" style="width:100%;height:21px;padding-right:16px;" value="${formatVal}" data-originalvol="${vol}" />
        <button type="button" onclick="removeVolCalc('${TradeId}', ${vol})" class="close btn-price-calc-close"><span>&times;</span></button>
    </label>
</script>

<div class="modal fade" id="volModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">批量波动率调整</h4>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <h5 style="margin-bottom: 10px">已选择{{count}}条</h5>
                <div class="form-group">
                    <label class="formlabel">持仓波动率</label>
                    <vue-number-input v-model="vol" v-bind:format="inputFormatPercent"></vue-number-input>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" v-on:click="saveModal()">保存</button>
                <button type="button" class="btn btn-primary" style="margin-left: 10px" v-on:click="closeModal()">取消</button>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="priceModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">批量价格调整</h4>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <h5 style="margin-bottom: 10px">已选择{{count}}条</h5>
                <template v-for="(item,index) in pricesDic">
                    <div class="form-group">
                        <label class="formlabel">{{item.key}}</label>
                        <vue-number-input v-model="item.value" v-bind:format="inputFormatNegative"></vue-number-input>
                    </div>
                </template>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" v-on:click="saveModal()">保存</button>
                <button type="button" class="btn btn-primary" style="margin-left: 10px" v-on:click="closeModal()">取消</button>
            </div>

        </div>
    </div>
</div>