import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter } from '@angular/core';
import { BaseService } from 'src/app/shared/services';
import { throwError } from 'rxjs';
import AMapLoader from '@amap/amap-jsapi-loader';
import { amapConf } from '@conf/amap.config';
declare var AMap: any;
declare var AMapUI: any;
declare var Loca: any;

const CONFIG = amapConf;
@Component({
  selector: 'amap-path-simplifier',
  templateUrl: './amap-path-simplifier.component.html',
  styleUrls: ['./amap-path-simplifier.component.less']
})
export class AmapPathSimplifierComponent implements OnInit, OnChanges {
  aMap: any;
  pathSimplifierIns: any;
  @Input()
  pathList: any = [];
  @Input()
  selectedIndex = 0;
  @Input()
  mapWidth = '800px';
  @Input('MapList') MapList: any;
  @Input()
  mapHeight = '500px';

  @Output()
  clcikPointEvent = new EventEmitter<any>();

  constructor(public service: BaseService) {}
  ngOnChanges(changes: SimpleChanges): void {
    if (changes?.pathList?.currentValue && this?.pathSimplifierIns) {
      this.setData(changes.pathList?.currentValue);
      this.setPathIndex(this.selectedIndex);
    }
  }
  ngOnInit(): void {
    this.mapInit();
        this.pathList = [
          {
            name: '路线1',
            points: this.MapList
          }
        ];
    // this.DataInit();
  }
  ngOnDestroy(): void {
    if (this.aMap) {
      this.aMap.destroy();
    }
  }

  mapInit() {
    AMapLoader.load({
      key: CONFIG.key,
      version: CONFIG.version,
      plugins: [
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        'AMap.PathSimplifier'
      ],
      AMapUI: {
        version: CONFIG.AMapUIVersion,
        plugins: ['misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
      }
    })
      .then(AMap => {
        this.aMap = new AMap.Map('container', {
          zoom: 4
        });

        this.aMap.on('complete', () => {
          // this.service.msgSrv.info('地图加载完成 !');
          this.pathInit();
        });
      })
      .catch(e => {
        throwError(e);
      });
  }

  pathInit() {
    this.pathSimplifierIns = new AMapUI.PathSimplifier({
      zIndex: 100,
      //autoSetFitView:false,
      map: this.aMap, //所属的地图实例

      getPath: function (pathData: any, pathIndex: any) {
        var points = pathData.points,
          lnglatList = [];

        for (var i = 0, len = points?.length; i < len; i++) {
          lnglatList.push(points[i].lnglat);
        }

        return lnglatList;
      },
      getHoverTitle: function (pathData: any, pathIndex: any, pointIndex: any) {
        if (pointIndex >= 0) {
          //point
          return pathData.name + '，' + pathData.points[pointIndex].name;
        }
        return pathData.name + '，点数量' + pathData.points?.length;
      },
      renderOptions: {
        renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
      }
    });
    (window as any).pathSimplifierIns = this.pathSimplifierIns;
    this.setData(this.pathList);

    if(this.pathList.length>0){
        this.setPathIndex(this.selectedIndex);
    }

    this.pathSimplifierIns.on('pointClick', (e: any, info: any) => {
      this.clcikPointEvent.emit({ e, info });
      console.log('Click: ' + info.pathData.points[info.pointIndex].name);
    });
    // navg1.start();
    // var navg1 = this.pathSimplifierIns.createPathNavigator(0, {
    //   loop: true, //循环播放
    //   speed: 1000000 //巡航速度，单位千米/小时
    // });
    // navg1.start();
  }

  setData(pathList: Array<any>) {
    this.pathSimplifierIns.setData(pathList);
  }

  setPathIndex(index: number) {
    this.pathSimplifierIns.setSelectedPathIndex(index);
  }
}