<template>
  <div id="container"></div>
</template>

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

let props = defineProps({
  pathData: {
    type: Array,
    default: () => ([])
  },
  point_list: {
    type: Array,
    default: () => ([])
  },
  log_list: {
    type: Array,
    default: () => ([])
  },
  threeD: {
    type: Boolean,
    default: false
  }
})

let map = null

const getInitialCenter = () => {
  if (props.pathData?.length > 0) return props.pathData[Math.floor(props.pathData.length / 2)]
  if (props.point_list?.length > 0) {
    const point = props.point_list[0]
    return [point.longtitude, point.latitude]
  }
  return [106.5799475868821, 29.504864472181577]
}

onMounted(() => {
  AMapLoader.load({
    key: "d1f123693def8a412c976184daa4b60e",
    version: "2.0",
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
        viewMode: props.threeD ? '3D' : '2D', //地图模式
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl +鼠 标左键上下移动
        zoom: 18, //初始化地图层级
        rotation: -15, //初始地图顺时针旋转的角度
        zooms: [3, 20], //地图显示的缩放级别范围
        center: getInitialCenter(),
      })

      // 添加折线
      if (props.pathData?.length > 0) {
        let polyline = new AMap.Polyline({
          path: props.pathData,
          strokeWeight: 2.5, //线条宽度
          strokeColor: "red", //线条颜色
          lineJoin: "round", //折线拐点连接处样式
        })
        map.add(polyline)

        const beginMarker = new AMap.Marker({
          position: props.pathData[0],
          offset: new AMap.Pixel(-24, -48),
          icon: "/mark/begin.png",
          title: "起始点"
        })
        const endMarker = new AMap.Marker({
          position: props.pathData[props.pathData.length - 1],
          offset: new AMap.Pixel(-24, -48),
          icon: "/mark/end.png",
          title: "终点"
        })
        map.add([beginMarker, endMarker])
      }

      // 添加打卡点
      if (props.point_list?.length > 0) {
        props.point_list.forEach((point, index) => {
          const marker = new AMap.Marker({
            position: [point.longtitude, point.latitude],
            offset: new AMap.Pixel(-15, -28),
            icon: "/mark/daka.png",
            title: `打卡点${index + 1}`
          })
          map.add(marker)
        })
      }

      if (props.log_list?.length > 0) {
        props.log_list.forEach((point, index) => {
          const markerLocation = [Number(point.jingwei[1]), Number(point.jingwei[0])]
          const marker = new AMap.Marker({
            position: markerLocation,
            offset: new AMap.Pixel(-15, -28),
            icon: "/mark/log.png",
            title: point.address
          })

          const distance = AMap.GeometryUtil.distance(markerLocation, [point.longtitude, point.latitude]).toFixed(2)

          marker.setLabel({
            direction: 'right',
            offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
            content: `<div class="pointinfo">
                <p><b>打卡点${index + 1} ${point.address}</b></p>
                <p><b>距离：</b>${distance}米</p>
              </div>`
          })

          map.add(marker)

          // 打卡点之间的折线
          let polyline = new AMap.Polyline({
            strokeStyle: "dashed",
            path: [
              [point.longtitude, point.latitude],
              markerLocation
            ],
            strokeWeight: 3, //线条宽度
            strokeColor: "blue", //线条颜色
            lineJoin: "round", //折线拐点连接处样式
          })
          map.add(polyline)
        })
      }

      AMap.plugin(['AMap.ControlBar', "AMap.ToolBar", "AMap.Scale"], function () {
        let controlBar = new AMap.ControlBar({ //控制地图旋转插件
          position: {
            right: '10px',
            top: '10px'
          }
        })
        map.addControl(controlBar)
        let toolbar = new AMap.ToolBar()
        map.addControl(toolbar)
        let scale = new AMap.Scale()
        map.addControl(scale)
      })
    })
    .catch((e) => {
      console.log(e)
    })

})

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

<style scoped>
#container {
  width: 100%;
  height: 550px
}

:deep(.amap-marker-label) {
  border: none;
  margin-left: -10px;
  padding: -5px 3px;
  background-color: rgba(255, 192, 203, 0.5);
  border-radius: 10px;
  line-height: 0.5em;
  font-size: 0.8em;
}

@media only screen and (max-width: 768px) {
  #container {
    height: 450px
  }
}
</style>
