<div nz-row class="breadcrumbs">
  <div nz-col nzSpan="16">
    <nz-breadcrumb class="padding-8-0">
      <nz-breadcrumb-item>
        首页
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>告警管理</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        告警推送设置
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  <div nz-col nzSpan="8" class="text-right">
    <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
    <smart-full-screen></smart-full-screen>
  </div>
</div>

<div nz-row class="search-form">
  <div nz-col nzSpan="12">
    <nz-select style="width: 200px;"  nzPlaceHolder="选择告警组" [(ngModel)]="alertGroupId" (ngModelChange)="search()">
      <ng-container *ngFor="let item of groupList;let i = index;">
        <nz-option nzLabel="{{item.name}}" nzValue="{{item.id}}"></nz-option>
      </ng-container>
    </nz-select>
  </div>
  <div nz-col nzSpan="12" class="text-right">
    <button nz-button nzType="default" (click)="showGroupModal()"><i class="anticon anticon-plus-circle-o"></i>添加
    </button>
    <button nz-button nzType="default" (click)="editGroup()"><i class="anticon anticon-form"></i>编辑</button>
    <button nz-button nzType="default" (click)="deleteGroup()"><i class="anticon anticon-close-circle-o"></i>删除</button>
  </div>
</div>
<div nz-row class="search-form">
  <div nz-col nzSpan="16">
    <button (click)="showAlarmModal()" nz-button nzType="default"><i class="anticon anticon-plus-circle-o"></i>新增告警推送</button>
  </div>
</div>
<nz-table #nzTable [nzData]="setList" [nzLoading]="isLoading" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
  <thead>
  <tr>
    <th>名称</th>
    <th>状态</th>
    <th>发送方式</th>
    <th nzWidth="15%">发送对象</th>
    <th nzWidth="15%">生成事件</th>
    <th style="text-align: center">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of setList">
    <td class="round-tag tag-form">
      {{data.name}}
    </td>
    <td>
      <span class="color-red" *ngIf="data.status == 1">禁用</span>
      <span class="color-green" *ngIf="data.status == 0">启用</span>
    </td>
    <td>
     {{data.sendInfos | toRepeat}}
    </td>
    <td>
      <p style="margin: 0;" *ngFor="let item of data.sendInfos">
        {{item.receiver}}
      </p>
    </td>
    <td><ng-container *ngIf="data.event">
        {{data.event.title}}
      </ng-container></td>
    <td class="handle text-center main-color">
      <span (click)="showEditModal(data)">编辑</span>
      <span (click)="deleteAlarm(data)">删除</span>
      <span *ngIf="data.status == 1" (click)="changeStatus('启用','0',data)">启用</span>
      <span *ngIf="data.status == 0" (click)="changeStatus('暂停','1',data)">暂停</span>
    </td>
  </tr>
  </tbody>
</nz-table>

<!--告警组-->
<smart-alarm-group #smartAlarmGroup (add)="getGroupAlarm()"></smart-alarm-group>

<!--告警推送-->
<smart-alarm-modal #smartAlarmModal (done)="getList()" ></smart-alarm-modal>