import {AfterViewInit, Component, ElementRef, OnInit, Renderer, ViewChild,} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {OverAllService} from '../../overAll.service';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {NzMessageService} from 'ng-zorro-antd';
import {BasiCheckComponent} from '../../../modal/basi-check/basi-check.component';
import {NzModalService} from 'ng-zorro-antd';
import {color, pageSize} from '../../../app.constants';
import {WarnListComponent} from '../../../modal/warn-list/warn-list.component';
import {DatePipe} from '@angular/common';
import {ThresholdComponent} from '../../../modal/threshold/threshold.component';

@Component({
    selector: 'jhi-basic-detail',
    templateUrl: './basic-detail.component.html',
    styles: [
            `
            .checkTags {
                position: absolute;
                top: 12px;
                left: 233px;
                z-index: 989;
            }
            .time-select{
                position: absolute;
                top: 55px;
                right: 15px;
                z-index: 999;
            }
            .select-border{
                border: 1px solid #6097b7;
                border-radius: 5px;
                padding: 2px;
                margin-right: 5px;
            }
            :host ::ng-deep .tabs-smart .ant-tabs-nav-scroll div.ant-tabs-tab:nth-child(3){
                margin-right: 180px !important;
            }
            :host ::ng-deep .ant-radio-button-wrapper{
                margin: 4px;
            }
        `
    ]
})
export class BasicDetailComponent implements OnInit, AfterViewInit {
    @ViewChild('smartCheck') smartCheck: BasiCheckComponent;
    @ViewChild('smartThreshold') smartThreshold: ThresholdComponent;
    @ViewChild('thirdTabs') thirdTabs: ElementRef;
    @ViewChild('warnList') warnList: WarnListComponent;
    @ViewChild('colorEle') colorEle:ElementRef;
    @ViewChild('checkEle') checkEle:ElementRef;
    color = color;
    loading = false;
    hostId: string;
    tabNum = 0;
    hostName;
    realName;
    size = 'default';
    changeStates;
    chartOption1;
    responseTimeStr;
    losedStr;
    cpuUsedStr;
    usedStr;
    chartOption2;
    chartOption3;
    chartOption4;
    secondOptionLeft;
    secondOptionRight;
    dataSet: any[];
    panel1 = {active: true, name: '响应时间与丢包率', disabled: false};
    panel2 = {active: true, name: 'CPU使用率及内存使用率',disabled: false};
    panel3 = {active: true, name: '磁盘使用情况', disabled: false};

    //监控点
    isBasicEdit;
    itemTypeValue;
    interfaceList: any[];
    itemTypeList: any[];

    //
    checkList: any[];
    isCheck = false;
    checkStatus = {
        warning: null,
        normal: null,
        disabled: null,
        high: null
    };

    isKey = false;
    keyList: any[];
    keyType = '1';

    //图表
    isGrapha = false;
    selectGraphadata;
    chartOptionGrapha;
    imageSelectDate = new Date();

    pageSize = pageSize;

    //分页--监控点
    pageIndex = 1;  //当前页数
    totalNum;   //总数据长度
    applicationId;    //分类ID

    //进出口流量-分页
    pageNum = 1;
    pageCount = 5;
    totalNumInOut;
    inOutLoading;

    //分页--告警
    warn_totalNum;
    warn_pageNum = 1;

    searchName;

    validateForm: FormGroup;

    isSpinning;  //刷新
    units;   //图表单位

    constructor(private routerInfo: ActivatedRoute, private message: NzMessageService,
                private overAllSer: OverAllService, private renderer: Renderer,private router:Router,
                private fb: FormBuilder, private modalService: NzModalService,private datePipe:DatePipe) {
        this.routerInfo.queryParams.subscribe(queryParams => {
            this.hostId = queryParams.hostId;
            this.overAllSer.findDetailed(this.hostId).subscribe(
                (res)=>{
                    let data = res.data[0]
                    this.hostName = data.name;   //显示名
                    this.realName = data.host;   //主机名
                }
            )
        });
    }

    ngOnInit() {
    }

    ngAfterViewInit() {
    }

}
