<template>
  <!-- 已送达轨迹查询 -->
  <div style="width: 100%;height: 100%;">
    <div id="container"></div>
  </div>
</template>

<script>
  export default {
    props: {
      // 轨迹列表
      trackList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        map: null,
      }
    },
    mounted() {
      // this.keyUpSearch()
    },
    methods: {
      keyUpSearch() {
        var that = this
        var positions = this.trackList;
        that.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 14,
          center: positions[0],
        });
        AMap.service(["AMap.PlaceSearch"], function() {
          var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            map: that.map,
            panel: "result",
            autoFitView: true
          });
        })
        that.map.setFitView()
        // 创建一个 起点Icon
        var startIcon = new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
          imageSize: new AMap.Size(135, 40),
          imageOffset: new AMap.Pixel(-9, -3)
        });
        // 创建一个 终点icon
        var endIcon = new AMap.Icon({
          size: new AMap.Size(25, 34),
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
          imageSize: new AMap.Size(135, 40),
          imageOffset: new AMap.Pixel(-95, -3)
        });
        if (positions.length > 0) {
          // 添加起点和终点
          const startMarker = new AMap.Marker({
            position: positions[0],
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
          });
          const num = positions.length
          const endMarker = new AMap.Marker({
            position: positions[num - 1],
            icon: endIcon,
            offset: new AMap.Pixel(-13, -30),
            // autoRotation: true,
          });
          that.map.add(startMarker);
          that.map.add(endMarker);
        }
        // 绘制轨迹
        var polyline = new AMap.Polyline({
          map: that.map,
          path: positions,
          showDir: true,
          strokeColor: "#28F", //线颜色
          strokeWeight: 10, //线宽
          strokeStyle: "solid",
          lineJoin: 'round',
          lineCap: 'round',
        });
        that.map.setFitView(null, false, [150, 60, 100, 60]);
      },
      destroyMap() {
        this.map && this.map.destroy();
      },
      close() {
        this.destroyMap()
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  #container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  #container ::v-deep .amap-logo {
    display: none !important;
    left: 0;
    height: 1.0625rem;
    margin: 0 1px;
  }

  #container ::v-deep .amap-copyright {
    display: none !important;
    left: 4.375rem;
    height: 1rem;
    font-size: 0.6875rem;
  }

  ::v-deep .amap-marker-label {
    border: 0;
    padding: 7px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
</style>
