@model UnwindData
@{
    ViewBag.Title = "交易 | 交易平仓";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    bool isUseApproval = ViewBag.isUseApproval;
    bool isShowReCheckClose = ViewBag.IsShowReCheckClose;
}
@section CSS{
    <link rel="stylesheet" href="~/Style/Css/unwindSwapTrade.css?v=@(HtmlUtil.JsVersion)" />
}
@section JS
    {
    <script>
        var model = @Json.Serialize(Model);
        model.StartDate = model.StartDate ? model.StartDate.substr(0, 10) : "";
        model.ValueDate = model.ValueDate ? model.ValueDate.substr(0, 10) : "";
        model.PayDate = model.PayDate ? model.PayDate.substr(0, 10) : "";
        var isUseApproval = "@isUseApproval" == "True";
        var g_isShowReCheckClose = "@isShowReCheckClose" == "True";
    </script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/fast/fastVue.components.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/front/swappriceprecision?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/app/swaptrade/swapPricePrecisionHelper.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/swaptrade/unwindLongShort.js?v=@HtmlUtil.JsVersion"></script>
}
<div class="pb-3" id="vueDiv">
    <div class="yc-panel">
        <div id="commomArea" class="row" style="height:140px">
            <div class="form-group col-md-3">
                <label class="formlabel">成交名义本金</label>
                <input class="text-box" :value="formatAmount(deal.NotionalValue)" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">持仓名义本金</label>
                <input class="text-box" :value="formatAmount(deal.PosiNotionalValue)" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">成交数量</label>
                <input class="text-box" :value="formatQuantity(deal.NotionalQty)" readonly="readonly" type="text" />

            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">持仓数量</label>
                <input class="text-box" :value="formatQuantity(deal.PositionQty)" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">起始日期</label>
                <input class="text-box" id="startDate" readonly="readonly" type="text" v-model="deal.StartDate" />
            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">平仓日期</label>
                <input class="text-box" id="DealDate" readonly="readonly" type="text" v-model="deal.ValueDate" />
            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">支付日期</label>
                <vue-datepicker  :mindate="minStartDate" :holiday="1" v-model="deal.PayDate" />
            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">年化天数</label>
                <input class="text-box" v-model="deal.AnnualDays" readonly="readonly" type="text" />
            </div>
            <div class="form-group col-md-3">
                <label class="formlabel">平仓总额</label>
                <input class="text-box" :value="formatAmount(deal.SwapCloseAmount)" readonly="readonly" type="text" />
            </div>
        </div>
    </div>
    <div class="yc-panel">
        <div class="row no-gutters" style="display:block;">
            <div class="titleDiv">
                <div class="titleHead"></div>
                <div class="titleLabel"><label>预付金/预付金</label></div>
            </div>
            <div style="margin: 5px 0 0 12px">
                <table class="table table-bordered ratetable" style="width:700px;">
                    <tbody>
                        <tr>
                            <td width="116px">收支方向</td>
                            <td>资金类别</td>
                            <td>应返还本金</td>
                            <td>利息金额</td>
                            <td>预付金/预付金平仓盈亏</td>
                        </tr>
                        <tr v-for="item in marginList">
                            <td :class="item.InterestDirection==1?'swapget':'swappay'">{{item.InterestDirection==1?"收取":"支付"}}</td>
                            <td>{{item.InterestModeStr}}</td>
                            <td>
                                <vue-number-input v-model="item.InterestPrincipal" v-bind:format="inputFormatEqvNotional" v-on:input="changeInterestAmount(item)"></vue-number-input>
                            </td>
                            <td>
                                <vue-number-input v-model="item.InterestAmount" v-bind:format="inputFormatEqvNotional" v-on:input="changeInterestAmount(item)"></vue-number-input>
                            </td>
                            <td>{{formatAmount(item.InterestClosePnL)}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row no-gutters" style="display:block;">
            <div class="titleDiv">
                <div class="titleHead"></div>
                <div class="titleLabel"><label>利息端</label></div>
            </div>
            <div style="margin: 5px 0 0 12px">
                <table class="table table-bordered" style="width:750px;">
                    <tbody>
                        <tr>
                            <td>收支方向</td>
                            <td>利息金额</td>
                            <td>利息端平仓盈亏</td>
                        </tr>
                        <tr v-for="item in interestList">
                            <td :class="item.InterestDirection==1?'swapget':'swappay'">{{item.InterestDirection==1?"收取":"支付"}}</td>
                            <td>
                                <vue-number-input v-model="item.InterestAmount" v-bind:format="inputFormatEqvNotional" v-on:input="changeInterestAmount(item)"></vue-number-input>
                            </td>
                            <td>{{formatAmount(item.InterestClosePnL)}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div>
                @if (isUseApproval)
                {
                    <button class="btn btn-default swapclose" type="button" v-on:click="submitApproval('reject');">拒绝</button>
                    <button class="btn btn-primary swapsave" type="button" v-on:click="submitApproval('pass')">审批通过</button>
                }
                else
                {
                    <button class="btn btn-default swapclose" type="button" onclick="layer.closeMe();">取消</button>
                    <button class="btn btn-primary swapsave" type="button" v-on:click="closeTrade">{{getSumbitText()}}</button>
                }
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>