<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1500px"
    @close="close"
  >
    <div class="manage-input">
      <el-form ref="queryForm" :model="queryForm" label-width="100px">
        <vab-query-form>
          <el-form-item width="100" prop="time" :label="$t('defalult.rq')">
            <el-date-picker
              v-model="queryForm.time"
              size="small"
              type="daterange"
              align="right"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="changeTime"
            ></el-date-picker>
          </el-form-item>
        </vab-query-form>
      </el-form>
    </div>
    <div class="manage-button">
      <el-form-item width="100">
        <el-button size="small" @click="resetForm()">
          {{ $t('defalult.chongz') }}
        </el-button>
        <el-button type="primary" size="small" @click="search">
          {{ $t('defalult.cx') }}
        </el-button>
      </el-form-item>
    </div>
    <div id="mapContainer" style="height: 500px"></div>
  </el-dialog>
</template>

<script>
import { getTrajectory } from '@/api/clock';
import { getDate, getPastTime, getPastTime1 } from '@/common/times';
export default {
  data() {
    return {
      dialogFormVisible: false,
      title: '轨迹图',
      map: {},
      coords: [],
      queryForm: {
        start: '',
        end: '',
        time: '',
        userId: '',
      },
      coordinate: [],
      polyline: '',
      trajectoryData: [],
    };
  },
  mounted() {},
  methods: {
    resetForm() {
      this.$refs.queryForm.resetFields();
    },
    search() {
      this.getData();
      setTimeout(() => {
        this.setTrajectory();
      }, 1000);
    },
    changeTime() {
      this.queryForm.start = getDate(this.queryForm.time[0]);
      this.queryForm.end = getDate(this.queryForm.time[1]);
    },
    setDefaultTime() {
      this.queryForm.time = getPastTime1();
      this.queryForm.start = getDate(this.queryForm.time[0]);
      this.queryForm.end = getDate(this.queryForm.time[1]);
    },
    loadScript(row) {
      this.dialogFormVisible = true;
      this.queryForm = row;
      this.setDefaultTime();
      this.getData();
      setTimeout(() => {
        this.setTrajectory();
      }, 1000);
    },
    async getData() {
      const { data } = await getTrajectory(this.queryForm);
      this.coordinate = [];
      this.coordinate.push(data[0]);
      this.trajectoryData = data;
      if (data.length != 0) {
        this.coords = [];
        for (let i = 0; i < data.length; i++) {
          this.coords.push(
            new qq.maps.LatLng(data[i].latitude, data[i].longitude)
          );
        }
      }
    },
    setTrajectory() {
      this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
        center: new qq.maps.LatLng(
          this.coordinate[0].latitude,
          this.coordinate[0].longitude
        ), // 设置地图中心点的经纬度
        zoom: 12, // 设置地图缩放级别
      });
      var trajectoryData = this.trajectoryData;
      const trajectoryLength = trajectoryData.length;
      var start = '';
      if (trajectoryLength > 1) {
        // 起点
        start = new qq.maps.LatLng(
          trajectoryData[0].latitude,
          trajectoryData[0].longitude
        );
        // 终点
        var end = new qq.maps.LatLng(
          trajectoryData[trajectoryLength - 1].latitude,
          trajectoryData[trajectoryLength - 1].longitude
        );
      } else {
        // 起点
        start = new qq.maps.LatLng(
          trajectoryData[0].latitude,
          trajectoryData[0].longitude
        );
      }
      const map = this.map;
      // 创建起点标记
      const startMarker = new qq.maps.Marker({
        position: start,
        map,
      });
      if (end !== undefined) {
        // 创建终点标记
        const endMarker = new qq.maps.Marker({
          position: end,
          map,
        });
        const endLabel = new qq.maps.Label({
          position: end,
          map,
          content: '终点',
          style: {
            color: '#fff',
            backgroundColor: '#00f',
            padding: '5px',
          },
        });
      }
      // 创建起点和终点标注
      const startLabel = new qq.maps.Label({
        position: start,
        map,
        content: '起点',
        style: {
          color: '#fff',
          backgroundColor: '#f00',
          padding: '5px',
        },
      });
      this.polyline = new qq.maps.Polyline({
        // 设置线段的坐标点数组
        path: this.coords,
        strokeColor: '#FF0000', // 设置线段颜色
        strokeWeight: 3, // 设置线段宽度
        map: this.map, // 添加到地图上
      });
      this.showBox();
    },
    showBox() {
      var map = this.map;
      var points = this.trajectoryData;
      points.forEach(point => {
        console.log(111, point.latitude);
        const marker = new qq.maps.Marker({
          position: new qq.maps.LatLng(point.latitude, point.longitude),
          map: map,
        });
        qq.maps.event.addListener(marker, 'click', event => {
          console.log(point);
          const infoWin = new qq.maps.InfoWindow({
            map,
          });
          infoWin.open();
          infoWin.setContent(point.time);
          // // let lat = trajectoryData[i].latitude;
          // // let lng = trajectoryData[i].longitude;
          // // infoWin.setPosition(new qq.maps.LatLng(
          // //   lat,
          // //   lng,
          // // ));
          infoWin.setPosition(event.latLng);
        });
      });

      // for (let i = 0; i < trajectoryData.length; i++) {
      //   qq.maps.event.addListener(this.polyline, 'click', (event) => {
      //     const infoWin = new qq.maps.InfoWindow({
      //       map,
      //     });
      //     infoWin.open();
      //     infoWin.setContent(trajectoryData[i].time);
      //     // let lat = trajectoryData[i].latitude;
      //     // let lng = trajectoryData[i].longitude;
      //     // infoWin.setPosition(new qq.maps.LatLng(
      //     //   lat,
      //     //   lng,
      //     // ));
      //     infoWin.setPosition(event.latLng);
      //   })
      // }
      //lat: 31.52853, lng: 120.28429
      // lat: 31.52850714370453, lng: 120.2841567993164
      // qq.maps.event.addListener(this.polyline, 'click', (event) => {
      //   const infoWin = new qq.maps.InfoWindow({
      //     map,
      //   });
      //   infoWin.open();
      //   infoWin.setContent('打卡时间');
      //   infoWin.setPosition(event.latLng);
      // });
    },
  },
};
</script>

<style>
#mapContainer {
  width: 100%;
  height: 400px;
}
</style>
