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;
  navigator: any;
  @Input()
  pathList: any = [];
  @Input()
  selectedIndex = 0;
  @Input()
  mapWidth = '800px';
  @Input() 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);
    }
    if (changes?.MapList?.currentValue && this?.pathSimplifierIns) {
      this.pathList = [
        {
          name: '路线1',
          points: changes?.MapList?.currentValue
        }
      ];
      this.setData(this.pathList);
      this.setPathIndex(this.selectedIndex);
    }
  }
  ngOnInit(): void {
    this.mapInit();
    // 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: 10
        });

        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: 10 //绘制路线节点，如不需要可设置为-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);
    });
  }

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

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

  startNav() {
    if (this.navigator) {
      this.navigator.start();
    } else {
      this.navigator = this.pathSimplifierIns?.createPathNavigator(0, {
        loop: true, //循环播放
        speed: 1000000 //巡航速度，单位千米/小时
      });
      this.navigator?.start();
    }
  }
}
