<template>
  <el-dialog
    title="轨迹信息"
    :visible.sync="open"
    width="900px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div class="mapChange">
      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
      <div @click="hf"><i class="el-icon-refresh"/>轨迹回放</div>
    </div>
    <div id="track-map" style="width: 100%; height: 500px"></div>
  </el-dialog>
</template>

<script>
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  import { inspectListInfo } from "@/api/car/inspect";
  export default {
    name: "track-info",
    data(){
      return{
        //高德地图
        gaoMap: null,
        open: false,
        trackList: [],
        pipeInfo: [],
        mapStyle: true,
        markers: [],
        pipeLine: null,
      }
    },
    methods:{
      openTrackDialog(query) {
        this.open = true;
        this.initMap();
        this.getTrackInfo(query.id);
        this.clearMarker();
        this.clearPipeLine();
      },
      //初始化地图
      initMap() {
        this.$nextTick(() => {
          const path = eval(this.systemSetting.map_center);
          this.gaoMap = new EditorMap(
            "track-map",
            {
              center: path,
              //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
              zoom: 18,
            },
            this
          );
        });
      },
      getTrackInfo(taskId){
        inspectListInfo({taskId: taskId}).then(res =>{
          if(res.code == 200){
            this.trackList = res.data;
            if(this.trackList && this.trackList.length > 0){
              //添加点位
              this.trackList.forEach(item =>{
                let marker = this.addMarker(item);
                this.markers.push(marker);
              })
              //添加轨迹
              this.pipeInfo = this.trackList.map(item => [item.longitude, item.latitude]);
              this.addPipe(this.pipeInfo)
            }

          }
        })
      },
      /**标点*/
      addMarker(data) {
        let marker = new AMap.Marker({
          map: this.gaoMap.map,
          anchor: "bottom-center",
          position: [data.longitude,data.latitude],
          extData: data,
        });
        marker.on("mouseover", (e) => {
          const target = e.target;
          target.setLabel({
            content:
            "检查时间:" + target.getExtData().createTime +
            ",速度:" + target.getExtData().speed +
            ",角度:" + target.getExtData().angle +
            ",甲烷:" + target.getExtData().ch4 + "ppm" +
            ",乙烷:" + target.getExtData().c2h6 + "ppb",
            direction: "top",
          });
        });
        marker.on("mouseout", (e) => {
            const target = e.target;
          target.setLabel({ content: "" });
        });
        return marker;
      },
      /**标线*/
      addPipe(pipeInfo) {
        let pipe = new AMap.Polyline({
          path: pipeInfo,
          showDir: true,
          strokeWeight: 4,
          strokeColor: "#1890FF",
        });
        this.pipeLine = pipe;
        this.gaoMap.map.add(pipe);
        this.gaoMap.map.setCenter(
          pipeInfo[0]
        );
      },
      // 更改卫星图
      mapChange(num) {
        if (num == 1) {
          this.mapStyle = false;
        } else {
          this.mapStyle = true;
        }
        this.gaoMap.changeMap(this.mapStyle);
      },
      hf() {
        this.markers.forEach((item) => item.hide());
        this.gaoMap.clearhf();
        this.gaoMap.map.panTo(this.pipeInfo[0][0]);
        this.gaoMap.huifang(this.pipeInfo);
      },
      /**清除marker*/
      clearMarker() {
        if (this.markers) {
          this.markers.forEach((item) => {
            this.gaoMap.map.remove(item);
        });
        }
      },
      /**清除pipe*/
      clearPipeLine() {
        if (this.pipeLine) {
          this.gaoMap.map.remove(this.pipeLine);
        }
      },
    },
    computed: {
        ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped lang="scss">
  .mapChange {
    top: 95px;
    color: #1890ff;
    //background-color: #e8f4ff;
    position: absolute;
    display: flex;
    z-index: 9999;
    div {
      padding: 4px 8px;
      border: 1px solid #fff;
      background-color: #e8f4ff;
      margin-left: 8px;
      cursor: pointer;
      &.active,
      &:hover {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }

</style>
