<div>
    <nz-row>
        <nz-col nzSpan="12">
            <div>
                <nz-row>
                    <nz-col class="padding-10" nzSpan="12">
                        <p class="host-item-title">数据库</p>
                        <nz-row class="padding-15 host-item-content">
                            <ng-container *ngFor="let database of databaseList">
                                <nz-col nzSpan="8" class="text-center">
                                    <img src="../../../../content/images/database.png">
                                </nz-col>
                                <nz-col nzSpan="16">
                                    <p><span class="database-name">{{database.name}}</span></p>
                                    <nz-row class="margin-top-8">
                                        <nz-col class="gray-font-color text-right" nzSpan="8">大小：</nz-col>
                                        <nz-col class="blue-font-color"
                                                nzSpan="16">{{database.storageSize}}</nz-col>
                                        <nz-col class="gray-font-color text-right" nzSpan="8">版本：</nz-col>
                                        <nz-col class="blue-font-color" nzSpan="16">{{database.version}}</nz-col>
                                    </nz-row>
                                </nz-col>
                            </ng-container>
                        </nz-row>
                    </nz-col>
                    <nz-col class="padding-10" nzSpan="12">
                        <p class="host-item-title">指标列表</p>
                        <div class="host-item-content">
                            <nz-row>
                                <ng-container *ngFor="let item of databaseDetail">
                                    <nz-col nzSpan="14">{{item.name}}：</nz-col>
                                    <nz-col nzSpan="10">{{item.val}}</nz-col>
                                </ng-container>
                            </nz-row>
                        </div>
                    </nz-col>
                </nz-row>
            </div>
        </nz-col>
        <nz-col class="padding-10" nzSpan="12">
            <div class="host-item-title">
                告警总数趋势
            </div>
            <div class="host-item-content">
                <nz-radio-group class="time-group" [(ngModel)]="timeTypeFlow" (ngModelChange)="changeTypeFlow()">
                    <label nz-radio-button nzValue="3">三天</label>
                    <label nz-radio-button nzValue="4">一周</label>
                    <label nz-radio-button nzValue="5">一月</label>
                </nz-radio-group>
                <nz-spin [nzSpinning]="isFlowLoading">
                    <div echarts [options]="charTrendOption" style="height: 400px;width: 100%"></div>
                </nz-spin>
            </div>
        </nz-col>
        <nz-col class="padding-10" nzSpan="12">
            <div class="host-item-content">
                <nz-row>
                    <nz-col nzSpan="4" style="position: relative;height: 380px;">
                        <div class="dataChart">
                            <p>MTTR</p>
                            <p class="text-right">{{indexDetail?.mttr + 'h'}}</p>
                            <p>MTBF</p>
                            <p class="text-right">{{indexDetail?.mtbf + 'h'}}</p>
                            <p>MTTF</p>
                            <p class="text-right">{{indexDetail?.mttf + 'h'}}</p>
                            <p>最近一次宕机时间</p>
                            <p class="text-right">{{indexDetail?.downTime}}</p>
                            <p>宕机次数</p>
                            <p class="text-right">{{indexDetail?.downCount}}</p>
                        </div>
                    </nz-col>
                    <nz-col nzSpan="20" class="padding-left-10" style="position: relative;">
                        <div>
                            <nz-select class="time-group" nzPlaceHolder="选择分组"
                                       (ngModelChange)="changeTypeDatabase()" [(ngModel)]="timeTypeDatabase">
                                <nz-option nzLabel="最近一小时" nzValue="0"></nz-option>
                                <nz-option nzLabel="最近一天" nzValue="2"></nz-option>
                                <nz-option nzLabel="最近三天" nzValue="3"></nz-option>
                                <nz-option nzLabel="最近一周" nzValue="4"></nz-option>
                            </nz-select>
                        </div>
                        <nz-spin [nzSpinning]="isDatabaseLoading">
                            <div echarts [options]="chartDatabaseOption" style="height: 360px;width: 100%"></div>
                        </nz-spin>
                    </nz-col>
                </nz-row>
            </div>
        </nz-col>
        <nz-col class="padding-10" nzSpan="12">
            <div class="host-item-table" style="height: 400px">
                <nz-row class="text-center table-title">
                    <nz-col nzSpan="8">监测点信息</nz-col>
                    <nz-col nzSpan="8">告警信息</nz-col>
                    <nz-col nzSpan="8">产生时间</nz-col>
                </nz-row>
                <ng-container *ngFor="let event of eventList;">
                    <nz-row class="table-content">
                        <nz-col nzSpan="8">{{event.itemName}}</nz-col>
                        <nz-col nzSpan="8">{{event.description}}</nz-col>
                        <nz-col nzSpan="8">{{event.clock}}</nz-col>
                    </nz-row>
                </ng-container>
            </div>
        </nz-col>
    </nz-row>
</div>
