import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { Chart } from '@antv/g2';
import DataSet from '@antv/data-set';
import { DataService } from 'src/app/routes/datatable/services/data.service';
@Component({
  selector: 'app-datatable-customindex-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.less']
})
export class DatatableCustomindexMapComponent implements OnInit, OnChanges {
  el: any;
  @Input() chartData: any;
  chart: any;
  mapData: any;
  constructor(private service: DataService, private ngZone: NgZone) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (this.chartData) {
      // setTimeout(()=>{
      //   this.chart.render(true)
      // }, 1000)
    }
  }

  ngOnInit(): void {}
  reRender() {
    console.log('5454545');
    setTimeout(() => {
      this.chart.render();
    }, 1000);
  }
  render(el: ElementRef<HTMLDivElement>): void {
    this.el = el.nativeElement;
    setTimeout(() => {
      this.ngZone.runOutsideAngular(() => this.init(this.el));
    }, 500);
  }

  private init(el: HTMLElement): void {
    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/china.json')
      .then(res => res.json())
      .then(mapData => {
        console.log(mapData);
      this.mapData =mapData
      });
    this.chart = new Chart({
      container: el,
      autoFit: true,
      height: 500,
      padding: [0, 0]
    });
    this.chart.tooltip({
      showTitle: false,
      showMarkers: false,
      shared: true
    });
    // 同步度量
    this.chart.scale({
      longitude: {
        sync: true
      },
      latitude: {
        sync: true
      }
    });
    this.chart.axis(false);
    this.chart.legend('trend', {
      position: 'left'
    });

    // 绘制世界地图背景
    const ds = new DataSet();
    const worldMap = ds.createView('back').source(this.mapData, {
      type: 'GeoJSON'
    });
    const worldMapView = this.chart.createView();
    worldMapView.data(worldMap.rows);
    worldMapView.tooltip(false);
    worldMapView.polygon().position('longitude*latitude').style({
      fill: '#fff',
      stroke: '#ccc',
      lineWidth: 1
    });

    // 可视化用户数据
    const userData = [
      { name: 'China', value: 106.3 },
    ];
    const userDv = ds
      .createView()
      .source(userData)
      .transform({
        geoDataView: worldMap,
        field: 'name',
        type: 'geo.region',
        as: ['longitude', 'latitude']
      })
      .transform({
        type: 'map',
        callback: (obj: { trend: string; value: number }) => {
          obj.trend = obj.value > 100 ? '男性更多' : '女性更多';
          return obj;
        }
      });
    const userView = this.chart.createView();
    userView.data(userDv.rows);
    userView.scale({
      trend: {
        alias: '每100位女性对应的男性数量'
      }
    });
    userView
      .polygon()
      .position('longitude*latitude')
      .color('trend', ['#F51D27', '#0A61D7'])
      .tooltip('name*trend')
      .style({
        fillOpacity: 0.85
      })
      .animate({
        leave: {
          animation: 'fade-out'
        }
      });
    userView.interaction('element-active');

    this.chart.render();
  }
}