<template>
  <el-dialog
    title="历史轨迹信息"
    :visible.sync="open"
    width="900px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="轨迹日期" prop="trackTime">
        <el-date-picker
          v-model="trackTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm"
          @change="timeChange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="search"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="hf"
          >轨迹回放</el-button
        >
      </el-form-item>
    </el-form>
    <div class="mapChange">
      <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
    </div>
    <div id="track-history-map" style="width: 100%; height: 500px"></div>
  </el-dialog>
</template>

<script>
//当前位置
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters } from "vuex";
import { historyTrack } from "@/api/usergps/gps";
import moment from "moment";
import gcoord from "gcoord";
export default {
  name: "current-location",
  data() {
    return {
      //高德地图
      gaoMap: null,
      open: false,
      queryParams: {
        startTime: null,
        endTime: null,
      },
      trackTime: null,
      markers: [],
      pipeLine: null,
      mapStyle: true,
    };
  },
  methods: {
    openHistoryDialog(query) {
      this.open = true;
      this.initMap();
      this.getTrackHistory(query);
      this.trackTime = [query.startTime, query.endTime];
      this.queryParams = { ...query };
    },
    //初始化地图
    initMap() {
      this.$nextTick(() => {
        const path = eval(this.systemSetting.map_center);
        this.gaoMap = new EditorMap(
          "track-history-map",
          {
            center: path,
            //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
            zoom: 16,
          },
          this
        );
      });
    },
    /**标点*/
    addMarker(data) {
      let marker = new AMap.Marker({
        map: this.gaoMap.map,
        anchor: "bottom-center",
        position: gcoord.transform(
          [data.lng, data.lat], // 经纬度坐标
          gcoord.WGS84, // 当前坐标系
          gcoord.GCJ02 // 目标坐标系
        ),
        extData: data,
      });
      marker.on("mouseover", (e) => {
        const target = e.target;
        target.setLabel({
          content:
            "定位时间:" +
            target.getExtData().pt +
            ",速度:" +
            target.getExtData().s +
            ",停留时间(分):" +
            target.getExtData().stm,
          direction: "top",
        });
      });
      marker.on("mouseout", (e) => {
        const target = e.target;
        target.setLabel({ content: "" });
      });
      return marker;
    },
    /**标线*/
    addPipe(pipeInfo) {
      let pipe = new AMap.Polyline({
        path: this.changeCoordinate(eval(pipeInfo)),
        showDir: true,
        strokeWeight: 4,
        strokeColor: "#1890FF",
      });
      this.pipeLine = pipe;
      this.gaoMap.map.add(pipe);
      this.gaoMap.map.setCenter(
        gcoord.transform(pipeInfo[0], gcoord.WGS84, gcoord.GCJ02)
      );
    },
    //坐标转换
    changeCoordinate(track) {
      let newTrack = [];
      track.forEach((item) => {
        let location = gcoord.transform(
          [item[0], item[1]],
          gcoord.WGS84,
          gcoord.GCJ02
        );
        newTrack.push(location);
      });
      return newTrack;
    },
    /**获取历史轨迹*/
    getTrackHistory(query) {
      historyTrack(query).then((res) => {
        if (res.code == 200) {
          if (res.data.devices) {
            res.data.devices.forEach((item) => {
              let marker = this.addMarker(item);
              this.markers.push(marker);
            });
          }
          if (res.data.historyTrack) {
            this.historyTrack = res.data.historyTrack;
            this.addPipe(res.data.historyTrack);
          }
        }
      });
    },
    hf() {
      this.markers.forEach((item) => item.hide());
      this.gaoMap.clearhf();

      const pathArr = this.historyTrack.map((item) => {
        const position = gcoord.transform(
          [item[0], item[1]], // 经纬度坐标
          gcoord.WGS84, // 当前坐标系
          gcoord.GCJ02 // 目标坐标系
        );
        return position;
      });
      this.gaoMap.map.panTo(pathArr[0][0]);
      this.gaoMap.huifang(pathArr);
    },
    /**时间选择*/
    timeChange(value) {
      this.queryParams.startTime = value[0];
      this.queryParams.endTime = value[1];
    },
    /**搜索*/
    search() {
      this.clearMarker();
      this.clearPipeLine();
      this.gaoMap.clearhf();
      this.getTrackHistory(this.queryParams);
    },
    /**重置*/
    resetQuery() {
      this.clearMarker();
      this.clearPipeLine();
      this.gaoMap.clearhf();
      //获取今天开始时间
      let dayOfStart = moment().startOf("day").toDate();
      //获取今天结束的时间
      let dayOfEnd = moment().endOf("day").toDate();
      this.queryParams.startTime =
        moment(dayOfStart).format("YYYY-MM-DD HH:mm");
      this.queryParams.endTime = moment(dayOfEnd).format("YYYY-MM-DD HH:mm");
      this.trackTime = [this.queryParams.startTime, this.queryParams.endTime];
      this.getTrackHistory(this.queryParams);
    },
    /**清除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);
      }
    },
    // 更改卫星图
    mapChange(num) {
      if (num == 1) {
        this.mapStyle = false;
      } else {
        this.mapStyle = true;
      }
      this.gaoMap.changeMap(this.mapStyle);
    },
  },
  computed: {
    ...mapGetters(["systemSetting"]),
  },
};
</script>

<style scoped lang="scss">
.mapChange {
  top: 155px;
  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>
