import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {FramePageComponent} from "../../../frame/core/page/frame.page";
import {BsModalService} from "ngx-bootstrap/modal";
import { AjaxService } from '../../../../core/service/ajax.service';
import { MsgService } from '../../../../core/service/msg.service';
import { FramePager } from '../../../../core/frame/pager/frame-pager/frame-pager';

@Component({
    selector: 'app-final-screen',
    templateUrl: './final-screen.component.html',
    styleUrls: ['./final-screen.component.scss']
})
export class FinalScreenComponent extends FramePageComponent implements OnInit {
  gaugeChart : any;//仪表盘
  barChart : any;//柱状图
  currBizType = "";
  query = {
    school_id : '84203',
    batch_id : '2'
  };
  constructor(private modalService: BsModalService) {
      super(modalService);
  }
  
  ngOnInit() {
    //仪表盘
    this.gaugeChart = echarts.init(document.getElementById("gaugeChart") as HTMLDivElement);
    this.buildGaugeChart();
    this.setGaugeFreshInterval();
    this.initGaugeChartEvent();
    //柱状图
    this.barChart = echarts.init(document.getElementById("barChart") as HTMLDivElement);
    this.currBizType = '考生提交完成率';
    this.buildBarChart('考生提交完成率');
    this.setBarFreshInterval();
  }

  //仪表盘刷新设置-5秒
  setGaugeFreshInterval() {
    let _this = this;
    setInterval(function () {
      _this.buildGaugeChart();
    }, 5 * 1000);
  }

  //柱状图刷新设置-5秒
  setBarFreshInterval() {
    let _this = this;
    setInterval(function () {
      _this.buildBarChart();
    }, 5 * 1000);  
  }

  initGaugeChartEvent() {
    this.gaugeChart.off();
    let _this = this;
    this.gaugeChart.on('mousedown', {seriesName: '考生提交完成率'}, function (params) {
      _this.currBizType = '考生提交完成率';
      _this.buildBarChart('考生提交完成率');
    });
    this.gaugeChart.on('mousedown', {seriesName: '审核完成率'}, function (params) {
      _this.currBizType = '审核完成率';
      _this.buildBarChart('审核完成率');
    });
    this.gaugeChart.on('mousedown', {seriesName: '审核通过率'}, function (params) {
      _this.currBizType = '审核通过率';
      _this.buildBarChart('审核通过率');
    });
  }

  //构造仪表盘
  buildGaugeChart() {
    AjaxService.requestMap("full/initial/gauge/data/stat.htm",{school_id: this.query.school_id, batch_id: this.query.batch_id},(map)=>{
      debugger;
      this.gaugeOption.title[0].subtext = map.submitCnt + "/" + map.total;
      this.gaugeOption.title[1].subtext = map.reviewCnt + "/" + map.submitCnt;
      this.gaugeOption.title[2].subtext = map.approveCnt + "/" + map.reviewCnt;

      this.gaugeOption.series[0].data[0].value = map.submitPer;
      this.gaugeOption.series[1].data[0].value = map.reviewPer;
      this.gaugeOption.series[2].data[0].value = map.approvePer;
      this.gaugeChart.setOption(this.gaugeOption);
    });
  }

  gaugeOption = {
    title:
    [{//***********************************************title1********************************************* */
        id: 'chart1',
        text: '考生提交完成率',
        subtext: '',
        left: '14%',
        top: '70%',
        textAlign: 'center',
        textStyle: {
          color: '#37a2da',
          fontSize: 20
        },
        subtextStyle : {
          color: '#009ad6',
          fontSize: 16
        }
      },
      {//***********************************************title2********************************************* */
        id: 'chart2',
        text: "审核完成率",
        subtext: '',
        left: '44%',
        top: '70%',
        textAlign: 'center',
        textStyle: {
          color: '#37a2da',
          fontSize: 20
        },
        subtextStyle : {
          color: '#009ad6',
          fontSize: 16
        }
      },
        {//***********************************************title3********************************************* */
          id: 'chart3',
          text: "审核通过率",
          subtext: '',
          left: '74%',
          top: '70%',
          textAlign: 'center',
          textStyle: {
            color: '#37a2da',
            fontSize: 20
          },
          subtextStyle : {
            color: '#009ad6',
            fontSize: 16
          }
      }
    ],
    toolbox: {
      feature: {
        dataView: { show: false, readOnly: false },
        saveAsImage: { show: true }
      }
    },
    series: [
      {//**************************************************series1-考生提交完成率**************************************** */
        name: '考生提交完成率',
        center: ["15%","45%"],
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.3, '#67e0e3'],
              [0.7, '#37a2da'],
              [1, '#fd666d']
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        //数字刻度控制
        splitLine: {
          distance: -30,
          length: 5,
          lineStyle: {
            color: '#fff',
            width: 8
          }
        },
        axisLabel: {
          color: 'inherit',
          distance: 30,
          fontSize: 20
        },
        detail: {
          valueAnimation: true,
          formatter: '{value} %',
          color: '#37a2da'
        },
        data: [
          {
            value: 0
          }
        ]
      },
      {//**************************************************series2-审核完成率**************************************** */
        name: '审核完成率',
        center: ["45%","45%"],
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.3, '#67e0e3'],
              [0.7, '#37a2da'],
              [1, '#fd666d']
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        //数字刻度控制
        splitLine: {
          distance: -30,
          length: 5,
          lineStyle: {
            color: '#fff',
            width: 8
          }
        },
        axisLabel: {
          color: 'inherit',
          distance: 30,
          fontSize: 20
        },
        detail: {
          valueAnimation: true,
          formatter: '{value} %',
          color: '#37a2da'
        },
        data: [
          {
            value: 0
          }
        ]
      },
      {//**************************************************series2-审核通过率**************************************** */
        name: '审核通过率',
        center: ["75%","45%"],
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.3, '#67e0e3'],
              [0.7, '#37a2da'],
              [1, '#fd666d']
            ]
          }
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        //数字刻度控制
        splitLine: {
          distance: -30,
          length: 5,
          lineStyle: {
            color: '#fff',
            width: 8
          }
        },
        axisLabel: {
          color: 'inherit',
          distance: 30,
          fontSize: 20
        },
        detail: {
          valueAnimation: true,
          formatter: '{value} %',
          color: '#37a2da'
        },
        data: [
          {
            value: 0
          }
        ]
      },
    ]
  };

  //**********************************************柱状图构建************************************************ */
  buildBarChart(biz_type ?) {
    let dateArr = [];
    let dataArr = [];
    let colorArr = [];
    let total = 0;
    if (!biz_type) {
      biz_type = this.currBizType;
    }
    if (biz_type == '考生提交完成率') {
      AjaxService.requestMap("full/initial/std/submit/stat.htm",{school_id: this.query.school_id, batch_id: this.query.batch_id},(map)=>{
        debugger;
        dateArr = map.dateList;
        dataArr = map.dataList;
        total = map.total;
        colorArr.push("#de773f");
        this.setBarOption(biz_type, total, dateArr, dataArr, colorArr);
      });
    } else if (biz_type == '审核完成率') {
      debugger;
      AjaxService.requestMap("full/initial/std/auth/stat.htm",{school_id: this.query.school_id, batch_id: this.query.batch_id},(map)=>{
        dateArr = map.dateList;
        dataArr = map.dataList;
        total = map.total;
        colorArr.push("#009ad6");
        this.setBarOption(biz_type, total, dateArr, dataArr, colorArr);
      });
    } else if (biz_type == '审核通过率') {
      AjaxService.requestMap("full/initial/std/auth/approve/stat.htm",{school_id: this.query.school_id, batch_id: this.query.batch_id},(map)=>{
        dateArr = map.dateList;
        dataArr = map.dataList;
        total = map.total;
        colorArr.push("#78a355");
        this.setBarOption(biz_type, total, dateArr, dataArr, colorArr);
      });
    }
  }

  setBarOption(biz_type, total, dateArr, dataArr, colorArr) {
    let barOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: false, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      color: colorArr,
      legend: {
        data: [biz_type]//考生提交完成率、审核完成率、审核通过率
      },
      xAxis: [
        {
          type: 'category',
          data: dateArr,//横轴日期
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#145b7d',
              type: 'solid'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: biz_type,
          min: 0,
          max: total,
          interval: 200,
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#145b7d',
              type: 'solid'
            }
          }
        }
      ],
      series: [
        {
          name: biz_type,
          type: 'bar',//考生提交完成率、审核完成率、审核通过率
          tooltip: {
            valueFormatter: function (value) {
              return value as number;
            }
          },
          data: dataArr
        }
      ]
    };
    debugger;
    this.barChart.setOption(barOption);
  }

  

}