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;
  geocoder: any;
  navigator: any;
  infoWindow: any;
  markerList: any;
  SimpleMarker: any;
  @Input()
  pathList: any = [];
  @Input()
  selectedIndex = 0;
  @Input()
  mapWidth = '800px';
  @Input() MapList: any;
  @Input()
  mapHeight = '500px';

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

  @Input()
  pois: any = [];
  private _pois: 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 && changes.MapList?.currentValue.length > 0) {
      console.log(this.MapList);
      this.pathList = [
        {
          name: '路线1',
          points: changes.MapList?.currentValue
        }
      ];
      this.setData(this.pathList);
      this.setPathIndex(this.selectedIndex);
      this.getPoiByPositon(this.MapList[this.MapList?.length - 1]?.lnglat);
    }
    if (changes?.pois?.currentValue) {
      // console.log(this.pois);
      this._pois = changes?.pois?.currentValue;
      if (this?.markerList && this._pois.length > 0) {
        this.markerList.render(this._pois);
      }
    }
  }
  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',
        'AMap.InfoWindow',
        'AMap.Geocoder'
      ],
      AMapUI: {
        version: CONFIG.AMapUIVersion,
        plugins: ['misc/PathSimplifier'] // 需要加载的 AMapUI ui插件
      }
    })
      .then(AMap => {
        this.aMap = new AMap.Map('container', {
          zoom: 10
        });

        this.aMap.on('complete', () => {
          // 信息窗口
          this.infoWindow = new AMap.InfoWindow({
            offset: new AMap.Pixel(0, -40)
          });
          this.geocoder = new AMap.Geocoder({
            radius: 1000 //范围，默认：500
          });
          // this.service.msgSrv.info('地图加载完成 !');
          this.pathInit();
          this.setPOIS();
        });
      })
      .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 '';
      },
      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);
    });
  }

  setPOIS() {
    AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'], (MarkerList: any, SimpleMarker: any) => {
      this.markerList = new MarkerList({
        //关联的map对象
        map: this.aMap,
        //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
        getPosition: (dataItem: any) => {
          return dataItem.position;
        },
        //返回数据项对应的Marker
        getMarker: (dataItem: any, context: any, recycledMarker: any) => {
          //存在可回收利用的marker
          if (recycledMarker) {
            //直接更新内容返回
            recycledMarker.setIconLabel(context.id);
            recycledMarker.setIconStyle(dataItem.iconStyle);
            return recycledMarker;
          }
          this.SimpleMarker = SimpleMarker;
          //返回一个新的Marker
          return new SimpleMarker({
            //普通文本
            iconLabel: {
              //普通文本
              innerHTML: dataItem.markerLabel,
              //设置样式
              style: {
                color: '#fff',
                fontSize: '110%',
                marginTop: '2px'
              }
            },
            iconStyle: dataItem.color,
            map: this.aMap,
            position: dataItem.position
          });
        },
        //返回数据项对应的infoWindow
        getInfoWindow: (dataItem: any, context: any, recycledInfoWindow: any) => {
          this.selectedPOI(dataItem);
          return null;
        }
      });

      if (this._pois?.length > 0) {
        //展示该数据
        this.markerList.render(this._pois);
      }
    });
  }

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

  /** 根据经纬度获取地址信息 */
  getPoiByPositon(position: Array<string>) {
    this.geocoder.getAddress(position, (status: any, result: any) => {
      if (status === 'complete' && result.info === 'OK') {
        // result中对应详细地理坐标信息
        this._pois = [...this.pois, { markerLabel: '终', color: 'red', position: position, title: result.regeocode.formattedAddress }];
        if (this.markerList) {
          this.markerList.render(this._pois);
        }
        // this.setPOI({ markerLabel: '终', color: 'red', position: position });
      }
    });
  }

  /**
   * 选中标点，设置窗口信息
   * @param location
   */
  selectedPOI(location: any) {
    this.infoWindow.setContent(`地址: <pre>${location.title}</pre>`);
    this.infoWindow.open(this.aMap, location.position);
    this.infoWindow.setPosition(location.position);
    this.aMap.setCenter(location.position);
  }

  /**
   * 增加标记点
   * @param poi
   */
  setPOI(poi: POI) {
    AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker: any) => {
      //启动页面
      new SimpleMarker({
        //普通文本
        iconLabel: {
          //普通文本
          innerHTML: poi.markerLabel,
          //设置样式
          style: {
            color: '#fff',
            fontSize: '110%',
            marginTop: '2px'
          }
        },
        iconStyle: poi.color,
        map: this.aMap,
        position: poi.position
      });
    });
  }
}

export interface POI {
  markerLabel: string;
  color: string;
  position: Array<string>;
}