<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="server_id" [nzSortFn]="true">服务器</th>
      <th nzColumnKey="name" [nzSortFn]="true">名称</th>
      <th nzColumnKey="type" [nzSortFn]="true">名称</th>
      <th nzColumnKey="addr" [nzSortFn]="true">地址</th>
      <th nzColumnKey="created" [nzSortFn]="true">创建时间</th>
      <th nzColumnKey="last" [nzSortFn]="true">最近上线</th>
      <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of datum; let i=index" (click)="onItemClick(data)">
      <td [nzChecked]="setCheckedOfId.has(data.id)" [nzDisabled]="!data.disabled"
          (nzCheckedChange)="onItemChecked(data.id, $event)"
      ></td>
      <td>{{ data.id }}</td>
      <td>{{ data.server }}</td>
      <td>{{data.disabled ? '❌' : ''}}{{ data.name }}</td>
      <td>{{ data.type }}</td>
      <td>{{ data.addr }}</td>
      <td [title]="data.created|dateString">{{data.created | fromNow}}</td>
      <td>{{data.last | fromNow}}</td>
      <td>{{data.running ? '在线' : '离线'}}</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>
