<!-- start 面包屑 -->
<app-breadcrumb></app-breadcrumb>
<!-- end 面包屑 -->
<!--条件搜索-->
<nz-spin [nzSpinning]="loadingObject.spinning" nzTip="{{loadingObject.msg}}">
  <div class="inner-content">
    <form nz-form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)">
      <div nz-row>
        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">商户号</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-select nzShowSearch formControlName="merNo" [nzDropdownMatchSelectWidth]="false">
                <nz-option *ngFor="let item of merArray" nzLabel="（{{item.merNo}}）{{item.merName}}" nzValue="{{item.merNo}}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">清算起始日期</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-date-picker style="width: 100%;" (ngModelChange)="searchSettleTime(1, $event)" [nzDisabledDate]="disabledDate" [nzShowToday]="false" [nzAllowClear]="false" [nzFormat]="'yyyy-MM-dd'" formControlName="settleTimeS"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label [nzSpan]="8">清算终止日期</nz-form-label>
            <nz-form-control [nzSpan]="14">
              <nz-date-picker style="width: 100%;" (ngModelChange)="searchSettleTime(2, $event)"[nzDisabledDate]="disabledDate" [nzShowToday]="false" [nzAllowClear]="false" [nzFormat]="'yyyy-MM-dd'" formControlName="settleTimeE"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row>
        <div nz-col nzSpan="24" class="search-button">
          <button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>搜索</button>
          <button nz-button nzType="default" (click)="resetForm()"><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button>
        </div>
      </div>
    </form>
  </div>

  <div class="inner-content">
    <article nz-typography>
      <p>
        <span nz-typography><strong>清算日期: {{this.searchForm.controls['settleTimeS'].value | date: 'yyyy-MM-dd'}}  至  {{this.searchForm.value.settleTimeE | date: 'yyyy-MM-dd'}}，</strong></span>
        <span nz-typography nzType="warning"><strong>汇总：</strong></span>
        笔数 <span nz-typography nzType="warning"><strong>{{dataObject.totalTradeNum}}</strong></span>、
        交易金额 <span nz-typography nzType="warning"><strong>{{dataObject.totalTradeAmount}}</strong></span> 元、
        手续费 <span nz-typography nzType="warning"><strong>{{dataObject.totalShdFeeAmount}}</strong></span> 元、
        应结算金额 <span nz-typography nzType="warning"><strong>{{dataObject.totalSettleAmount}}</strong></span> 元
        <button nz-button nzType="primary" style="float: right;left: 5px;" (click)="download()">下载</button>
        <button nz-button nzType="primary" style="float: right;" (click)="showPrint()">打印</button>
      </p>
    </article>
    <!--数组表格 -->
    <nz-table #basicTable
              nzBordered
              nzShowSizeChanger
              nzSize="small"
              [nzData]="dataObject.settleList"
              [nzTotal]="dataObject.settleList.length"
              [nzLoading]="tableLoading"
              [nzScroll]="{ x: '595px'}">
      <thead>
      <tr>
        <th nzWidth="90px">清算日期</th>
        <th nzWidth="100px">商户号</th>
        <th nzWidth="130px">商户名称</th>
        <th nzWidth="80px">交易笔数</th>
        <th nzWidth="80px">交易金额</th>
        <th nzWidth="80px">手续费</th>
        <th nzWidth="80px">应结算金额</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data;let i = index">
        <td>{{data.settleDay}}</td>
        <td>{{data.merNo}}</td>
        <td>{{data.merName}}</td>
        <td>{{data.tradeNum}}</td>
        <td>{{data.tradeAmount}}</td>
        <td>{{data.shdFeeAmount}}</td>
        <td>{{data.settleAmount}}</td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</nz-spin>

<!--startprint-->

<div id="print-content" style="display: none">
  <nz-layout>
    <nz-content>
      <div class="inner-content">
        <article nz-typography>
          <p>
            <span nz-typography><strong>清算日期: {{this.searchForm.controls['settleTimeS'].value | date: 'yyyy-MM-dd'}}  至  {{this.searchForm.value.settleTimeE | date: 'yyyy-MM-dd'}}</strong></span>
          </p>
          <p>
            <span nz-typography nzType="warning"><strong>汇总：</strong></span>
            笔数 <span nz-typography nzType="warning"><strong>{{dataObject.totalTradeNum}}</strong></span>、
            交易金额 <span nz-typography nzType="warning"><strong>{{dataObject.totalTradeAmount}}</strong></span> 元、
            手续费 <span nz-typography nzType="warning"><strong>{{dataObject.totalShdFeeAmount}}</strong></span> 元、
            应结算金额 <span nz-typography nzType="warning"><strong>{{dataObject.totalSettleAmount}}</strong></span> 元
          </p>
        </article>
        <!--数组表格 -->
        <nz-table #basicTable2
                  nzBordered
                  nzShowSizeChanger
                  nzSize="middle"
                  [nzData]="dataObject.settleList"
                  [nzTotal]="dataObject.settleList.length"
                  [nzLoading]="tableLoading"
                  [nzShowPagination]="false"
                  [nzScroll]="{ x: '550px'}">
          <thead>
          <tr>
            <th nzWidth="90px">清算日期</th>
            <th nzWidth="100px">商户号</th>
            <th nzWidth="130px">商户名称</th>
            <th nzWidth="80px">交易笔数</th>
            <th nzWidth="80px">交易金额</th>
            <th nzWidth="80px">手续费</th>
            <th nzWidth="80px">应结算金额</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of basicTable.data;let i = index">
            <td>{{data.settleDay}}</td>
            <td>{{data.merNo}}</td>
            <td>{{data.merName}}</td>
            <td>{{data.tradeNum}}</td>
            <td>{{data.tradeAmount}}</td>
            <td>{{data.shdFeeAmount}}</td>
            <td>{{data.settleAmount}}</td>
          </tr>
          </tbody>
        </nz-table>
      </div>
      <img style="z-index: 0;margin: -100px 0px 0px 75%; position: absolute;width: 175px;height: 150px;" src="https://pay.dctpay.com/filesystem/b6b7e8860b6135101334aa840eb7e17d.png">
    </nz-content>
  </nz-layout>
</div>

<!--endprint-->
