import { Constants } from 'ets/constants/Constants'
import { FontIcon } from 'components/fontIcon'
import { mapCommon, map, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';
export class traceController {
  pause = () => {
  }
  resume = () => {
  }
  resetCenter= () => {
  }
}
@Component
export default struct trackMap {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapEventManager?: map.MapEventManager;
  @Link listArr:Array<object>
  @State traceOverlay:map.TraceOverlay|null=null
  traceController:traceController=new traceController()
  build() {
   Column(){
     MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
   }.width('100%').height('100%')
  }
  aboutToAppear(): void {
    this.traceController.pause = this.pause;
    this.traceController.resume = this.resume;
    this.traceController.resetCenter = this.resetCenter;
    console.log(JSON.stringify(this.listArr),'md---listArr')
    this.mapOptions = {
      position: {
        target: {
          latitude: Number(this.listArr[0]['lat']),
          longitude: Number(this.listArr[0]['lon'])
        },
        zoom: 15
      }
    };
    // 地图初始化的回调
    this.callback = async (err, mapController) => {
      if (!err) {
        // 获取地图的控制器类，用来操作地图
        this.mapController = mapController;
        // 返回地图组件的监听事件管理接口
        this.mapEventManager = this.mapController.getEventManager();
        let callback = () => {
          console.info(`md---on-mapLoad`);
        }
        this.mapEventManager.on("mapLoad", callback);

        // 执行自定义的方法
        this.customizedMethod();
      }
    };
  }

  async customizedMethod(){
    // Marker初始化参数
    let markerStart: mapCommon.MarkerOptions = {
      position: {
        latitude: Number(this.listArr[0]['lat']),
        longitude: Number(this.listArr[0]['lon'])
      },
     icon:$r("app.media.map_start"),
      zIndex: 11,
      anchorU: 0.6,
      anchorV: 1,
    };
    let markerEnd: mapCommon.MarkerOptions = {
      position: {
        latitude: Number(this.listArr[this.listArr.length-1]['lat']),
        longitude: Number(this.listArr[this.listArr.length-1]['lon'])
      },
      icon:$r("app.media.map_end"),
      zIndex: 11,
      anchorU: 0.6,
      anchorV: 1,
    };
    let markerCar: mapCommon.MarkerOptions = {
      position: {
        latitude: Number(this.listArr[0]['lat']),
        longitude: Number(this.listArr[0]['lon'])
      },
      icon:$r("app.media.car"),
      zIndex: 11,
      anchorU: 0.5,
      anchorV: 0.4,
    };
    // 创建Marker
    if(this.mapController){
     await this.mapController.addMarker(markerStart);
     await this.mapController.addMarker(markerEnd);
      let markerBoy1=await this.mapController.addMarker(markerCar);
      let boyImages1: map.PlayImageAnimation = new map.PlayImageAnimation();
      boyImages1.setDuration(1000);
      let resourceArray: Array<Resource> = new Array();
      resourceArray.push($r("app.media.car"));
      await boyImages1.addImages(resourceArray);
      boyImages1.setRepeatCount(-1);
      markerBoy1.setAnimation(boyImages1);
      let points: Array<mapCommon.LatLng> = new Array();
      this.listArr.forEach((v,i)=>{
        points.push({ latitude: Number(v['lat']), longitude: Number(v['lon']) });
      })
      // polyline初始化参数
      let polylineOption: mapCommon.MapPolylineOptions = {
        points: points,
        clickable: true,
        startCap: mapCommon.CapStyle.BUTT,
        endCap: mapCommon.CapStyle.BUTT,
        geodesic: false,
        jointType: mapCommon.JointType.BEVEL,
        visible: true,
        width: 20,
        gradient: false,
        color: 0xff2288ff,
      }
      // 创建polyline
      await this.mapController.addPolyline(polylineOption);
      // 动态轨迹的入参
      let traceOptions: mapCommon.TraceOverlayParams = {
        // 轨迹点
        points: points,
        // 轨迹的动画时长
        animationDuration: 50000,
        // 相机是否跟随动画移动
        isMapMoving: false,
        // 轨迹的颜色
        color: 0x66dddddd,
        // 轨迹的宽度
        width: 20,
        // 轨迹的动画回调（回调轨迹点的index）
        animationCallback: (pointIndex) => {

        }
      }
      let markers: Array<map.Marker> = new Array();
      markers.push(markerBoy1);
      // 新增轨迹点动画
      this.traceOverlay = await this.mapController.addTraceOverlay(traceOptions,markers);
      this.traceOverlay?.pause()
      this.resetCenter()

    }
  }
  pause=()=>{
    console.log('md---pause')
    this.traceOverlay?.pause()
  }
  resume=()=>{
    console.log('md---resume')
    this.traceOverlay?.resume()
  }
  resetCenter=()=>{
    if(this.mapController){
      let bounds: mapCommon.LatLngBounds = {
        northeast: {
          latitude: Number(this.listArr[0]['lat']),
          longitude: Number(this.listArr[0]['lon'])
        },
        southwest: {
          latitude: Number(this.listArr[this.listArr.length-1]['lat']),
          longitude: Number(this.listArr[this.listArr.length-1]['lon'])
        }
      };
      let cameraUpdate: map.CameraUpdate = map.newLatLngBounds(bounds, 100);
    //   // 假设已经有一个地图实例和一系列覆盖物
    //   let bounds = new mapCommon.LatLngBounds({
    //     northeast: { latitude: maxLatitude, longitude: maxLongitude },
    //     southwest: { latitude: minLatitude, longitude: minLongitude }
    //   });
    //
    //   let cameraUpdate = map.newLatLngBounds(bounds, 100); // 100是padding值，可以根据需要调整
      this.mapController.moveCamera(cameraUpdate);
    }

  }
}