<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

const loading = ref(true);

const props = defineProps({
  list: {
    type: Object,
    default: () => []
  },
  open: {
    type: String,
    default: ''
  }
})

const initMap = () => {
  AMapLoader.load({
    key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca: {
      version: '2.0.0'
    }
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [105.441866, 28.87098], // 初始化地图中心点位置
        mapStyle: "amap://styles/darkblue",
      });
      // 监听地图加载完成事件
      map.on('complete', () => {
        // 地图加载完成后执行的操作
        setTimeout(() => {
          loading.value = false;
        }, 500)
      });
      map.setPitch(30);

      let geocoder = new AMap.Geocoder();


      geocoder.getLocation(props.open, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          // 获取成功，result.geocodes包含了返回的经纬度信息
          let latlong = result.geocodes[0].location;
          let start = [latlong.lng, latlong.lat];
          let line = [];
          map.setCenter(start);

          // 创建 AMap.Icon 实例：
          const icon = new AMap.Icon({
            size: new AMap.Size(50, 60),    // 图标尺寸
            // vue3/vite 需要用特定的本地图片引入方式，不可require引入
            image: new URL('/src/assets/delivery_img/icon10.png', import.meta.url).href,  // Icon的图像
            imageSize: new AMap.Size(50, 60), // 根据所设置的大小拉伸或压缩图片
            imageOffset: new AMap.Pixel(0, 0)
          });
          // 创建一个 Marker 实例：
          const marker = new AMap.Marker({
            position: start,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            icon: icon,
            offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
          });

          // 将创建的点标记添加到已有的地图实例：
          map.add(marker);

          props.list.forEach(item => {
            geocoder.getLocation(item, function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                // 获取成功，result.geocodes包含了返回的经纬度信息
                let geocodes = result.geocodes[0].location;
                line.push([geocodes.lng, geocodes.lat]);
                if (line.length == props.list.length) {
                  initLine(start, line);
                }
              } else {
                // 获取失败，可根据具体需求进行错误处理
                console.log('获取经纬度失败');
              }
            })
          })
        } else {
          // 获取失败，可根据具体需求进行错误处理
          console.log('获取经纬度失败');
        }
      });

    })
    .catch((e) => {
      console.log(e);
    });
}

const initLine = (start = [], line = []) => {

  let features = [];
  line.forEach((item => {
    features.push({
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          start,
          item
        ]
      }
    },)
  }))

  // 创建 Loca 实例
  let loca = new Loca.Container({
    map: map
  });

  // 创建数据源
  let dataSource = new Loca.GeoJSONSource({
    // url: 'xxx.geojson', 或者使用 data 字段
    data: {
      "type": "FeatureCollection",
      "features": features
    },
  });

  // 弧线
  let pulseLink = new Loca.PulseLinkLayer({
    // loca,
    zIndex: 30,
    opacity: 1,
    visible: true,
    zooms: [6, 22],
    depth: true,
  });

  pulseLink.setSource(dataSource)
  pulseLink.setStyle({
    unit: 'meter',
    dash: [80, 0, 80, 0],
    lineWidth: function () {
      return [30, 5];
    },
    height: function (index, feat) {
      return feat.distance / 3 + 10;
    },
    // altitude: 1000,
    smoothSteps: 30,
    speed: function (index, prop) {
      // return 1 + Math.random() * 200;
      return 200;
    },
    flowLength: 300,
    lineColors: function (index, feat) {
      return ['rgba(47, 194, 250, 0.20)', 'rgba(91, 219, 246, 0.70)', 'rgba(0, 156, 255, 0.20)'];
    },
    maxHeightScale: 0.4, // 弧顶位置比例
    headColor: 'rgba(91, 219, 246, 1)',
    trailColor: 'rgba(255, 255,0,0)',
  });

  // 添加到地图上
  loca.add(pulseLink);
  loca.animate.start();
}

onMounted(() => {
  initMap();
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div class="c-box">
    <div id="container"></div>
    <div class="loading" v-if="loading">
      <dv-loading>加载中...</dv-loading>
    </div>
  </div>
</template>

<style scoped lang ="scss">
.c-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  #container {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 130%;
  }
  .loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #05273d;
  }
}
</style>
