<template>
  <div class="container">
    <div class="box">
      <div class="editTool">
        <span>时间区间：</span>
        <SectionDate @change="sectionDateChange" />
      </div>
      <div id="mapcontainer" style="flex: 1"></div>
    </div>
    <div :style="{ display: 'none' }">
      <InfoWindow class="infoBox" :value="deviceInfo" @close="InfoWin.close()" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { MapCustom } from "@/utils/mapCustom";
import { ref } from "vue";
import { locateRecord } from "@/api";
import { format } from "@/utils";
import { TLocateRecord } from "@/api/index.d";
import { useRoute } from "vue-router";
import InfoWindow from "@/components/InfoWindow.vue";
import ViaMarker from "@/assets/img/via-marker.png";
import endMarker from "@/assets/img/end-marker.png";
import startMarker from "@/assets/img/start-marker.png";
import SectionDate from "@/components/sectionDate.vue";

const { query } = useRoute();
let d = new Date();
let newMap = null;
let deviceInfo = ref({});
let InfoWin = null;

const params = reactive<TLocateRecord.TReq>({
  deviceId: query.deviceId as string,
  startDate: `${format(d, "YYYY-MM-DD")} 00:00:00`,
  endDate: `${format(d, "YYYY-MM-DD")} 23:59:59`,
});

const sectionDateChange = (val) => {
  params.startDate = val.startDate;
  params.endDate = val.endDate;
  getLocateRecord();
};

const getLocateRecord = () => {
  locateRecord(params).then((res) => {
    newMap.clearMap();
    if (res && res.length) {
      let list = res;

      newMap.setCenter([list[0].lng, list[0].lat]);
      newMap.polyline(list);
      let startIcon = newMap.newIcon({
        image: startMarker,
        size: [20, 29],
      });
      let endIcon = newMap.newIcon({
        image: endMarker,
        size: [20, 29],
      });
      let ViaIcon = newMap.newIcon({
        image: ViaMarker,
        size: [20, 29],
      });

      list.forEach((item, index) => {
        let marker: any = "";
        if (index == 0) {
          marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 });
        } else if (index == list.length - 1) {
          marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 });
        } else {
          marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 });
        }
        marker.setMap(newMap.map);
        marker.on("click", () => {
          deviceInfo.value = item;
          InfoWin = newMap.infoWindow();
          InfoWin.open(newMap.map, marker.getPosition());
        });
      });
    } else {
    }
  });
};

onMounted(() => {
  try {
    newMap = new MapCustom({ dom: "mapcontainer" });
  } catch (error) {}

  getLocateRecord();
});
</script>

<style scoped lang="less">
.container {
  overflow: hidden;
  .box {
    background-color: #ffffff;
    border: 1px solid #e4e7ed;
    overflow: hidden;
    transition: 0.3s;
    border-radius: 5px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .el-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
  }
}
.incidentList {
  height: 100%;
  display: flex;
  flex-direction: column;
  .head {
    background-color: #fff;
    height: 70px;
    line-height: 70px;
    flex-shrink: 0;

    .head-text {
      color: #061451;
      font-size: 20px;
      display: flex;
      align-items: center;
      &::before {
        margin-right: 18px;
        content: "";
        display: block;
        width: 2px;
        height: 14px;
        border-radius: 20px;
        background: #061451;
      }
    }
  }
  .list {
    flex: 1;
    .list-item {
      cursor: pointer;
      padding: 0 15px;
      box-sizing: border-box;
      height: 100px;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #dedede;
      &.active {
        background-color: #e6e7ed;
      }
      .img {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        flex: 1;
        margin: 0 10px;
        .content-name {
          color: #061451;
          font-size: 20px;
        }
        .content-time {
          color: #787878;
          font-size: 18px;
        }
      }
    }
  }
}

.container-right {
  display: flex;
  flex-direction: column;
}
.editTool {
  min-width: 761px;
  background: #fff;
  padding: 0 20px;
  height: 70px;
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 20px;
}

.editTool-time {
  margin: 0 10px;
}
</style>
