@model TradeViewModel

@{
    ViewBag.Title = "分组了结";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var pageObj = new
    {
        valueDate = valuedateBLL.ValueDate.ToString("yyyy-MM-dd"),
        tradeCash = new trade_cash(),
        trade = new trade(),
        reCheck = ViewBag.reCheck,
        UnwindAmountAngle = valuedateBLL.SystemDate.UnwindAmountAngle,
    };
}
@section CSS{
    <style>
        .modal-dialog {
            max-width: 1220px;
            height: 752px;
            display: block;
            margin: .5rem;
        }

        .modal {
            height: 752px;
            display: block;
        }

        .form-group {
            float: left;
        }

        thead tr>th{
            position: sticky;
            top: 0;
            z-index: 2;
            border-top-width:0px!important;
        }

    </style>
}

    @section JS{
    <script type="text/javascript">
        var page = @Json.Serialize(pageObj);
    </script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/fast/fastVue.components.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/tradeHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/trade/tradesettle.js?v=@(HtmlUtil.JsVersion)"></script>
}


    <div class="modal" tabindex="-1" id="modalGroupTradeCashSave" data-backdrop="static" style="height:846px;">
        <div class="modal-dialog">
            <div class="modal-content" style="width:100%;max-height:100%;">
                <div class="modal-body">
                    <form class="mx-auto form-layout form-layout-save p-0 m-0 border-0" style="width:100%;border-radius:0;box-shadow:none">
                        <div style="margin: unset;">
                            <div class="form-group col-6" v-if="reCheck==0">
                                <label class="formlabel">了结类型</label>
                                <select class="form-input" v-model="tradeCash.Action" v-on:change="changeAction()">
                                    <option value="全部平仓">全部平仓</option>
                                    <option value="部分平仓">部分平仓</option>
                                    <option value="全部提前行权">全部提前行权</option>
                                    <option value="部分提前行权">部分提前行权</option>
                                    <option value="到期行权">到期行权</option>
                                    <option value="到期">到期</option>
                                </select>
                            </div>
                            <div class="form-group col-6">
                                <label class="form-label">标的代码</label>
                                <input type="text" class="form-input" v-model="trade.UnderlyingCode" disabled />
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">标的价格</label>
                                <vue-number-input class="form-input" v-model="tradeCash.FinalPrice" v-bind:format="{ precision: otcformat.trading.umprice.precision,negative: true, append: '' }" :disabled="reCheck>0"></vue-number-input>
                                <a href="javascript:void(0)" v-on:click="refreshUnderlyingPrice()" v-if="reCheck==0">
                                    <span title="使用系统标的价格" class="glyphicon glyphicon-refresh"></span>
                                </a>
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">执行价格</label>
                                <vue-number-input class="form-input" v-model="trade.Strike" disabled v-bind:format="inputFormatStrike"></vue-number-input>
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">开仓数量</label>
                                <vue-number-input class="form-input" v-model="trade.TradeOriginalAmount" disabled v-bind:format="inputFormatTradeAmount"></vue-number-input>
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">开仓名义本金</label>
                                <vue-number-input class="form-input" v-model="trade.OriginalStockEqvNotional" disabled v-bind:format="inputFormatEqvNotional"></vue-number-input>
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">持仓数量</label>
                                <vue-number-input class="form-input" v-model="tradeCash.TradeAmount" disabled v-bind:format="inputFormatTradeAmount"></vue-number-input>
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">持仓名义本金</label>
                                <vue-number-input class="form-input" v-model="trade.StockEqvNotional" disabled v-bind:format="inputFormatEqvNotional"></vue-number-input>
                            </div>
                            <div class="form-group col-6">
                                <label class="formlabel">了结日期</label>
                                <vue-datepicker class="text-box form-input" id="unwindDate" v-model="tradeCash.ValueDate" :disabled="reCheck>0" />
                            </div>
                            <div v-if="childTradeCashs.length>0">
                                <div class="form-group col-6">
                                    <label class="formlabel">了结方式</label>
                                    <select class="form-input" v-model="trade.IsUsePremiumRate" v-on:change="changeIsUsePremiumRate" :disabled="reCheck>0">
                                        <option :value="false">数量平仓</option>
                                        <option :value="true">名义本金平仓</option>
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <label class="formlabel">了结总额</label>
                                    <vue-number-input class="form-input" v-model="tradeCash.Amount" v-bind:format="inputFormatTradeAmount" v-on:input="changeAmount" :disabled="reCheck>1"></vue-number-input>
                                </div>
                            </div>
                            <div v-if="trade.IsUsePremiumRate=='true'||trade.IsUsePremiumRate==true">
                                <div class="form-group col-md-6" v-if="!tradeCash.IsUnwindStockEqvNotional">
                                    <label class="formlabel">平仓比例</label>
                                    <vue-number-input class="text-box" v-model="tradeCash.UnwindPercentRate" v-on:input="changeUnwindPercentRate" v-bind:format="inputFormatPremiumRate" v-bind:disabled="unwindStockEqvActionDisabled ||reCheck>0"></vue-number-input><span v-on:click="exchangeToUnwindStockEqvNotional">%</span>
                                </div>
                                <div class="form-group col-md-6" v-if="tradeCash.IsUnwindStockEqvNotional">
                                    <label class="formlabel">平仓名义本金</label>
                                    <vue-number-input class="form-input" v-model="tradeCash.UnwindStockEqvNotional" v-on:input="changeUnwindStockEqvNotional" v-bind:format="inputFormatEqvNotional" v-bind:disabled="unwindStockEqvActionDisabled ||reCheck>0"></vue-number-input><span v-on:click="exchangeToUnwindPercentRate">￥</span>
                                </div>
                            </div>
                            <div v-else>
                                <div class="form-group col-6">
                                    <label class="formlabel">了结数量</label>
                                    <vue-number-input class="form-input" v-model="tradeCash.UnwindTradeAmount" v-on:input="changeUnwindTradeAmount" v-bind:format="inputFormatTradeAmountV" v-bind:disabled="unwindTradeAmountActionDisabled ||reCheck>0"></vue-number-input>
                                </div>
                            </div>
                            <div v-if="childTradeCashs.length>0" style="width:100%;">
                                <table class="table mt-4" style="margin-bottom:0px;display:block;overflow-y:auto;height:300px;">
                                    <thead>
                                        <tr>
                                            <th style="width:104px;">操作</th>
                                            <th style="width:250px;">交易编号</th>
                                            <th style="width:100px; padding-left:0px; padding-right:0px;">期权类型</th>
                                            <th style="width:90px;">持仓数量</th>
                                            <th style="width:108px">持仓名义本金</th>
                                            <th style="width: 167px;">了结数量</th>
                                            <th style="width: 167px">了结名义本金</th>
                                            <th style="width: 185px" v-show="reCheck!=1">了结总额</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in childTradeCashs">
                                            <td> <button class="btn btn-primary btn-sm mr-2" type="button" v-on:click="starttradeView(item.EncryptId)">查看</button></td>
                                            <td>{{item.TradeNumber}}</td>
                                            <td>{{item.TradeType}}</td>
                                            <td>{{item.TradeAmount | otcformatNotional}}</td>
                                            <td>{{item.StockEqvNotional | otcformatStockEqvNotional}}</td>
                                            <td><vue-number-input class="form-input" style="width: 120px" v-model="item.UnwindTradeAmount" v-on:input="changeChildUnwindTradeAmount(item)" v-bind:format="inputFormatTradeAmount" v-bind:disabled="unwindTradeAmountActionDisabled||reCheck>0"></vue-number-input></td>
                                            <td><vue-number-input class="form-input" style="width: 120px" v-model="item.UnwindStockEqvNotional" v-on:input="changeChildUnwindStockEqvNotional(item)" v-bind:format="inputFormatEqvNotional" v-bind:disabled="unwindStockEqvActionDisabled||reCheck>0"></vue-number-input></td>
                                            <td v-show="reCheck!=1"><vue-number-input class="form-input" style="width: 120px" v-model="item.Amount" v-on:input="changeChildAmount" v-bind:format="inputFormatTradeAmount" :disabled="reCheck>0"></vue-number-input></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="mx-auto">
                        <button type="button" class="btn btn-primary btn-save" data-dismiss="modal" v-on:click="saveGroupTradeCash" v-if="reCheck==0">保存</button>
                        <button type="button" class="btn btn-primary btn-save" data-dismiss="modal" v-on:click="review" v-if="reCheck==1">复核</button>
                        <button type="button" class="btn btn-primary btn-save" data-dismiss="modal" v-on:click="reject" v-if="reCheck==1">拒绝</button>
                        <button type="button" class="btn btn-primary btn-save" data-dismiss="modal" v-on:click="submitApproval('pass')" v-if="reCheck==2">审批通过</button>
                        <button type="button" class="btn btn-primary btn-save" data-dismiss="modal" v-on:click="submitApproval('reject')" v-if="reCheck==2">拒绝</button>
                        <button type="button" class="btn btn-primary btn-close" data-dismiss="modal" v-on:click="closeWindow()">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="hidIds" value="@ViewBag.Ids" />