<template>
  <div class="index-map" id="indexMap"></div>
</template>

<script>
  import AMap from "AMap";
  import inspectApi from '@/api/business/inspect'

  export default {
    name: "trajectory-dialog",
    data() {
      return {
        map: {},
      }
    },
    props: {
      driverId: {
        type: Number,
        default() {
          return 0
        }
      },
    },
    components: {},
    mounted() {
      this.map = new AMap.Map("indexMap", {
        zoom: 12,
        center: [118.750078, 31.983115],
        resizeEnable: true
      });
      let me = this
      this.map.on("complete", function() {
        me.point()
      });
    },
    methods: {
      handleClose() {
        this.$emit('handleClose')
      },
      initRouters(pathList,list) {
        let path = list
        let point = new AMap.LngLat(path[0].x, path[0].y)
        let me = this
        let image = require('../assets/img/uva.png')
        let icon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(40, 40),
          // 图标的取图地址
          image: image,
          // 图标所用图片大小
          imageSize: new AMap.Size(40, 40),
        });
        let marker = new AMap.Marker({
          map: me.map,
          position: point,
          icon: icon,
          offset: new AMap.Pixel(-20, -20),
          autoRotation: true,
          angle: -90,
        });
        // 绘制轨迹
        let polyline = new AMap.Polyline({
          map: me.map,
          path: pathList,
          showDir: true,
          strokeColor: "#FFEF5D",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        });

        let passedPolyline = new AMap.Polyline({
          map: me.map,
          // path: lineArr,
          strokeColor: "#AF5",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        })

        marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
        });

        marker.moveAlong(pathList, 6000);
        this.map.setCenter(point)
      },
      point(){
        inspectApi.point(this.driverId).then(res => {
          let me = this
          let polygons = null;
          var bounds = res.data;
          if (bounds && bounds.length > 0) {
            let path = []
            for (let i = 0, l = bounds.length; i < l; i++) {
              path.push(
                new AMap.LngLat(bounds[i].x, bounds[i].y)
              )
            }
            polygons = new AMap.Polygon({
              zIndex: 11,
              path: path,
              strokeColor: "#09EBE0", //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 1, //线宽
              strokeStyle: "solid", //线样式
              strokeDasharray: [10, 5], //补充线样式
              fillColor: "#17ABA3",
              fillOpacity: 1
            });
            this.map.add(polygons)
            this.initRouters(path,bounds)
          }
        }).catch(e => {
        })
      }
    }
  }
</script>

<style lang="less">
  .index-map {
    width: 100%;
    height: 90%;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

    img {
      background-color: inherit!important;
    }

    .amap-marker-label {
      padding: 0 !important;
      font-size: 14px !important;
      line-height: 18px !important;
    }
  }
</style>

