<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>
                <a routerLink="../basic">基础资源监控</a>
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                {{hostName}}
            </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>

<nz-spin [nzSpinning]="isSpinning">
    <div class="tabset">
        <div class="tabset-btn">
            <button (click)="showCheckModal()" nz-button nzType="default">添加监测点</button>
            <button (click)="showDeleteConfirm()" nz-button nzType="default">删除资源</button>
        </div>
        <div class="releative" #checkEle>
            <div #colorEle class="checkTags tag-form">
                <span [ngClass]="{'select-border': changeStates == '正常'}" (click)="changeState('正常')">
                    <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
                     <i *ngIf="!checkStatus.normal && checkStatus.normal !=0"
                        class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>{{checkStatus.normal}}
                </span>
                <span [ngClass]="{'select-border': changeStates == '告警'}" (click)="changeState('告警')"> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                     <i *ngIf="!checkStatus.warning && checkStatus.warning !=0"
                        class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
                    {{checkStatus.warning}}
                </span>
                <span [ngClass]="{'select-border': changeStates == '严重'}" (click)="changeState('严重')"> <nz-tag class="tag-red"  [nzColor]="color.red"></nz-tag>
                     <i *ngIf="!checkStatus.high && checkStatus.high !=0" class="anticon anticon-spin anticon-loading"
                        style="font-size: 15px;"></i>
                    {{checkStatus.high}}
                </span>
                <span [ngClass]="{'select-border': changeStates == '禁用'}" (click)="changeState('禁用')"> <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
                     <i *ngIf="!checkStatus.disabled && checkStatus.disabled !=0"
                        class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
                    {{checkStatus.disabled}}
                </span>
            </div>
            <nz-tabset [nzType]="'card'" [nzSelectedIndex]="tabNum" class="tabs-smart">
                <nz-tab nzTitle="资源详情">
                    <section>
                        <p class="padding-8-0">{{hostName}}</p>
                        <div nz-row nzGutter="24">
                            <div nz-col nzSpan="12">
                                <nz-collapse>
                                    <nz-collapse-panel [nzHeader]="panel1.name" [nzActive]="panel1.active"
                                                       [nzDisabled]="panel1.disabled">
                                        <div nz-row>
                                            <div class="releative" nz-col nzSpan="12">
                                                <div echarts [options]="chartOption1"
                                                     style="height: 220px;width: 100%"></div>
                                                <div class="posiabsolutStr">
                                                    <p>{{responseTimeStr}}</p>
                                                    <p>ms</p>
                                                </div>
                                            </div>
                                            <div class="releative" nz-col nzSpan="12">
                                                <div echarts [options]="chartOption2"
                                                     style="height: 220px;width: 100%;"></div>
                                                <div class="posiabsolutStr">
                                                    <p>{{losedStr}}</p>
                                                    <p>%</p>
                                                </div>
                                            </div>
                                        </div>
                                    </nz-collapse-panel>
                                </nz-collapse>
                            </div>
                            <div nz-col nzSpan="12">
                                <nz-collapse>
                                    <nz-collapse-panel [nzHeader]="panel2.name" [nzActive]="panel2.active"
                                                       [nzDisabled]="panel2.disabled">
                                        <div nz-row>
                                            <div class="releative" nz-col nzSpan="12">
                                                <div echarts [options]="chartOption3"
                                                     style="height: 220px;width: 100%;"></div>
                                                <div class="posiabsolutStr">
                                                    <p>{{cpuUsedStr}}</p>
                                                    <p>%</p>
                                                </div>
                                            </div>
                                            <div class="releative" nz-col nzSpan="12">
                                                <div echarts [options]="chartOption4"
                                                     style="height: 220px;width: 100%"></div>
                                                <div class="posiabsolutStr">
                                                    <p>{{usedStr}}</p>
                                                    <p>%</p>
                                                </div>
                                            </div>
                                        </div>
                                    </nz-collapse-panel>
                                </nz-collapse>
                            </div>
                        </div>
                        <div nz-row style="margin: 30px 0;">
                            <nz-collapse>
                                <nz-collapse-panel [nzHeader]="panel3.name" [nzActive]="panel3.active"
                                                   [nzDisabled]="panel3.disabled">
                                    <div nz-col nzSpan="20">
                                        <div echarts [options]="secondOptionLeft" class="demo-chart"></div>
                                    </div>
                                    <!--<div nz-col nzSpan="8">-->
                                    <!--<div echarts [options]="secondOptionRight" class="demo-chart"></div>-->
                                    <!--</div>-->
                                </nz-collapse-panel>
                            </nz-collapse>
                        </div>
                        <!--<div nz-row>-->
                        <!--<nz-table #basicTable [nzData]="dataSet" [nzFrontPagination]="false" [nzTotal]="totalNumInOut" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="changeInoutInfo($event)" [nzLoading]="inOutLoading">-->
                        <!--<thead>-->
                        <!--<tr>-->
                        <!--<th>状态</th>-->
                        <!--<th>接口</th>-->
                        <!--<th>进流量</th>-->
                        <!--<th>出流量</th>-->
                        <!--<th>状态变更时间</th>-->
                        <!--&lt;!&ndash;<th nzWidth="150px">图表</th>&ndash;&gt;-->
                        <!--</tr>-->
                        <!--</thead>-->
                        <!--<tbody>-->
                        <!--<tr *ngFor="let data of basicTable.data">-->
                        <!--<td>{{data.state}}</td>-->
                        <!--<td>{{data.name}}</td>-->
                        <!--<td>{{data.in}}</td>-->
                        <!--<td>{{data.out}}</td>-->
                        <!--<td>{{data.changeState}}</td>-->
                        <!--&lt;!&ndash;<td>图表</td>&ndash;&gt;-->
                        <!--</tr>-->
                        <!--</tbody>-->
                        <!--</nz-table>-->
                        <!--</div>-->
                    </section>
                </nz-tab>
                <nz-tab nzTitle="监测点列表">
                    <div class="padding-8-0">
                        <input (keyup.enter)="getCheckList()" style="width: 200px;" type="text" nz-input [(ngModel)]="searchName" placeholder="输入监测点名称">
                        <button (click)="getCheckList()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
                    </div>
                    <div class="padding-15-0">
                        <nz-radio-group [(ngModel)]="itemTypeValue" [nzButtonStyle]="'solid'">
                            <label *ngFor="let item of itemTypeList" (click)="changeType(item)" nz-radio-button [nzValue]="item.applicationid">{{item.name}}</label>
                        </nz-radio-group>
                    </div>
                    <nz-table #checkTable [nzData]="checkList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
                        <thead>
                        <tr>
                            <th nzWidth="20%">监测点名称</th>
                            <th nzWidth="10%">最新数据</th>
                            <th nzWidth="15%">最新数据时间</th>
                            <th nzWidth="10%">监测点分类</th>
                            <th nzWidth="10%">更新时间间隔</th>
                            <th nzWidth="5%">图表</th>
                            <th nzWidth="15%">状态</th>
                            <th nzWidth="5%">信息</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of checkTable.data">
                            <td class="tag-form">
                                <ng-container *ngIf="data.status == 0">
                                    <nz-tag *ngIf="data.priority == 4 || data.priority == 5" class="tag-red" [nzColor]="color.red"></nz-tag>
                                    <nz-tag *ngIf="data.priority == 2 || data.priority == 3" class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                                    <ng-container *ngIf="data.priority != 2 && data.priority != 3 && data.priority != 4 && data.priority != 5">
                                        <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
                                    </ng-container>
                                </ng-container>
                                <ng-container *ngIf="data.status == 1">
                                    <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
                                </ng-container>{{data.name}}
                            </td>
                            <td>
                                <span>{{data.lastvalue}}</span>
                            </td>
                            <td>{{data.lastclock}}</td>
                            <td>{{data.itemType}}</td>
                            <td>{{data.delay}}</td>
                            <td class="main-color cursor main-color">
                                <span *ngIf="data.value_type == 0 || data.value_type == 3" (click)="showImageModal(data)">图表</span>
                            </td>
                            <td class="handle cursor main-color">
                                <ng-container *ngIf="!data.flags">
                                    <span (click)="showEditModal(data)">编辑监测点</span>
                                    <span (click)="deleteCheckItem(data)">删除监测点</span>
                                    <br>
                                    <span *ngIf="data.triggerCount == 0" (click)="showAddThresholdModal(data)">添加阈值</span>
                                    <span *ngIf="data.triggerCount > 0" (click)="showEditThresholdModal(data)">编辑阈值</span>
                                </ng-container>
                                <span *ngIf="data.status == 0 && data.state==0" (click)="updateItem(data.itemid,1)" style="color: green">已启用</span>
                                <span *ngIf="data.status == 0 && data.state==1" (click)="updateItem(data.itemid,1)" style="color: red">不支持的</span>
                                <span *ngIf="data.status == 1 && data.state==0" (click)="updateItem(data.itemid,0)" style="color: red">停用的</span>
                                <span *ngIf="data.status == 1 && data.state==1" (click)="updateItem(data.itemid,0)" style="color: green">停用的</span>
                            </td>
                            <td>
                                <ng-container *ngIf="data.error">
                                    <nz-tooltip [nzTitle]="data.error">
                                        <span class="color-red" nz-tooltip><i class="anticon anticon-warning"></i></span>
                                    </nz-tooltip>
                                </ng-container>
                                <ng-container *ngIf="data.info">
                                    <nz-tooltip [nzTitle]="data.info">
                                        <span class="color-yellow" nz-tooltip><i
                                                class="anticon anticon-warning"></i></span>
                                    </nz-tooltip>
                                </ng-container>
                            </td>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-tab>
                <nz-tab #thirdTabs nzTitle="历史告警" >
                    <smart-warn-list #warnList></smart-warn-list>
                </nz-tab>
            </nz-tabset>
        </div>
    </div>
</nz-spin>

<!--监测点-->
<smart-basi-check #smartCheck (done)="getList()"></smart-basi-check>

<!--阈值-->
<smart-threshold #smartThreshold (done)="getList()"></smart-threshold>

<nz-modal [nzFooter]="null" nzWidth="1080" [(nzVisible)]="isGrapha" nzTitle="" (nzOnCancel)="handleImageCancel()">
    <div class="releative">
        <div class="time-select">
            <nz-date-picker [(ngModel)]="imageSelectDate" (ngModelChange)="getGraphDate()"
                            [nzSize]="size"></nz-date-picker>
        </div>
        <div echarts [options]="chartOptionGrapha" style="height: 520px;width: 100%"></div>
    </div>
</nz-modal>
