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;
  ds!: DataSet ;
  worldMap: any;
  userView: any;
  userDv: any;
  userData: 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 => {
      this.mapData =mapData
      this.chart = new Chart({
        container: el,
        autoFit: true,
        height: 680,
        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'
      });
      console.log('8888');
  
      // 绘制世界地图背景
      this.ds = new DataSet();
      this.worldMap = this.ds.createView('back').source(this.mapData, {
        type: 'GeoJSON'
      });
      const worldMapView = this.chart.createView();
      worldMapView.data(this.worldMap.rows);
      worldMapView.tooltip(false);
      worldMapView.polygon().position('longitude*latitude').style({
        fill: '#fff',
        stroke: '#ccc',
        lineWidth: 1
      });

    // 可视化用户数据
    this.userData = [
      { name: '山东', value: 21 },
      { name: '山东', value: 22},
      { name: '广东', value: 20, },
      { name: '广东', value: 20  },
      { name: '四川', value: 120  },
      { name: '湖南', value: 200  },
      { name: '河北', value: 30  },

    ];
    this.userDv = this.ds.createView().source(this.userData).transform({
        geoDataView: this.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;
        }
      });
    this.userView = this.chart.createView();
    this.userView.data(this.userDv.rows);
    // this.userView.scale({
    //   trend: {
    //     alias: '蓝色地区数量'
    //   }
    // });
    console.log(this.userView);
    console.log('45545');
    
    this.userView.polygon().position('longitude*latitude').color('trend', ['#c7daf3', '#1779f3']).tooltip('').style({fillOpacity: 0.85 })
      // .animate({
      //   leave: {
      //     animation: 'fade-out'
      //   }
      // });
      this.userView.interaction('element-active');
      this.chart.render();


      });

      console.log('9999');
  

  }
  
}