<template>
  <div>
    <div id="container" style="width: 25%; height: 250px;"></div>
    <div>
      {{carData}}
    </div>

  </div>


</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {getRealTimeDataTwo} from "@/api/system/car";


export default {
  name: "map-view",
  data() {
    return {
      carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
      carMarker: null, // 存储小汽车Marker
      animationInterval:null,//存储动画定时器
      lastUpdateTime:0,//上次更新时间
      animationFramId:null,//存储动画帧的ID
      carData:[],//小汽车经纬度
    };
  },

  mounted() {
    this.initAMap()
    // this.getRealTimeDataAndUpdatePosition(this.$route.query.carVin); // 添加此行
  },
  beforeDestroy() {
    clearInterval(this.animationInterval);//清除定时器
    this.map?.destroy();
    cancelAnimationFrame(this.animationFramId);//取消动画帧请求
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "e7398786b61ee782417e1749de1f2b39", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: ["116.397428", "39.90923"], // 初始化地图中心点位置
          });

          // 车辆初始化
          this.carMarker = new AMap.Marker({
            position: this.carPosition,
            icon: 'https://webapi.amap.com/images/car.png',
            map: this.map, // 将Marker添加到地图上
          });

          // 在地图初始化完成后启动小车动画
          this.startCarAnimation();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    startCarAnimation() {
      // this.animationInterval = setInterval(() => {
      //   let vin = this.$route.query.carVin;
      //   this.getRealTimeDataAndUpdatePosition(vin);
      // }, 1000);
        const animate = () => {
          const currentTime = Date.now();
          const deltaTime = currentTime - this.lastUpdateTime;

          if (deltaTime > 1000) {
            //每秒更新一次位置
            this.lastUpdateTime = currentTime;
            let vin = this.$route.query.carVin;
            this.getRealTimeDataAndUpdatePosition(vin);
          }
          this.animationFramId = requestAnimationFrame(animate);
        };
        this.animationFramId = requestAnimationFrame(animate);


    },
    getRealTimeDataAndUpdatePosition(vin) {
      getRealTimeDataTwo(vin)
        .then(response => {
          console.log('Response from getRealTimeDataTwo:', response);
          // this.$message.success('Real-time data:',response);
          this.carData = response
          //更新小汽车位置
          this.carPosition = [this.carData.longitude, this.carData.latitude];
          //更新小汽车Marker的位置
          this.carMarker.setPosition(this.carPosition);
          //显示实时数据

        })
    },


  },
};
</script>
<style scoped>
</style>
