<div>
    <nz-row>
        <nz-col nzSpan="12">
            <div class="padding-10" style="height: 20%;">
                <p class="host-item-title">关键指标</p>
                <div class="host-item-content" style="height:100%">
                    <nz-row>
                        <nz-col nzSpan="12">
                            <p style="text-align: center">cpu利用率</p>
                            <div class="width-host">
                                <div class="space" [style.width]="this.hostObj.cpu + '%'"></div>
                            </div>
                        </nz-col>
                        <nz-col nzSpan="12">
                            <p style="text-align: center;color: #b7d1f1;">内存使用率</p>
                            <div class="width-host">
                                <div class="space" [style.width]="this.hostObj.used + '%'"></div>
                            </div>
                        </nz-col>
                    </nz-row>
                </div>
            </div>
            <div class="padding-10" style="height: 40%;position: relative">
                <p class="host-item-title">分区</p>
                <div class="time-group" style="top: 18px;">
                    <nz-select style="width: 150px;" nzPlaceHolder="选择磁盘" (ngModelChange)="setDiskChart($event)"
                               [(ngModel)]="diskType">
                        <ng-container *ngFor="let disk of hostObj.disk;let i = index;">
                            <nz-option [nzLabel]="disk.name" [nzValue]="i"></nz-option>
                        </ng-container>
                    </nz-select>

                </div>
                <div class="host-item-content" style="height: 300px;">
                    <ng-container *ngIf="noData">
                        <div class="img-noData" style="min-height: 400px">
                            <div class="noData" title="暂无数据"></div>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="hostObj.disk.length > 0">
                        <nz-spin [nzSpinning]="isDiskLoading">
                            <div echarts [options]="chartDiskOption" style="height: 150px;width: 100%"></div>
                            <div class="text-center margin-bottom-10">
                                <span style="border: 1px solid #d8c5c5;padding: 4px 8px;border-radius: 3px;">{{hostObj.disk[diskType].name}}</span>
                            </div>
                            <nz-row>
                                <nz-col nzSpan="12">总大小：</nz-col>
                                <nz-col nzSpan="12">{{hostObj.disk[diskType].total | unitConversion}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="12">已用大小：</nz-col>
                                <nz-col nzSpan="12">{{hostObj.disk[diskType].used | unitConversion}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="12">剩余容量：</nz-col>
                                <nz-col nzSpan="12">{{(hostObj.disk[diskType].total - hostObj.disk[diskType].used) | unitConversion }}</nz-col>
                            </nz-row>
                        </nz-spin>
                    </ng-container>
                </div>
            </div>
            <div class="padding-10" style="height: 40%;">
                <nz-row>
                    <nz-col class="padding-right-10" nzSpan="12">
                        <p class="host-item-title">基本信息</p>
                        <div class="host-item-content" style="height: 300px;">

                            <nz-row>
                                <nz-col nzSpan="8">资源状态：</nz-col>
                                <nz-col nzSpan="16">{{server?.waringName}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">名称：</nz-col>
                                <nz-col nzSpan="16">{{server?.name}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">IP地址：</nz-col>
                                <nz-col nzSpan="16">{{server?.host || '-'}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">设备类型：</nz-col>
                                <nz-col nzSpan="16">{{equipmentType || '-'}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">资产编号：</nz-col>
                                <nz-col nzSpan="16">{{server?.inventory?.inventoryNo || '-'}}</nz-col>

                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="8">负责人：</nz-col>
                                <nz-col nzSpan="16">{{server?.inventory?.person || '-'}}</nz-col>
                            </nz-row>
                        </div>
                    </nz-col>
                    <nz-col class="padding-left-10" nzSpan="12">
                        <p class="host-item-title">指标列表</p>
                        <div class="host-item-content" style="height: 300px;">
                            <nz-row>
                                <nz-col nzSpan="16">CPU利用率(%)：</nz-col>
                                <nz-col nzSpan="8">{{hostObj.cpu || '-'}}</nz-col>
                            </nz-row>

                            <nz-row>
                                <nz-col nzSpan="16">Ping延时(ms)：</nz-col>
                                <nz-col nzSpan="8">{{hostObj.response || '-'}}</nz-col>
                            </nz-row>
                            <nz-row>
                                <nz-col nzSpan="16">内存利用率(%)：</nz-col>
                                <nz-col nzSpan="8">{{hostObj.used || '-'}}</nz-col>
                            </nz-row>

                        </div>
                    </nz-col>
                </nz-row>
            </div>
        </nz-col>
        <nz-col nzSpan="12">
            <div class="padding-10" style="height: 50%;position: relative">
                <div class="time-group" style="top: 18px;">
                    <nz-select style="width: 150px;" nzPlaceHolder="选择指标"
                               (ngModelChange)="changeTrend(trendObj.type)" [(ngModel)]="trendObj.type">
                        <ng-container *ngFor="let flow of targetFlow">
                            <nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
                        </ng-container>
                    </nz-select>
                    <nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="timeTypeTrend"
                               (ngModelChange)="changeTrend($event)">
                        <ng-container *ngFor="let time of timeList">
                            <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div class="host-item-title">
                    指标趋势
                </div>
                <div class="host-item-content">
                    <nz-spin [nzSpinning]="isTrendLoading">
                        <div echarts [options]="chartTrendOption" style="height:360px;width: 100%"></div>
                    </nz-spin>
                </div>
            </div>
            <div class="padding-10" style="height: 50%;position: relative">
                <div class="host-item-title">
                    可用性历史趋势
                </div>
                <div class="time-group" style="top: 18px;">
                    <nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="timeTypeHistory"
                               (ngModelChange)="changeHistory($event)">
                        <ng-container *ngFor="let time of timeList">
                            <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div class="host-item-content">
                    <nz-spin [nzSpinning]="isHistoryLoading">
                        <div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div>
                    </nz-spin>
                </div>
            </div>
        </nz-col>
    </nz-row>
</div>
