<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>仪表盘</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="monitor"></i>
    <span>{{ 'monitor.app.' + app | i18n }} 监控列表</span>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>
<button nz-button nzType="primary">
  <a routerLink="/monitors/new" [queryParams]="{ app: app }">
    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
    新增 {{ 'monitor.app.' + app | i18n }}
  </a>
</button>
<button nz-button nzType="primary" (click)="onEditMonitor()">
  <i nz-icon nzType="edit" nzTheme="outline"></i>
  编辑
</button>
<button nz-button nzType="primary" (click)="onDeleteMonitors()">
  <i nz-icon nzType="delete" nzTheme="outline"></i>
  删除
</button>
<button nz-button nzType="primary" (click)="onEnableManageMonitors()">
  <i nz-icon nzType="up-circle" nzTheme="outline"></i>
  启用纳管
</button>
<button nz-button nzType="primary" (click)="onCancelManageMonitors()">
  <i nz-icon nzType="down-circle" nzTheme="outline"></i>
  取消纳管
</button>
<button nz-button nzType="primary" (click)="sync()" nz-tooltip nzTooltipTitle="刷新">
  <i nz-icon nzType="sync" nzTheme="outline"></i>
</button>

<nz-table
  #fixedTable
  [nzData]="monitors"
  [nzPageIndex]="pageIndex"
  [nzPageSize]="pageSize"
  [nzTotal]="total"
  nzFrontPagination="false"
  [nzLoading]="tableLoading"
  nzShowSizeChanger
  [nzShowTotal]="rangeTemplate"
  [nzPageSizeOptions]="[8, 15, 25]"
  (nzQueryParams)="onTablePageChange($event)"
  nzShowPagination="true"
  [nzScroll]="{ x: '1150px', y: '1240px' }"
>
  <thead>
    <tr>
      <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center" nzLeft>监控名称</th>
      <th nzAlign="center">监控状态</th>
      <th nzAlign="center">监控Host</th>
      <th nzAlign="center">监控类型</th>
      <th nzAlign="center">最新修改时间</th>
      <th nzAlign="center">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
      <td nzAlign="center" nzLeft>
        <a [routerLink]="['/monitors/' + data.id]">
          <span>{{ data.name }}</span>
        </a>
      </td>
      <td nzAlign="center">
        <nz-tag *ngIf="data.status == 0" nzColor="default">
          <i nz-icon nzType="robot" nzTheme="outline"></i>
          <span>未监控</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 1" nzColor="success">
          <i nz-icon nzType="smile" nzTheme="outline"></i>
          <span>正常监控</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 2" nzColor="warning">
          <i nz-icon nzType="meh" nzTheme="outline"></i>
          <span>监控不可用</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 3" nzColor="error">
          <i nz-icon nzType="frown" nzTheme="outline"></i>
          <span>监控不可达</span>
        </nz-tag>
        <nz-tag *ngIf="data.status == 4" nzColor="default">
          <i nz-icon nzType="sync"></i>
          <span>监控已挂起</span>
        </nz-tag>
      </td>
      <td nzAlign="center">{{ data.host }}</td>
      <td nzAlign="center">
        <nz-tag nzColor="processing">
          <i nz-icon nzType="cloud"></i>
          <span>{{ 'monitor.app.' + data.app | i18n }}</span>
        </nz-tag>
      </td>
      <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
      <td nzAlign="center">
        <button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控">
          <i nz-icon nzType="edit" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" (click)="onDeleteOneMonitor(data.id)" nz-tooltip nzTooltipTitle="删除监控">
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" (click)="onEnableManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="启用纳管">
          <i nz-icon nzType="up-circle" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" (click)="onCancelManageOneMonitor(data.id)" nz-tooltip nzTooltipTitle="取消纳管">
          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
        </button>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #rangeTemplate> 总量 {{ total }} </ng-template>
