import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { FormBuilder, Validators } from '@angular/forms';
import { FlexTableComponent } from '../../../../../shared/common/FlexTable.component';
import { AppComponent } from '../../../../../app.component';
import { FrameRequest } from '../../../../../shared/frame/frame-request';

declare var echarts:any;
@Component({
  selector: 'app-by-files-stat',
  templateUrl: './by-files-stat.component.html',
  styleUrls: ['./by-files-stat.component.scss']
})
export class ByFilesStatComponent  extends FlexTableComponent implements OnInit {

  public query = {
    bysj : '',
    zy: '',
    zkyx:''
  };
  bysjList:any;
  bysjArr:any;
  zkyxArr:any;
  bysjChat:any;
  zkyxChat:any;
  step ="main";


  QUERY_URL = "by/byFiles/stat/page.htm";
  LIST_TIME_URL = "by/byFiles/bysj/list.htm";

  //折线图
  bysjOption = {
    color: ['#5470C6'],
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "top",
      feature: {
        saveAsImage: { show: true },  // 保存图表
      },
    },
    series: []
  }

  //柱状图
  zkyxOption = {
    color: ['#5470C6'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      //设置图表撑满整个画布
      top: '35px',
      left: '30px',
      right: '70px',
      bottom: '15px',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 12,
        },
        formatter: function (value) {
          //x轴的文字改为竖版显示
          var str = value.split("");
          return str.slice(0, 8).join("\n") +  (str.length > 8 ? '\n...' : '');
        },
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "top",
      feature: {
        saveAsImage: { show: true },  // 保存图表
      },
    },
    series: []
  };

  constructor(public bsModalService: BsModalService, fb: FormBuilder) {
    super();
    this.formModel = fb.group({
    });
   }

  ngOnInit() {
    this.requestReportData();
    this.listBysj();
  }

  ngAfterViewInit(){
    this.bysjChat = echarts.init(document.getElementById('bysjChat'));
    this.zkyxChat = echarts.init(document.getElementById('zkyxChat'));
  }

  //毕业时间
  listBysj() {
    FrameRequest.requestArray(this.LIST_TIME_URL, {}, (array) => {
      this.bysjList = array;
    })
  }


  goStep(step) {
    this.step = step;
    setTimeout(() => {
      if(step == 'main') {
        this.bysjChat = echarts.init(document.getElementById('bysjChat'));
        this.zkyxChat = echarts.init(document.getElementById('zkyxChat'));
        this.setData();
      }
    }, 500);
  }

  requestReportData() {
    FrameRequest.requestMap('by/byFiles/stat/report.htm', {}, (map) => {
      this.bysjArr = map.bysjArr;
      this.zkyxArr = map.zkyxArr;
      this.setData();
    });
  }

  //设置图标中的数据
  setData() {
    var xArr = [];
    var yArr = [];
    for(const bysj of this.bysjArr) {
      xArr.push(bysj.bysj);
      yArr.push(bysj.nums);
    }
    var arr = [{
      data: yArr,
      type: 'line'
    }];
    this.bysjOption.xAxis.data = xArr;
    this.bysjOption.series = arr;
    this.bysjChat.setOption(this.bysjOption);

    xArr = [];
    yArr = [];
    for(const zkyx of this.zkyxArr) {
      xArr.push(zkyx.zkyx);
      yArr.push(zkyx.nums);
    }
    var zkArr = [{
      data: yArr,
      type: 'bar'
        
    }];
    this.zkyxOption.xAxis.data = xArr;
    this.zkyxOption.series = zkArr;
    this.zkyxChat.setOption(this.zkyxOption);
  }

  //导出统计数据
  exportStatXls() {
    AppComponent.GobalComponent.setLoading(true);
    if(this.query.bysj == 'null' || this.query.bysj == null) this.query.bysj = '';
    FrameRequest.download("by/byFiles/stat/downxls.htm", this.query, ()=>{
      AppComponent.GobalComponent.setLoading(false);
      AppComponent.GobalComponent.successMsg("导出成功!");
    });
  }

}
