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;
    noData = false;

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

    isTrendLoading = false;
    chartTrendOption;

    isHistoryLoading = false;
    chartHistoryOption;

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

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

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

    isDiskLoading = false;
    chartDiskOption;
    diskType;

    //风扇
    fanObj = {
        isFanLoading: false,
        fanOption: null,
        noData: false,
        time: 2,
        startTime: '',
        endTime: ''
    };

    //温度
    temObj = {
        isTemLoading: false,
        temOption: null,
        noData: false,
        time: '2',
        startTime: '',
        endTime: ''
    };

    //电压与功率
    powerObj = {
        isPowerLoading: false,
        powerOption: null,
        noData: false,
        time: '2',
        startTime: '',
        endTime: ''
    };

    handware = [
        {'label': '最近一天', value: '2'},
        {'label': '最近7天', value: '4'},
        {'label': '最近30天', value: '5'},
    ];

    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.changeHistory('0');
        this.changeTrend('0');
        this.getDisk();

        this.getFeng();
        this.changePower('2');
        this.changeTemp('2');
        console.log('fang');
    }

    getDetail() {
        const data = {
            hostId: this.hostId,
        };
        this.overAllSer.findDetailed(this.hostId).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.server = res.data[0];
                } else {
                    this.message.error(res.errMsg);
                }
            }
        );
        //内存使用率
        this.overAllSer.used(data).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.used = res.data.used;
                } else {
                    this.hostObj.used = 0;
                }
            }
        );
        //cpu使用率
        this.overAllSer.cupUsed(data).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.cpu = res.data.cpuUsed;
                } 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;
                }
            }
        );
        //响应时间
        this.overAllSer.responseTime(this.hostId).subscribe(
            (res) => {
                if (res.data) {
                    this.hostObj.response = res.data.responseTime;
                } else {
                    this.hostObj.response = 0;
                }
            }
        );
    }

    // 分区
    getDisk() {
        const data = {
            hostId: this.hostId,
        };
        this.isDiskLoading = true;
        //磁盘使用率
        this.overAllSer.disks(data).subscribe(
            (res) => {
                this.hostObj.disk = res.data.disks;
                if (this.hostObj.disk.length > 0) {
                    this.diskType = 0;
                    this.setDiskChart(0);
                    this.noData = false;
                } else {
                    this.noData = true;
                }
            }
        );
    }

    setDiskChart(index) {
        const data = this.hostObj.disk[index];
        this.chartDiskOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: [
                        {value: data.used, name: '已使用'},
                        {value: data.total - data.used, name: '未使用'},
                    ]
                }
            ]
        };
        this.isDiskLoading = false;
    }

    //获取趋势数据
    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: data.map(e => {
                        return e.val;
                    }),
                    type: 'line',
                    name: '',
                }
            ]
        };
        this.isTrendLoading = false;
    }

    //获取历史趋势
    getHistory() {
        const data = {
            type: 'icmpping',
            hostid: this.hostId,
            startTime: this.historyObj.startTime,
            endTime: this.historyObj.endTime
        };
        this.overAllSer.findChartByKey(data).subscribe(
            (res) => {
                this.setHistoryChart(res.data);
            }
        );
    }

    //设置指标趋势
    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: data.map(e => {
                        return e.val;
                    }),
                    type: 'line'
                }
            ]
        };
        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();
    }

    //风扇
    getFeng() {
        this.fanObj.isFanLoading = true;
        const data = {
            hostid: this.hostId
        };
        this.overAllSer.getfan(data).subscribe(
            (res) => {
                if (res.result && res.result.length > 0) {
                    this.fanObj.noData = false;
                    this.setFanOption(res.result);
                } else {
                    this.fanObj.noData = true;
                    this.fanObj.fanOption = null;
                }
                this.fanObj.isFanLoading = false;
            }
        );
    }

    //风扇图表
    setFanOption(data) {
        this.fanObj.fanOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
            },
            yAxis: {
                name: '风扇型号',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                type: 'category',
                data: data.map(e => {
                    return e.name;
                })
            },
            series: [
                {
                    name: '转速',
                    type: 'bar',
                    data: data.map(e => {
                        return e.lastvalue;
                    })
                }
            ]
        };
    }

    //电压与功率时间
    changePower(e) {
        this.powerObj.isPowerLoading = true;
        const timeObj = this.commonSer.getTimeByType(e);
        this.powerObj.startTime = timeObj.startTime;
        this.powerObj.endTime = timeObj.endTime;
        this.getPower();
    }

    //电压与功率
    getPower() {
        const data = {
            type: '2',
            hostid: this.hostId,
            startTime: this.powerObj.startTime,
            endTime: this.powerObj.endTime
        };
        this.overAllSer.getTemperature(data).subscribe(
            (res1) => {
                data.type = '3';
                this.overAllSer.getTemperature(data).subscribe(
                    (res2) => {
                        this.powerObj.isPowerLoading = false;
                        if(!res1.result && !res1.result){
                            this.powerObj.noData = true;
                        }else{
                            if (  res1.result.length == 0 && res2.result.length) {
                                this.powerObj.noData = true;
                            } else {
                                this.setPowerOption(res1.result, res2.result);
                                this.powerObj.noData = false;
                            }
                        }
                    }
                );
            }
        );

    }

    setPowerOption(data1, data2) {
        this.powerObj.powerOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['电压', '功率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                boundaryGap: false,
                data: data1.map(e => {
                    return e.date;
                })
            },
            yAxis: {
                name: '电压/功率',
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
            },
            series: [
                {
                    name: '电压',
                    type: 'line',
                    stack: '总量',
                    data: data1.map(e => {
                        return e.value;
                    })
                },
                {
                    name: '功率',
                    type: 'line',
                    stack: '总量',
                    data: data2.map(e => {
                        return e.value;
                    })
                }
            ]
        };

    }

    //温度
    changeTemp(e) {
        this.temObj.isTemLoading = true;
        const timeObj = this.commonSer.getTimeByType(e);
        this.temObj.startTime = timeObj.startTime;
        this.temObj.endTime = timeObj.endTime;
        this.getTemp();
    }

    //温度
    getTemp() {
        const data = {
            type: '1',
            hostid: this.hostId,
            startTime: this.temObj.startTime,
            endTime: this.temObj.endTime
        };
        this.overAllSer.getTemperature(data).subscribe(
            (res) => {
                if (res.result && res.result.length > 0) {
                    this.temObj.noData = false;
                    this.setTemOption(res.result);
                } else {
                    this.temObj.noData = true;
                    this.temObj.temOption = null;
                }
                this.temObj.isTemLoading = false;
            }
        );
    }

    setTemOption(data) {
        this.temObj.temOption = {
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
                type: 'category',
                data: data.map(e => {
                    return e.date;
                })
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                name: '温度',
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#b6d0f0',
                    }
                },
            },
            series: [{
                data: data.map(e => {
                    return e.value;
                }),
                type: 'line'
            }]
        };

    }

}
