<app-page-list noCreate (refresh)="load()" (search)="search($event)" [loading]="loading">

  <nz-table
    nzSize="small"
    [nzData]="datum"
    [nzFrontPagination]="false"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"
    (nzQueryParams)="onQuery($event)"
    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  >
    <thead>
    <tr>
      <th [nzShowCheckbox]="multiple" [nzChecked]="checked" [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="tags">标签</th>
      <th nzColumnKey="manufacturer" [nzSortFn]="true">厂商</th>
      <th nzColumnKey="version" [nzSortFn]="true">型号</th>
      <th nzColumnKey="created" [nzSortFn]="true">创建时间</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of datum; let i=index" (click)="onItemClick(data)">
      <td [nzChecked]="setCheckedOfId.has(data.id)"
          (nzCheckedChange)="onItemChecked(data.id, $event)"
      ></td>
      <td>{{ data.id }}</td>
      <td>{{ data.name }}</td>
      <td>{{ data.tags?.join(',') }}</td>
      <td>{{ data.manufacturer }}</td>
      <td>{{ data.version }}</td>
      <td [title]="data.created|dateString">{{data.created | fromNow}}</td>
    </tr>
    </tbody>
  </nz-table>

  <div *ngIf="multiple && setCheckedOfId.size">
    已经选择了 {{ setCheckedOfId.size }} 项
  </div>


</app-page-list>

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="cancel()">取消</button>
  <button nz-button nzType="primary" (click)="ok()">确定</button>
</div>
