<div nz-row class="breadcrumbs">
    <div nz-col nzSpan="12">
        <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="10" class="search-input text-right">
        <input (keyup.enter)="getwebList()" type="text" [(ngModel)]="name" nz-input placeholder="请输入网站名称">
        <button (click)="getwebList()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
    </div>
    <div nz-col nzSpan="2" 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 tag-form">
    <div nz-col nzSpan="12">
        <span>网站监测数：{{checkStatus.total}}</span>
        <span>监测状态：
      <span style="margin-right: 8px"> <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
           <i *ngIf="!checkStatus.type.normalNum && checkStatus.type.normalNum !=0"
              class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{checkStatus.type.normalNum}}
      </span>
      <span style="margin-right: 8px"> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                     <i *ngIf="!checkStatus.type.warnNum && checkStatus.type.warnNum !=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{checkStatus.type.warnNum}}
      </span>
      <span style="margin-right: 8px"> <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
           <i *ngIf="!checkStatus.type.seriousNum && checkStatus.type.seriousNum !=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{checkStatus.type.seriousNum}}
      </span>
      <span> <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
                     <i *ngIf="!checkStatus.type.notNum && checkStatus.type.notNum !=0"
                        class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
          {{checkStatus.type.notNum}}
      </span>
    </span>
    </div>
    <div nz-col nzSpan="12" class="text-right">
        <button nz-button nzType="default" (click)="showAddmodal()"><i class="anticon anticon-plus-circle-o"></i>添加网站
        </button>
        <button (click)="openBatchHost(1,'禁用')" nz-button nzType="default"><i
                class="anticon anticon-pause-circle-o"></i>停止监控
        </button>
        <button (click)="openBatchHost(0,'启用')" nz-button nzType="default"><i class="anticon anticon-play-circle-o"></i>开启监控
        </button>
        <button (click)="batchDeleteConfirm()" nz-button nzType="default"><i class="anticon anticon-close-circle-o"></i>删除网站
        </button>
    </div>
</div>
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzTotal]="totalNum" [nzPageIndex]="pageIndex"
          [nzPageSize]="pageSize" (nzPageIndexChange)="change($event)" [nzFrontPagination]="false">
    <thead>
    <tr>
        <th [nzChecked]="allChecked"></th>
        <th>网站名称</th>
        <th>状态</th>
        <th nzWidth="20%">最近检查记录</th>
        <th>步骤数量</th>
        <th>间隔</th>
        <th>尝试次数</th>
        <th>认证</th>
        <th>Http代理</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!--资源分组-->
    <ng-container *ngFor="let item of dataSet">
        <tr>
            <td nzShowCheckbox (nzCheckedChange)="selectChecked($event,item)"></td>
            <td class="cursor main-color">
                <span (click)="goDetail(item)">{{item.name}}</span>
            </td>
            <td>
                <span *ngIf="item.status == 0">启用</span>
                <span *ngIf="item.status == 1">禁用</span>
            </td>
            <td>{{item.lastCheckTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            <td>{{item.steps.length}}</td>
            <td>{{item.delay}}</td>
            <td>{{item.retries}}</td>
            <td>{{item.authentication}}</td>
            <td>{{item.headers}}</td>
            <td class="handle main-color">
                <span (click)="editBasicModal(item)">编辑</span>
                <span class="handle-delete" (click)="showDeleteConfirm(item)">删除</span>
                <nz-dropdown [nzTrigger]="'click'" class="table-dropdown">
                    <a nz-dropdown>更多 <i class="anticon anticon-down main-color"></i>
                    </a>
                    <ul nz-menu nzSelectable>
                        <li nz-menu-item><a>
                            <ng-container *ngIf="item.status == 1"><span
                                    (click)="operationHost(item,'0','开启')">开启监控</span></ng-container>
                            <ng-container *ngIf="item.status == 0"><span
                                    (click)="operationHost(item,'1','关闭')">停止监控</span></ng-container>
                        </a></li>
                        <li (click)="showTempStop(item)" nz-menu-item>
                            <a *ngIf="!item.monitorTask">临时暂停</a>
                        </li>
                        <li (click)="showAlarm(item)" nz-menu-item><a>添加告警</a></li>
                    </ul>
                </nz-dropdown>
            </td>
        </tr>
    </ng-container>
    </tbody>
</nz-table>

<!--网站-->
<smart-website #smartWebsite (done)="getwebList()"></smart-website>

<!--临时暂停-->
<smart-pause #smartPause (done)="getwebList()"></smart-pause>

<!--告警-->
<smart-alarm-modal #smartAlarmModal></smart-alarm-modal>
