import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../topology.service';
import {OverAllService} from '../../overAll/overAll.service';
import {NzMessageService} from 'ng-zorro-antd';
import {pageSize} from '../../app.constants';
import {DatePipe} from '@angular/common';

declare var vis: any;

@Component({
    selector: 'smart-flow-trend',
    templateUrl: './flow-trend.component.html',
    styles: []
})
export class FlowTrendComponent implements OnInit {
    groupList;
    hostList;
    obj = {
        groupid:null,
        hostid: null,
        startTime: '',
        endTime: ''
    };

    //in
    inList = [];
    inPageNum = 1;
    inPageCount = '5';
    inTotalNum;
    inLoading;

    //out
    outList = [];
    outPageNum = 1;
    outPageCount = '5';
    outTotalNum;
    outLoading;

    timeType = "1";
    timeBegin;
    timeEnd;

    //图表
    chartOption;

    constructor(private topologySer: TopologyService, private overAllSer: OverAllService,
                private message: NzMessageService,private datePipe:DatePipe) {
    }

    ngOnInit() {
        const today = new Date().getTime();
        this.obj.startTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 00:00:00";
        this.obj.endTime = this.datePipe.transform(today,"yyyy-MM-dd") + " 23:59:59";
    }

    //获取分组
    getGroup() {
        this.overAllSer.getgroups({}).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.groupList = res.data;
                }
            }
        );
    }

    //查询主机
    onchange() {
        const data = {
            'groupids': [this.obj.groupid],
            'hostExtend': {
                'superiorHostid': null
            }
        };
        this.overAllSer.findDetail(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.hostList = res.data;
                    this.obj.hostid = this.hostList[0].hostList;
                    this.getEcharts(null);
                }
            }
        );
    }

    //获取图标数据
    getEcharts(itemid) {
        const  data= {
            itemid: itemid,
            endTime: this.obj.endTime,
            startTime: this.obj.startTime,
            hostid:this.obj.hostid,
            groupid:this.obj.groupid,
            type:'in',
        };
        this.topologySer.findTrendData(data).subscribe(
            (res) => {
                if(res.errCode == 10000){
                    data.type = "out";
                    this.topologySer.findTrendData(data).subscribe(
                        (res)=>{
                            this.setEacharts();
                        }
                    )
                }else{
                    this.message.warning(res.errMsg);
                }
            }
        );
    }

    //
    setEacharts(){

        let xAxisData = [];
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let data4 = [];

        for (let i = 0; i < 10; i++) {
            xAxisData.push('Class' + i);
            data1.push((Math.random() * 2).toFixed(2));
            data2.push(-Math.random().toFixed(2));
            data3.push((Math.random() * 5).toFixed(2));
            data4.push((Math.random() + 0.3).toFixed(2));
        }

        let itemStyle = {
            normal: {
            },
            emphasis: {
                barBorderWidth: 1,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        };

         this.chartOption = {
            backgroundColor: '#eee',
            tooltip: {},
            xAxis: {
                data: xAxisData,
                name: 'X Axis',
                silent: false,
                axisLine: {onZero: true},
                splitLine: {show: false},
                splitArea: {show: false}
            },
            yAxis: {
                inverse: true,
                splitArea: {show: false}
            },
            grid: {
                left: 100
            },
            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    data: data1
                },
                {
                    name: 'bar2',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: itemStyle,
                    data: data2
                },
                {
                    name: 'bar3',
                    type: 'bar',
                    stack: 'two',
                    itemStyle: itemStyle,
                    data: data3
                },
                {
                    name: 'bar4',
                    type: 'bar',
                    stack: 'two',
                    itemStyle: itemStyle,
                    data: data4
                }
            ]
        };

         console.log(this.chartOption);
    }

    //获取流量
    getList() {
        this.obj.hostid = null;
        this.onchange();
        this.getInList();
        this.getOutList();
    }

    getListIO(){
        this.getInList();
        this.getOutList();
    }

    //in改变页数
    inChnagePage(e){
        this.inPageNum = e;
        this.getInList();
    }

    //out改变页数
    outChnagePage(e){
        this.outPageNum = e;
        this.getOutList();
    }

    //进口流量
    getInList() {
        this.inLoading = true;
        const data = {
            obj:{
                type: 'in',
                hostid: this.obj.hostid,
                startTime: this.obj.startTime,
                endTime: this.obj.endTime,
                groupid:this.obj.groupid
            },
            pageNum: this.inPageNum,
            pageCount: this.inPageCount,
        };
        this.topologySer.findTrend(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.inList = res.data.data;
                    this.inTotalNum = res.data.totalNum;
                } else {
                    this.message.warning(res.errMsg);
                }
                this.inLoading = false;
            }
        );
    }

    //出口流量
    getOutList() {
        this.outLoading = true;
        const data = {
            obj: {
                type:'out',
                hostid: this.obj.hostid,
                startTime: this.obj.startTime,
                endTime: this.obj.endTime,
                groupid:this.obj.groupid
            },
            pageNum: this.outPageNum,
            pageCount: this.outPageCount,

        };
        this.topologySer.findTrend(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.outList = res.data.data;
                    this.outTotalNum = res.data.totalNum;
                } else {
                    this.message.warning(res.errMsg);
                }
                this.outLoading = false;
            }
        );
    }

    //时间改变
    changeType(){
        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;
            }
        }
    }

    //搜索
    search(){
      if(this.timeType == '5'){
          this.obj.startTime = this.datePipe.transform(this.timeBegin,'yyyy-MM-dd HH:mm:ss');
          this.obj.endTime = this.datePipe.transform(this.timeEnd,'yyyy-MM-dd HH:mm:ss');
      }
      this.getEcharts(null);
      this.getInList();
      this.getOutList();
    }

}
