import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../../shared/common/common.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {OverAllService} from '../../overAll.service';
import {HostComponent} from '../../host.component';
import {HostFlow} from '../../../app.constants';

@Component({
    selector: 'smart-server',
    templateUrl: './server.component.html',
    styles: []
})
export class ServerComponent implements OnInit {

    hostId;  //主机ID
    equipmentType;  //主机类型
    server;

    targetFlow = HostFlow;   //主机指标
    timeList = [
        {'label': '最近一小时', value: '0'},
        {'label': '最近一天', value: '2'},
        {'label': '最近三天', value: '3'},
        {'label': '最近一周', value: '4'},
    ];
    timeTypeTrend;
    timeTypeHistory;

    isTrendLoading = false;
    chartTrendOption;

    isHistoryLoading = false;
    chartHistoryOption;

    trendObj = {   //指标趋势
        type: 'total_flow',
        startTime: '',
        endTime: ''
    };

    historyObj = {
        startTime: '',
        endTime: ''
    };

    hostObj = {
        disk: null,
        used: null,
        cpu: null,
        losed: null,
    };

    constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
                private message: NzMessageService, private overAllSer: OverAllService,
                private hostCom: HostComponent) {
        this.routerInfo.queryParams.subscribe(queryParams => {
            this.hostId = queryParams.hostId;
            this.equipmentType = queryParams.equipmentType;
        });
    }

    ngOnInit() {
        this.getDetail();
        this.getTrend();
    }

    getDetail() {
        const data = {
            hostId: this.hostId,
        };
        this.overAllSer.findDetailed(this.hostId).subscribe(
            (res) => {
                this.server = res.data[0];
            }
        );
        //磁盘使用率
        this.overAllSer.disks(data).subscribe(
            (res) => {
                this.hostObj.disk = res.data;
            }
        );
        //内存使用率
        this.overAllSer.used(data).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.used = res.data;
                } else {
                    this.hostObj.used = 0;
                }
            }
        );
        //cpu使用率
        this.overAllSer.cupUsed(data).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.cpu = res.data;
                } else {
                    this.hostObj.cpu = 0;
                }
            }
        );
        //丢包率
        this.overAllSer.losed(this.hostId).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.losed = res.data.losed;
                } else {
                    this.hostObj.losed = 0;
                }
            }
        );
    }

    //获取趋势数据
    getTrend() {
        const data = {
            type: this.trendObj.type,
            hostid: this.hostId,
            startTime: this.trendObj.startTime,
            endTime: this.trendObj.endTime
        };
        this.overAllSer.findChartByKey(data).subscribe(
            (res) => {
                this.setTrendChart(res.data);
            }
        );
    }

    //设置指标趋势
    setTrendChart(data) {
        this.chartTrendOption = {
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                data: data.map(e => {
                    return e.time;
                })
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                type: 'value'
            },
            series: data.map(e => {
                return e.value;
            })
        };
        this.isTrendLoading = false;
    }

    //获取历史趋势
    getHistory() {

    }

    //设置指标趋势
    setHistoryChart(data) {
        this.chartHistoryOption = {
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                data: data.map(e => {
                    return e.time;
                })
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                type: 'value'
            },
            series: data.map(e => {
                return e.value;
            })
        };
        this.isHistoryLoading = false;
    }

    changeTrend(e){
        this.isTrendLoading = true;
        const timeObj = this.commonSer.getTimeByType(e);
        this.trendObj.startTime = timeObj.startTime;
        this.trendObj.endTime = timeObj.endTime;
        this.getTrend();
    }

    changeHistory(e){
        this.isHistoryLoading = true;
        const timeObj = this.commonSer.getTimeByType(e);
        this.historyObj.startTime = timeObj.startTime;
        this.historyObj.endTime = timeObj.endTime;
        this.getHistory();
    }

}
