<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>
                业务监管
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                <a (click)="backList()">业务配置</a>
            </nz-breadcrumb-item>
            <nz-breadcrumb-item *ngIf="searchStatus">
                搜索结果
            </nz-breadcrumb-item>
        </nz-breadcrumb>
    </div>
    <div nz-col nzSpan="12" 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="21">
        <input style="width: 200px;" (keyup.enter)="reset()" type="text" nz-input [(ngModel)]="searchName"
               placeholder="输入资源名称">
        <button (click)="reset()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索
        </button>
    </div>
    <div nz-col nzSpan="3" class="text-right">
        <button nz-button nzType="default" (click)="showAddModal(null)"><i class="anticon anticon-plus-circle-o"></i>添加
        </button>
    </div>
</div>


<ng-container *ngIf="!searchStatus">
    <nz-table #nzTable [nzData]="dataSet" [nzLoading]="isLoading" [nzShowPagination]="true" [nzFrontPagination]="true">
        <thead>
        <tr>
            <th>名称</th>
            <th>状态</th>
            <th>关联网站</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
            <ng-template ngFor let-item [ngForOf]="expandDataCache[data.serviceid]">
                <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
                    <td [nzIndentSize]="item.level*20" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand" (nzExpandChange)="getChildren(item,data)">
                        <span (click)="showEditModal(item)" class="main-color cursor">{{item.name}}</span>
                    </td>
                    <td class="round-tag tag-form" (mouseenter)="getTime(item)">
                        <ng-container *ngIf="item.status == 0">
                            <nz-tooltip>
                                <nz-tag nz-tooltip class="tag-green" [nzColor]="color.green"></nz-tag>
                                <ng-template #nzTemplate>
                                    <p *ngIf="item.now">告警时间：{{item.now}}</p>
                                    <p *ngIf="item.last">上次告警时间：{{item.last}}</p>
                                    <p *ngIf="!item.now && !item.last">暂无告警</p>
                                </ng-template>
                            </nz-tooltip>
                        </ng-container>
                        <ng-container *ngIf="item.status == 2 || item.status == 3">
                            <nz-tooltip>
                                <nz-tag nz-tooltip class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                                <ng-template #nzTemplate>
                                    <p *ngIf="item.now">告警时间：{{item.now}}</p>
                                    <p *ngIf="item.last">上次告警时间：{{item.last}}</p>
                                    <p *ngIf="!item.now && !item.last">暂无告警</p>
                                </ng-template>
                            </nz-tooltip>
                        </ng-container>
                        <ng-container *ngIf="item.status == 4 || item.status == 5">
                            <nz-tooltip>
                                <nz-tag nz-tooltip class="tag-red" [nzColor]="color.red"></nz-tag>
                                <ng-template #nzTemplate>
                                    <p *ngIf="item.now">告警时间：{{item.now}}</p>
                                    <p *ngIf="item.last">上次告警时间：{{item.last}}</p>
                                    <p *ngIf="!item.now && !item.last">暂无告警</p>
                                </ng-template>
                            </nz-tooltip>
                        </ng-container>
                    </td>
                    <td class="cursor">
                        <span *ngIf="!item.webscenarioGetResult" class="main-color cursor" (click)="showWebModal(item)">关联</span>
                        <span *ngIf="item.webscenarioGetResult" class="main-color cursor" (click)="showWebModal(item)">{{item.webscenarioGetResult.name}}</span>
                    </td>
                    <td class="handle main-color">
                        <span (click)="showAddModal(item)">添加子节点</span>
                        <ng-container *ngIf="item.level == 0">
                            <ng-container *ngIf="item.serviceAction">
                                <span (click)="showEditAlarmModal(item)">编辑告警推送</span>
                            </ng-container>
                            <ng-container *ngIf="!item.serviceAction">
                                <span (click)="showAlarmModal(item)">配置告警推送</span>
                            </ng-container>
                        </ng-container>
                        <ng-container *ngIf="item.level > 0">
                            <span (click)="showDeleteConfirm(item)">移除</span>
                        </ng-container>
                    </td>
                </tr>
            </ng-template>
        </ng-template>
        </tbody>
    </nz-table>
</ng-container>
<ng-container *ngIf="searchStatus">
    <nz-table #nzTable [nzData]="searchList" [nzLoading]="isLoading" [nzShowPagination]="true"
              [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount"
              (nzPageIndexChange)="change($event)">
        <thead>
        <tr>
            <th nzWidth="20%">名称</th>
            <th>状态</th>
            <th>关联网站</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <ng-container *ngFor="let item of nzTable.data">
            <tr>
                <td>
                    <span (click)="showEditModal(item)" class="main-color cursor">{{item.name}}</span>
                </td>
                <td class="round-tag tag-form" (mouseenter)="getTime(item)">
                    <ng-container *ngIf="item.status == 0">
                        <nz-tooltip>
                            <nz-tag nz-tooltip class="tag-green" [nzColor]="color.green"></nz-tag>
                            <ng-template #nzTemplate>
                                <p *ngIf="item.now">告警时间：{{item.now}}</p>
                                <p *ngIf="item.last">上次告警时间：{{item.last}}</p>
                                <p *ngIf="!item.now && !item.last">暂无告警</p>
                            </ng-template>
                        </nz-tooltip>
                    </ng-container>
                    <ng-container *ngIf="item.status == 2 || item.status == 3">
                        <nz-tooltip>
                            <nz-tag nz-tooltip class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                            <ng-template #nzTemplate>
                                <p *ngIf="item.now">告警时间：{{item.now}}</p>
                                <p *ngIf="item.last">上次告警时间：{{item.last}}</p>
                                <p *ngIf="!item.now && !item.last">暂无告警</p>
                            </ng-template>
                        </nz-tooltip>
                    </ng-container>
                    <ng-container *ngIf="item.status == 4 || item.status == 5">
                        <nz-tooltip>
                            <nz-tag nz-tooltip class="tag-red" [nzColor]="color.red"></nz-tag>
                            <ng-template #nzTemplate>
                                <p *ngIf="item.now">告警时间：{{item.now}}</p>
                                <p *ngIf="item.last">上次告警时间：{{item.last}}</p>
                                <p *ngIf="!item.now && !item.last">暂无告警</p>
                            </ng-template>
                        </nz-tooltip>
                    </ng-container>
                </td>
                <td class="cursor">
                    <span *ngIf="!item.webscenarioGetResult" class="main-color cursor" (click)="showWebModal(item)">关联</span>
                    <span *ngIf="item.webscenarioGetResult" class="main-color cursor" (click)="showWebModal(item)">{{item.webscenarioGetResult.name}}</span>
                </td>
                <td class="handle main-color">
                    <span (click)="showAddModal(item)">添加子节点</span>
                </td>
            </tr>
        </ng-container>
        </tbody>
    </nz-table>
</ng-container>

<!--业务-->
<smart-business #smartBusiness (add)="getList()"></smart-business>
<!--网站监测列表-->
<smart-web-modal #smartWebModal (done)="contract($event)"></smart-web-modal>
<!--告警推送-->
<smart-alarm-modal #smartAlarmModal></smart-alarm-modal>
