<page-header-wrapper [title]="'待入账明细'" [logo]="logo">
  <ng-template #logo>
    <button nz-button (click)="goBack()">
      <i nz-icon nzType="left" nzTheme="outline"></i>
    </button>
  </ng-template>
</page-header-wrapper>
<nz-card>
  <sv-container layout="vertical" [noColon]="true" col="5">
    <sv [label]="labelTpl">
      <b class="text-md ">{{summaryObj?.taxno}}</b>
    </sv>
    <sv label="返佣总额">
      <span class="text-error-dark font-weight-bold">{{(summaryObj?.totalRebate?summaryObj?.totalRebate: 0 )|currency :'
        '}}</span>
    </sv>
    <sv label="已入账金额">
      <span class="text-error-dark font-weight-bold">{{(summaryObj?.recordedAmount?summaryObj?.recordedAmount:0
        )|currency:' '}}</span>
    </sv>
    <sv label="代缴个税">
      <span class="text-error-dark font-weight-bold">{{(summaryObj?.taxPersonalSum?summaryObj?.taxPersonalSum:0
        )|currency:' '}}</span>
    </sv>
    <sv label="待入账金额">
      <span class="text-error-dark font-weight-bold">{{(summaryObj?.waitRecordedAmount?summaryObj?.waitRecordedAmount:0)
        |currency:' '}}</span>
    </sv>
  </sv-container>
  <ng-template #labelTpl>
    <b class="text-md" style="color: black;">{{summaryObj?.ltdName}}</b>
  </ng-template>
</nz-card>
<nz-card>
  <div>
    <sf mode="search" #sf [schema]="schema" [ui]="ui" (formSubmit)="search()" (formReset)="resetSF()"></sf>
  </div>
  <div class="table-content">
    <st #st [data]="service.$api_get_invoice_detail_page " [columns]="columns"
      [req]="{ method: 'POST', allInBody: true, reName: {pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
      [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
      [page]="{ show: true, showSize: true, pageSizes:  [5,10, 20, 50, 100, 200, 500] }"
      [loading]="service.http.loading" [scroll]="{x:'1200px'}">
      <ng-template st-row="amount" let-item>
        <div *ngIf="item.incomeType === '1'"> - {{item.amount | currency }}</div>
        <div *ngIf="item.incomeType === '2'"> + {{item.amount | currency }}</div>
      </ng-template>
    </st>
    <div class="total-footer text-md" *ngIf="st?.list?.length !== 0 ">
      合计 <label class="text-red-dark">{{ footerSummary?.total }}</label> 项，收入 <label
        class="text-red-dark font-weight-bold">{{
        footerSummary?.income | currency
        }}</label>，支出 <label class="text-red-dark font-weight-bold">{{
        footerSummary?.spending | currency }}</label>
    </div>
  </div>
</nz-card>

<nz-modal [(nzVisible)]="showBillDetail" nzTitle="账户明细" [nzFooter]="null" (nzOnCancel)="handleCancel()" nzWidth="700px">
  <div *nzModalContent>
    <div class="mb-sm">
      <span class="mr-xxl text-sm font-weight-bold"><label>网络货运人：</label>{{detailRecord?.ltdName}}</span>
      <span class="text-sm font-weight-bold"><label>返佣总额（元）：</label>{{detailRecord?.totalRebate |currency: ' '}}</span>
    </div>
    <st #st [data]="billDetailList " [columns]="billDetailColumns" [res]="{ reName: { list: 'data' } }"
      [req]="{ method: 'POST', allInBody: true, params:billDetailReqParams}" [page]="{show:false}">
      <ng-template st-row="month" let-item>
        <div>
          <span>{{item?.year }}年</span>
          <span>{{item?.month }}月</span>
        </div>
      </ng-template>
      <ng-template st-row="profitAmountSum" let-item>
        <div>{{item?.profitAmountSum |currency :' '}}</div>
      </ng-template>

    </st>
  </div>
</nz-modal>
