import {
  Component,
  Input,
  Output,
  EventEmitter,
  ElementRef,
  Renderer2,
  OnInit,
  OnChanges,
  AfterViewInit,
  Directive,
  AfterViewChecked,
  ChangeDetectionStrategy,
  Inject,
  ViewChild
} from '@angular/core';
// import '@types/echarts/index.d.ts';
import * as echarts from 'echarts';
import { MatEchartService } from './mat-echart.service';
// import '../assets/all-province.js';
// import '../assets/china.js';

@Component({
  selector: 'mat-echart',
  template: `<div #container></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MatEchartDirective implements OnChanges, AfterViewInit, AfterViewChecked {
  _chart: echarts.ECharts;
  _animation = true;
  _isFirstRender = true;
  _legend = {};
  _radiusAxis = {};
  _radar = {};
  _series = [];
  _tooltip = {};
  _toolbox = {};
  _title = {};
  _visualMap = {};

  _geo = {
    map: 'china',
    layoutCenter: ['50%', '58%'],
    layoutSize: '100%'
  };

  _option: any = {
    animation: this._animation,
  };

  @ViewChild('container') private node: ElementRef;
 
  @Input() width;
  @Input() height = `350px`;

  @Input()
  set animation(value: boolean) {
    this._option.animation = value;
  }

  @Input()
  set angleAxis(value: object) {
    this._option.angleAxis = value;
  }

  @Input()
  set color(value: string[]) {
    this._option.color = value;
  }

  @Input()
  set geo(value: string) {
    this._geo.map = value || 'china';
    this._geo.layoutSize = value ? '60%' : '100%';
    this._option.geo = this._geo;
  }

  @Input()
  set legend(value: any) {
    this._option.legend = value;
  }

  @Input()
  set polar(value: any) {
    this._option.polar = value;
  }

  @Input()
  set radiusAxis(value: any) {
    this._option.radiusAxis = typeof value === 'object' ? value : this._radiusAxis;
  }

  @Input()
  set radar(value: any) {
    this._option.radar = typeof value === 'object' ? value : this._radar;
  }

  @Input()
  set series(value: any) {
    this._option.series = typeof value === 'object' ? value : this._series;
  }

  @Input()
  set title(value: any) {
    this._option.title = typeof value === 'object' ? value : this._title;
  }

  @Input()
  set tooltip(value: any) {
    this._option.tooltip = typeof value === 'object' ? value : this._tooltip;
  }

  @Input()
  set toolbox(value: any) {
    this._option.toolbox = typeof value === 'object' ? value : this._toolbox;
  }

  @Input()
  set visualMap(value: any) {
    this._option.visualMap = typeof value === 'object' ? value : this._visualMap;
  }

  @Input()
  set xAxis(value: any) {
    this._option.xAxis = value;
  }

  @Input()
  set yAxis(value: any) {
    this._option.yAxis = value;
  }

  @Input()
  set z(value: any) {
    this._option.z = value;
  }

  @Output() chartsClick: EventEmitter<object> = new EventEmitter();

  /**
   * 加载顺序：constructor -> @Input -> ngOnInit
   */
  constructor(
    private _el: ElementRef,
    private _renderer: Renderer2,
    @Inject(MatEchartService) private echartServ: MatEchartService) {
  }

  renderEchart() {
    if (!this._isFirstRender) this._chart.setOption(this._option, true);
  }

  // 视图渲染完成后再确定echarts区域
  ngAfterViewInit() {
    this._renderer.setStyle(this.node.nativeElement, 'height', this.height);
    this._renderer.setStyle(this.node.nativeElement, 'width', this.width || this.node.nativeElement.clientWidth);
    this._isFirstRender = false;
    const dom = this.node.nativeElement;
    // const _chart = this.echartServ.echartsInit(dom);
    this._chart = echarts.init(
      dom,
      null,
      { devicePixelRatio: 2 } // 更高的分辨率
    );
    this.renderEchart();

    // 自适应
    window.addEventListener('resize', () => {
      this._chart.resize();
    });

    this._chart.setOption(this._option, true);

    this._chart.on('click', params => {
      this.chartsClick.emit(params);
    });
  }

  ngOnChanges(): void {
    this.renderEchart();
  }

  ngAfterViewChecked(): void {
    console.log('after view cheched');
  }
}