import {Component, OnInit, OnChanges, ViewChild, ElementRef} from '@angular/core';
import {OverAllService} from '../../overAll.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {DatePipe} from '@angular/common';

@Component({
    selector: 'smart-network-detail',
    templateUrl: './network-detail.component.html',
    styles: [
            `
            .chart-div {
                border: 1px solid #dadada;
                margin-top: 20px;
                padding: 10px;
            }

            .chart-left{
                margin-left: 20px;
            }

            .chart-left p{
                margin-left: 20px;
            }
        `
    ]
})
export class NetworkDetailComponent implements OnInit, OnChanges {
    @ViewChild('chartSpeedLeft') chartSpeedLeft:ElementRef;
    @ViewChild('chartTimeLeft') chartTimeLeft:ElementRef;

    httptestid;  //网站ID
    webName;  //网站名称
    alarmList;
    colorArr = ['#f36969', '#02c8cf', '#eaaa00', '#61a600', '#4484d4'];

    nowStatus;
    triggerList;
    chart;

    //图表
    isSpinning = false;
    chartSpeed;
    speed;
    chartTime;
    time;
    timeType;
    obj = {
        startTime: '',
        endTime: ''
    };

    constructor(private overAllSer: OverAllService, private routerInfo: ActivatedRoute,
                private message: NzMessageService, private datePipe: DatePipe) {
    }

    ngOnInit() {
        this.timeType = '1';
        this.routerInfo.queryParams.subscribe(
            (queryParams) => {
                this.httptestid = queryParams.httptestid;
                this.webName = queryParams.name;
            }
        );
        this.findAlertList();
        this.findTrigger();
        this.changeType();
        this.getNowStatus();
    }

    ngOnChanges(){
        console.log()
    }

    //历史告警
    findAlertList() {
        const data = {
            httptestid: this.httptestid
        };
        this.overAllSer.findAlert(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.alarmList = res.data.data;
                }
            }
        );
    }

    //当前状态
    getNowStatus() {
        this.overAllSer.findCurrentState(this.httptestid).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.nowStatus = res.data;
                }
            }
        );
    }

    //阈值设定
    findTrigger() {
        this.overAllSer.findTrigger(this.httptestid).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.triggerList = res.data;
                } else {
                    this.message.info(res.errMsg);
                }
            }
        );
    }

    //选择时间
    //时间改变
    changeType() {
        this.isSpinning = true;
        const nowDate = new Date().getTime();
        let day1, day2;
        switch (this.timeType) {
            case'1': {
                this.obj.startTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 00:00:00';
                this.obj.endTime = this.datePipe.transform(nowDate, 'yyyy-MM-dd') + ' 23:59:59';
                break;
            }
            case'2': {
                day1 = nowDate - 1 * 24 * 60 * 60 * 1000;
                this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
                this.obj.endTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 23:59:59';
                break;
            }
            case'3': {
                day1 = nowDate - 3 * 24 * 60 * 60 * 1000;
                day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
                this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
                this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
                break;
            }
            case'4': {
                day1 = nowDate - 7 * 24 * 60 * 60 * 1000;
                day2 = nowDate - 1 * 24 * 60 * 60 * 1000;
                this.obj.startTime = this.datePipe.transform(day1, 'yyyy-MM-dd') + ' 00:00:00';
                this.obj.endTime = this.datePipe.transform(day2, 'yyyy-MM-dd') + ' 23:59:59';
                break;
            }
            case'5': {
                break;
            }
        }
        this.findChart();
    }

    //监测图表
    findChart() {
        const data = {
            startTime: this.obj.startTime,
            endTime: this.obj.endTime,
            limit: '',
            httptestid: this.httptestid
        };
        this.overAllSer.findChart(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    const speed = res.data.speed;
                    this.speed = res.data.speed;
                    const time = res.data.time;
                    this.time = res.data.time;
                    this.setOption(speed, time);
                }
            }
        );
    }

    //绘制图表
    setOption(speed, time) {
        this.chartSpeed = {
            title: {
                text: '速度',
                left: '40%',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        show: false
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: speed[0].data.map(res => {
                    return res.clockDate;
                })
            },
            yAxis: {
                type: 'value'
            },
            series: speed.map((res1,index) => {
                const number = res1.data.map(res2 => {
                    return res2.num;
                });
                const obj = {
                    name: res1.name,
                    type: 'line',
                    stack: '总量',
                    itemStyle : {
                        normal : {
                            lineStyle:{
                                color:this.colorArr[index]
                            }
                        }
                    },
                    data: number
                };
                return obj;
            })
        };

        this.chartTime = {
            title: {
                text: '响应时间',
                left: '40%',
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        show: false
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time[0].data.map(res => {
                    return res.clockDate;
                })
            },
            yAxis: {
                type: 'value'
            },
            series: time.map((res1,index) => {
                const number = res1.data.map(res2 => {
                    return res2.num;
                });
                const obj = {
                    name: res1.name,
                    type: 'line',
                    stack: '总量',
                    itemStyle : {
                        normal : {
                            lineStyle:{
                                color:this.colorArr[index]
                            }
                        }
                    },
                    data: number
                };
                return obj;
            })
        };

        this.isSpinning = false;
    }
}
