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 = [
    {
      name: '路线1',
      points: [
        {
          name: '点a',
          lnglat: [116.405289, 39.904987]
        },
        {
          name: '点b',
          lnglat: [113.964458, 40.54664]
        },
        {
          name: '点c',
          lnglat: [111.47836, 41.135964]
        },
        {
          name: '点d',
          lnglat: [108.949297, 41.670904]
        },
        {
          name: '点e',
          lnglat: [106.380111, 42.149509]
        },
        {
          name: '点f',
          lnglat: [103.774185, 42.56996]
        },
        {
          name: '点g',
          lnglat: [101.135432, 42.930601]
        },
        {
          name: '点h',
          lnglat: [98.46826, 43.229964]
        },
        {
          name: '点i',
          lnglat: [95.777529, 43.466798]
        },
        {
          name: '点j',
          lnglat: [93.068486, 43.64009]
        },
        {
          name: '点k',
          lnglat: [90.34669, 43.749086]
        },
        {
          name: '点l',
          lnglat: [87.61792, 43.793308]
        }
      ]
    }
  ];
  @Input()
  selectedIndex = 0;
  @Input()
  mapWidth = '800px';

  @Input()
  mapHeight = '500px';

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

  constructor() {}
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.pathList.currentValue && this.pathSimplifierIns) {
      this.setData(changes.pathList.currentValue);
    }
  }
  ngOnInit(): void {
    this.mapInit();
  }

  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);

    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);
  }
}
