<template>
  <div class="container">
    <div class="box">
      <div class="editTool">
        <span>时间区间：</span>
        <el-radio-group v-model="sectionType">
          <el-radio-button :value="1">小时</el-radio-button>
          <el-radio-button :value="2">天</el-radio-button>
          <el-radio-button :value="3">周</el-radio-button>
        </el-radio-group>

        <div class="editTool-time">
          <el-date-picker
            v-if="sectionType != 3"
            style="width: 300px"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            v-model="time"
            @change="timeChange"
          />
          <el-date-picker v-model="week" v-else type="week" value-format="YYYY-MM-DD" placeholder="请选择周" @change="weekChange" />
        </div>
        <!-- <span>位置样式：</span>
        <el-radio-group v-model="styleType">
          <el-radio-button :value="1">点</el-radio-button>
          <el-radio-button :value="2">线</el-radio-button>
        </el-radio-group> -->
      </div>
      <div id="mapcontainer" style="flex: 1"></div>
    </div>
    <!-- <el-row :gutter="20">
      <el-col :span="6">
        <div class="incidentList">
          <div class="head">
            <div class="head-text">选择设备（SN列表）</div>
          </div>
          <div class="list scrollbar">
            <div class="list-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in 15" :key="item">
              <div class="img">
                <img :src="handcuffs" alt="" />
              </div>
              <div class="content">
                <div class="content-name">设备序号：10</div>
                <div class="content-time">2025/03/26 18:33:32</div>
              </div>
              <el-icon v-if="index == 0"><View /></el-icon>
              <el-icon v-else><Hide /></el-icon>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="container-right">
      </el-col>
    </el-row> -->
    <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 location from "@/assets/img/location.png";
import InfoWindow from "@/components/InfoWindow.vue";

const { query } = useRoute();
let d = new Date();
let newMap = null;
let time = ref([new Date(`${format(d, "YYYY-MM-DD")} 00:00:00`), new Date(`${format(d, "YYYY-MM-DD")} 23:59:59`)]);
let week = ref(d);
let deviceInfo = ref({});
let sectionType = ref(1);
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 weekChange = (val: any) => {
  let endTime = new Date(val).getTime() + 6 * 24 * 60 * 60 * 1000;
  params.startDate = `${val} 00:00:00`;
  params.endDate = `${format(endTime, "YYYY-MM-DD")} 23:59:59`;
  getLocateRecord();
};
const timeChange = (val: any) => {
  params.startDate = `${format(val[0], "YYYY-MM-DD")} 00:00:00`;
  params.endDate = `${format(val[1], "YYYY-MM-DD")} 23:59:59`;
  getLocateRecord();
};

const getLocateRecord = () => {
  locateRecord(params).then((res) => {
    if (res && res.length) {
      let list = res;
      newMap.clearMap();
      newMap.setCenter([list[0].lng, list[0].lat]);
      newMap.polyline(list);
      let icon = newMap.newIcon(location);
      list.forEach((item) => {
        let marker = newMap.marker({ icon, position: [item.lng, item.lat] });
        marker.setMap(newMap.map);
        marker.on("click", () => {
          deviceInfo.value = item;
          InfoWin = newMap.infoWindow();
          InfoWin.open(newMap.map, marker.getPosition());
        });
      });
    }
  });
};

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>
