import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { HomesService } from '../homes.service';
import { slideToRight } from '../animates';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less'],
  animations: [ slideToRight ]
})
export class HomeComponent implements OnInit {
  @HostBinding('@routerAnimate') routerAnimateState;

  constructor(private myhttp: HomesService) { }

  ngOnInit() {
    this.getSourceNames();
    this.getHomeServiceData();
    this.getHomePerformanceData();
    this.getHomeAlarmData();
    this.getHomeAlarmChartData();
  }
  

  // services
  serviceNumber:number = 0;
  serviceChartData:Object;
  serviceChartInit:Object = {
    height: 300,
    option:{
      legend: {
        orient: 'vertical',
        left: '0px',
        bottom: '0px',
        data: ['Active','Closed']
      },
      color:["#3fa8eb","#1abb9b","#a4ead7"],
      series:[{
        name:"服务信息",
        radius : ['45%','65%'],
        avoidLabelOverlap: false,
        label:{
          normal:{
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            formatter:'{b}\n{c}',
            textStyle: {
                fontSize: '20',
                fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
              show: false
          }
        },        
      }]
    }
  };
  // gethomeServiceData
  getHomeServiceData(){
    this.myhttp.getHomeServiceData()
    .subscribe(
      (data)=>{
        // console.log(data);
        this.serviceNumber = data.serviceTotalNum;
        this.serviceChartData = {
          series:[{data:data.customerServiceList}]
        };
        // console.log(this.serviceChartData);
      },
      (err)=>{
        console.log(err);
      }
    )
  }

  // performance
  performanceVnfNum = 0;
  performanceVmNum = 0;
  getHomePerformanceData(){
    this.myhttp.getHomePerformanceData()
      .subscribe((data)=>{
        this.performanceVnfNum = data.length;
      })
  }

  // alarm饼图
  alarmChartData:Object;
  alarmChartInit:Object = {
    height: 164,
    option:{
      legend: {
        orient: 'vertical',
        left: '0px',
        bottom: '0px',
        data: ['Active','Closed']
      },
      color:["#fb6e6e","#526b75"],
      series:[{
        name:"告警信息",
        radius : '55%',
        label:{
          normal:{
            show: false,
          },
          emphasis: {
            show: true,
            formatter:'{b}\n{c},{d}%',
          }
        }
      }]
    }
  };
  getHomeAlarmData(){
    this.myhttp.getHomeAlarmData()
      .subscribe((data)=>{
        this.alarmChartData ={
          series:[{
            data:[{name:"Active",value:data[0]},{name:"Closed",value:data[1]}]
          }]
        };
      })
  }

  // alarm线图
  alarmLineChartData:Object;
  alarmLineChartInit:Object = {
    height:320,
    option:{
      legend: {
        bottom: '0px',
        data: ['All','Active','Closed']
      },
      xAxis:{
        data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14",
        "2018-09-15","2018-09-16","2018-09-17","2018-09-18","2018-09-19",
        "2018-09-20","2018-09-21","2018-09-22"]
      },
      series : [
        {
            name: 'All',
            type: 'line',
            data:[30,45,34,35,43,56,36,53,42,45,44,35,32]
        },
        {
            name: 'Active',
            type: 'line',
            data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
        },
        {
          name: 'Closed',
          type: 'line',
          data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
        }
      ]
    }
  };
  // sourceName筛选框
  sourceNameList = ['performanceNameOne'];
  sourceNameSelected = null;
  getSourceNames(){
    this.myhttp.getSourceNames()
      .subscribe((data)=>{
        this.sourceNameList = data;
      })
  }
  sourceNameSelect(item){
    if(this.sourceNameSelected != item){
      // console.log(item);
      this.sourceNameSelected = item;
      this.getHomeAlarmChartData()
    } 
  }
  getHomeAlarmChartData(){
    let nowTime = this.myhttp.dateformater( Date.now());
    let startTime = this.myhttp.dateformater( Date.now()-30*24*60*60*1000 );
    let obj = {
      sourceName:this.sourceNameSelected,
      startTime: startTime,
      endTime:nowTime,
      format:"day"
    }
    console.log(obj);
    this.myhttp.getHomeAlarmChartData(obj)
      .subscribe((data)=>{
        this.alarmLineChartData = {
          xAxis:{
            data:data.dataList
          },
          series:[
            {data:data.allList},
            {data:data.ActiveList},
            {data:data.closedList}
          ]
        }
      },(err)=>{
        console.log(err);
      })
  }


}