<template>
  <div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
    <div id="container"></div>
    <div class="input-card">
      <h4>轨迹回放控制</h4>
      <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
      </div>
      <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
      </div>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig'
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
export default {
  name: "TrajectoryMap",
  components: { AreaTextSelect },
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    initLng: {
      type: String,
      default: '120.250452'
    },
    initLat: {
      type: String,
      default: '27.101745'
    },
    tripRouteStr: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      AMap: null,
      map: null,  // 地图实例
      placeSearch: null,  // POI查询
      geocoder: null, // 逆地理编码
      loading: false,
      keyword: null,
      markers: [],
      line:[],
      area: {
        province: '福建省',
        city: '宁德市',
      }
    }
  },
  mounted() {
    this.initAMap();
  },
  beforeDestroy() {
    this.destroyMap();
  },
  methods: {
    destroyMap() {
      this.map?.destroy();
    },
    initAMap() {
      AMapLoader.load({
        key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.MoveAnimation"]
      }).then((AMap) => {
        this.AMap = AMap;
        this.map = new AMap.Map("container", {
          // 设置地图容器id
          resizeEnable: true,
          viewMode: "3D", // 是否为3D地图模式
          zoom: 16, // 初始化地图级别
          center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
        });
        this.trajectory(); //轨迹

      }).catch((e) => {
        console.log(e);
      });
    },
    // 显示轨迹
    trajectory() {
      this.line = JSON.parse(this.tripRouteStr)
      let line = this.line;
      this.marker = new AMap.Marker({
        map: this.map,
        position: line[0],
        icon: new AMap.Icon({
          image: globalConfig.icon.trajectory,
          size: new AMap.Size(25, 39), // 设置图标的宽高
          imageSize: new AMap.Size(25, 39) // 设置图标的实际显示尺寸
        }),
        offset: new AMap.Pixel(-12.5, -19.5),
        autoRotation: true,
        angle: 90
      });
      // 绘制轨迹
      let polyline = new AMap.Polyline({
        map: this.map,
        path: line,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });

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

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

      this.map.setFitView();
    },
    startAnimation() {
      this.marker.moveAlong(this.line, {
        // 每一段的时长
        duration: 200,//可根据实际采集时间间隔设置
      });
    },
    pauseAnimation() {
      this.marker.pauseMove();
    },
    resumeAnimation() {
      this.marker.resumeMove();
    },
    stopAnimation() {
      this.marker.stopMove();
    }
  },
};
</script>
<style scoped lang="scss">
.place-search-map {
  position: relative;
  overflow: hidden;

  #container {
    height: 1000px;
    width: 100%;
  }

  .input-card .btn {
    margin-right: 1.2rem;
    width: 9rem;
  }

  .input-card .btn:last-child {
    margin-right: 0;
  }

  .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: transparent;
    background-image: none;
    color: #25A5F7;
    border-color: #25A5F7;
    padding: .25rem .5rem;
    line-height: 1.5;
    border-radius: 1rem;
    -webkit-appearance: button;
    cursor:pointer;
  }

  .input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3rem;
  }

  .input-card {
    position: absolute !important;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
}
</style>
