<template>
  <el-dialog title="历史轨迹信息" :visible.sync="open" width="800px" 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-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.addPipe(res.data.historyTrack);
            }
          }
        });
      },
      /**时间选择*/
      timeChange(value){
        this.queryParams.startTime =  value[0];
        this.queryParams.endTime = value[1];
      },
      /**搜索*/
      search(){
        this.clearMarker();
        this.clearPipeLine();
        this.getTrackHistory(this.queryParams);
      },
      /**重置*/
      resetQuery(){
        this.clearMarker();
        this.clearPipeLine();
        //获取今天开始时间
        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>
