import {Component, OnInit, OnChanges, ViewChild, ElementRef} from '@angular/core';
import {OverAllService} from '../../overAll.service';
import {ActivatedRoute, Router} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {DatePipe, Location} from '@angular/common';
import {WebsiteComponent} from '../../../modal/website/website.component';
import {CommonService} from '../../../shared/common/common.service';

@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 {
    @ViewChild('chartSpeedLeft') chartSpeedLeft: ElementRef;
    @ViewChild('chartTimeLeft') chartTimeLeft: ElementRef;
    @ViewChild('smartWebsite') smartWebsite: WebsiteComponent;

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

    nowStatus;
    triggerList;
    chart;

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

    totalNum = 0;

    constructor(private overAllSer: OverAllService, private routerInfo: ActivatedRoute, private router: Router,
                private message: NzMessageService, private datePipe: DatePipe, private commonSer: CommonService,
                public location:Location
                ) {
    }

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

    //历史告警
    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.data;
                    this.totalNum = res.data.total;
                }
            }
        );
    }

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

    //选择时间
    //时间改变
    changeType() {
        this.isSpinning = true;
        if(this.timeType =='99') return ;
        this.obj.startTime = this.commonSer.getTimeByType(this.timeType).startTime;
        this.obj.endTime = this.commonSer.getTimeByType(this.timeType).endTime;
        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',
                formatter: (params) => {
                    if (params.data) {
                        let res = params.seriesName;
                        res += '<br/>时间：' + params.name;
                        let Gbps = 1000 * 1000 * 1000;
                        let Mbps = 1000 * 1000;
                        let kbps = 1000;
                        let size = Math.abs(params.data);
                        if (size / Gbps > 1) {
                            res += '<br/>流量：' + (size / Gbps).toFixed(2) + 'Gbps';
                        } else if (size / Mbps > 1) {
                            res += '<br/>流量：' + (size / Mbps).toFixed(2) + 'Mbps';
                        } else if (size / kbps > 1) {
                            res += '<br/>流量：' + (size / kbps).toFixed(2) + 'kbps';
                        } else {
                            res += '<br/>流量：' + (size) + 'bps';
                        }
                        return res;
                    }
                }
            },
            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.date;
                }),
            },
            yAxis: {
                type: 'value',
                axisLabel: {   //Y轴数据
                    formatter: function(value) {
                        return Math.abs(value) / 1000 + ' kbps';
                    },
                    textStyle: {
                        color: '#666'
                    }
                },
            },
            series: speed.map((res1, index) => {
                const number = res1.data.map(res2 => {
                    return res2.val;
                });
                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',
                formatter: (params) => {
                    if (params.data) {
                        let res = params.seriesName;
                        res += '<br/>时间：' + params.name;
                        res += '<br/>相应时间：' + params.data+'s';
                        return res;
                    }
                }
            },
            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.date;
                })
            },
            yAxis: {
                type: 'value',
                axisLabel: {   //Y轴数据
                    formatter: function(value) {
                        return value + ' s';
                    },
                    textStyle: {
                        color: '#666'
                    }
                },
            },
            series: time.map((res1, index) => {
                const number = res1.data.map(res2 => {
                    return res2.val;
                });
                const obj = {
                    name: res1.name,
                    type: 'line',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: this.colorArr[index]
                            }
                        }
                    },
                    data: number
                };
                return obj;
            })
        };

        this.isSpinning = false;
    }

    //编辑网站
    editBasicModal() {
        this.smartWebsite.showEditModal(this.httptestid);
    }

    //单个删除
    showDeleteConfirm() {
        this.commonSer.confirmThing('删除', '确认要删除该网站监测吗', () => {
            let arr = [];
            arr.push(this.httptestid);
            const data = {
                ids: arr
            };
            this.overAllSer.deleteBatch(data).subscribe(
                (res) => {
                    if (res.errCode == 10000) {
                        this.message.success('删除成功');
                        this.router.navigate(['app/main/networkCheck']);
                    }
                }
            );
        });
    }
    //返回
    returnBack(){
        this.location.back();
    }
}
