@{
    ViewBag.Title = "互换清算-成交簿记";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
    var valueDate = valuedateBLL.ValueDate.ToSqlDate();
    var afterDate = valuedateBLL.GetNonHoliday(valuedateBLL.ValueDate.AddDays(1)).ToSqlDate();
    var pageObj = new
    {
        IsUseDisplayNotional = false,
        valueDate = valueDate,
        afterDate = @afterDate,
        canEdit = CurUser.结算管理_成交簿记流水编辑,
        canDelete = CurUser.结算管理_成交簿记流水删除
    };
}
@section CSS{
    <link rel="stylesheet" href="~/Style/Css/step.css?v=@(HtmlUtil.JsVersion)" />
    <style>

        .layui-progress {
            position: relative;
            height: 6px;
            border-radius: 20px;
            background-color: #eee;
        }

        .layui-progress-bar {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            max-width: 100%;
            height: 6px;
            border-radius: 20px;
            text-align: right;
            background-color: #5FB878;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layui-progress-big, .layui-progress-big .layui-progress-bar {
            height: 18px;
            line-height: 18px;
        }

        .layui-progress-text {
            position: relative;
            top: -20px;
            line-height: 18px;
            font-size: 12px;
            color: #666;
        }

        .bootstrap-select{
            width:140px !important;
        }
        .clickable-icon {
            cursor: pointer;
            padding: 5px;
            font-size: 16px;
        }
        .clickable-icon:hover {
            opacity: 0.8;
        }
        .input-fr007 {
            text-align: right;
            padding-right: 25px !important;
        }

        .icon-box {
            font-size: 20px;
        }

        .confirm-icon {
            color: #4282ff;
        }

        .warning-icon {
            color: #ffb84a;
        }

        .tips-icon {
            display: contents;
        }

        .input-box {
            position: relative;
        }

        .input-unit {
            position: absolute;
            right: 17px;
            top: 0;
        }
    </style>
}
@section JS{
    <script>
        const page = @Json.Serialize(pageObj);
    </script>
    <script src="~/statics/libs/signalr/dist/browser/signalr.min.js"></script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="@HtmlUtil.BasicDataJs("客户")"></script>
    <script src="~/Scripts/fast/fastVue.components.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/tradeHelper.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/trade/tradeUpload.js?v=2"></script>
    <script src="~/Scripts/app/swaptrade/step.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/swaptrade/SwapflowList.js?v=@HtmlUtil.JsVersion"></script>
}
<div id="flowBook">
    <div class="searchdiv">
        <div id="steps"></div>
    </div>
    <div class="searchdiv">
        <div style="display: flex; height: auto; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0;">
            <!-- 左侧操作按钮组 -->
            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                <a v-on:click="refreshTradeFlow(false)" href="#" style="text-decoration: none;">
                    <span class="glyphicon glyphicon-refresh" v-show="step==1">刷新交易端流水</span>
                </a>
                @if (CurUser.结算管理_成交簿记流水新增)
                {
                    <button class="btn btn-primary" v-on:click="addNew" v-show="step==1">添加流水</button>
                    <button class="btn btn-primary" v-on:click="showImportSwapflow" v-show="step==1">导入流水</button>
                }
                <button class="btn btn-primary" v-on:click="getList">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
            </div>

            <!-- 右侧输入控件组 -->
            <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto;">
                <!-- FR007 输入组 -->
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span>FR007</span>
                    <div style="position: relative;">
                        <input type="text" v-model="FRData.value" class="form-control input-fr007"
                               style="width: 90px; padding-right: 25px;"
                               v-bind:disabled="!isFromArtifical"
                               v-on:focus="editFRData">
                        <span class="input-unit" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%);">%</span>
                    </div>
                     <i v-if="isShowWarning" class="fa fa-exclamation-triangle warning-icon" v-bind:title="frTips" aria-hidden="true"></i>
                    <template v-if="!isShowWarning && isFromArtifical">
                        <i class="fa fa-pencil-square-o clickable-icon"
                           v-show="!isAddOrEditFRData"
                           v-on:click="editFRData"></i>
                        <div v-show="isAddOrEditFRData" style="display: flex; gap: 4px;">
                            <i class="fa fa-check-circle clickable-icon text-success"
                               v-on:click="commitFRData"></i>
                            <i class="fa fa-times-circle clickable-icon text-danger"
                               v-on:click="deleteFRData"></i>
                        </div>
                    </template>
                </div>

                <!-- 日期选择组 -->
                <div style="display: flex; align-items: center; gap: 8px;">
                    <span>日期</span>
                    <vue-datepicker :holiday="1" v-model="FRData.date" id="FRDataDate"
                                    style="width: 140px;"
                                    v-on:input="getFRData"></vue-datepicker>
                    <span>客户名称</span>
                    <input type="text" class="text-box" id="SearchClientId" />
                </div>

                <!-- 标的代码和清算日期 -->
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div class="form-group" style="margin: 0;">
                        <label>标的代码</label>
                        <select class="form-control selectpicker" data-placeholder="请选择 标的代码" id="UnderlyingCode" name="UnderlyingCode" data-actions-box="true" data-live-search="true" style="width: 180px; max-width: 100%;"></select>
                    </div>

                    <div class="form-group" style="margin: 0;">
                        <label>交易日期</label>
                        <vue-datepicker :holiday="1" v-model="tradeDate" id="tradeDate"
                                        style="width: 140px;"></vue-datepicker>
                    </div>
                </div>

                <!-- 右侧操作按钮 -->
                <div style="display: flex; gap: 8px;">
                    @if (CurUser.结算管理_成交簿记流水重置)
                    {
                        <button class="btn btn-primary" id="resetBtn">重置</button>
                    }
                    @if (CurUser.结算管理_成交簿记流水簿记)
                    {
                        <button class="btn btn-primary" id="combookingBtn">确定簿记</button>
                    }
                </div>
            </div>
        </div>
    </div>

    <div id="tableContent" class="yc-panel my-0 p-0">
        @Html.Raw(JqGridSimple.OutTable())
    </div>
    <div class="modal" id="flowAssetBookModal" aria-hidden="true">
        <div class="modal-dialog" style="max-width:400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        成交流水
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="formlabel ">交易时间</label>
                        <vue-datepicker :maxdate="maxTradeDate" :holiday="1" v-model="swapflow.OccurTime"></vue-datepicker>
                        <span style="color:red">*</span>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">交易对手方</label>
                        <input type="text" name="ClientId" id="ClientId" v-model="swapflow.ClientId" class="text-box" />
                        <span style="color:red">*</span>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">买卖方向</label>
                        <select v-model="swapflow.BsType">
                            <option value=1>买</option>
                            <option value=2>卖</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">标的代码</label>
                        <vue-underlying id="swapflow.UnderlyingCode" v-model="swapflow.UnderlyingCode" v-on:change="setUnderlyingCode"></vue-underlying>
                        <span style="color:red">*</span>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">成交数量</label>
                        <vue-number-input v-model="swapflow.TradingQty" v-bind:format="getQuantityInputFormat()"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">成交金额</label>
                        <vue-number-input v-model="swapflow.TradingAmount" v-bind:format="inputFormatSwapAmount"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">交易费用</label>
                        <vue-number-input v-model="swapflow.TradingFee" v-bind:format="inputFormatSwapAmount"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">成交均价</label>
                        <vue-number-input v-model="swapflow.TradingAmountAvg" v-bind:format="inputFormatSwapDeliveryPrice" v-on:input="changeSpotPrice()"></vue-number-input>
                    </div>
                    @*<div class="form-group">
                        <label class="formlabel ">成交均价含费</label>
                        <vue-number-input v-model="swapflow.TradingAmountFeeAvg" v-bind:format="inputFormatTradePrice"></vue-number-input>
                    </div>*@
                    <div class="form-group">
                        <label class="formlabel ">成交收益率</label>
                        <vue-number-input v-model="swapflow.ytm" v-bind:format="inputFormatMarginRate"></vue-number-input>
                    </div>
                    <div class="form-group">
                        <label class="formlabel ">成交净价</label>
                        <vue-number-input v-model="swapflow.TradingAmountNet" v-bind:format="inputFormatTradePrice"></vue-number-input>
                    </div>
                  @*  <div class="form-group">
                        <label class="formlabel ">成交净价含费</label>
                        <vue-number-input v-model="swapflow.TradingAmountNetFee" v-bind:format="inputFormatTradePrice"></vue-number-input>
                    </div>*@
                    <div class="form-group">
                        <label class="formlabel ">清算日期</label>
                        <vue-datepicker :holiday="1" v-model="swapflow.SettleDate"></vue-datepicker>
                        <span style="color:red">*</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" v-on:click="saveSwapflow">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div id="importSwapFlow" style="display:none;">
        <form id="tradeUploadForm" method="post" class="yc-panel" onsubmit="return false;" style="padding-bottom:30px;">
            <h4 class="mb-4">成交流水导入</h4>
            <div class="mb-4">
                <input type="file" id="openFile" name="file" accept=".xlsx" />
                <button type="button" class="btn btn-primary" v-on:click="importSwapflow">导入</button>
            </div>
            <div class="mb-4">
                <label>说明：只支持导入.xlsx文件</label>
            </div>
        </form>
        <div class="yc-panel">
            <h4 class="mb-3">成交流水导入模板下载</h4>
            <div class="mb-4">
                <a class="btn btn-link" href="/App_Docs/导入模板/互换成交流水导入模板.xlsx" target="_blank">
                    成交流水导入模板下载
                </a>
            </div>
        </div>
    </div>
</div>
<div id="progressBar" style="padding: 20px;display:none">
    <div class="layui-progress layui-progress-big" lay-showpercent="true">
        <div class="layui-progress-bar" lay-percent="0%">
            <span class="layui-progress-text"></span>
        </div>
    </div>
</div>
<div id="combookingMsg" style="padding: 20px;display:none">
    <div id="msg"></div>
</div>