<template>
  <div v-loading="loading" element-loading-background="#343849c7">
    <div class="iconBox">
      <div class="div">
        <img src="@/assets/jcd.png" alt="" />
        <span>变电站</span>
      </div>

      <div class="div">
        <img src="@/assets/txycyzj.gif" alt="" />
        <span>暂降监测点</span>
      </div>
    </div>
    <div class="bmSelect">
      <el-select
        v-model="value"
        @change="setIcon"
        placeholder="变电站筛选"
        filterable
        clearable
        size="small"
        style="width: 150px"
      >
        <el-option
          v-for="item in siteList"
          :key="item.stationName"
          :label="item.stationName"
          :value="item.stationName"
        />
      </el-select>
    </div>

    <div class="flex">
      <baidu-map
        ref="mapRef"
        class="bm-view"
        :max-zoom="15"
        :min-zoom="10"
        :zoom="zoom"
        @zoomend="syncCenterAndZoom"
        @moveend="checkMapData"
        @ready="handler"
        :center="center"
        :scroll-wheel-zoom="false"
        :double-click-zoom="false"
      >
        <!--  线-->
        <div v-if="zoom > 13">
          <bm-polyline
            :path="path"
            v-for="(path, index) in polyline"
            :key="index"
          ></bm-polyline>
        </div>

        <!-- 变电站-->
        <template v-if="zoom > 13">
          <bm-marker
            :position="path"
            v-for="path in siteList"
            :key="path.subId"
            :icon="path.icon"
            @click="markerClick(path)"
          ></bm-marker>
        </template>
        <!-- 点 -->
        <div maxZoom="12">
          <bm-marker
            :position="path"
            v-for="path in areaLineInfo"
            :key="path.lineId"
            :icon="path.icon"
            @click="markerClick(path)"
          ></bm-marker>
        </div>
        <bm-marker
          :position="infoWindowPoint"
          :icon="{ url: '1', size: { width: 0, height: 0 } }"
        >
          <bm-info-window
            :show="infoWindowPoint.show"
            @close="infoWindowPoint.show = false"
          >
            <el-descriptions
              :title="infoWindowPoint.lineName"
              style="min-width: 250px"
              :column="1"
              border
              v-if="infoWindowPoint.lineId"
              label-width="90px"
            >
              <el-descriptions-item label="供电区域">{{
                infoWindowPoint.gdName
              }}</el-descriptions-item>
              <el-descriptions-item label="上级电站">{{
                infoWindowPoint.stationName
              }}</el-descriptions-item>
              <el-descriptions-item label="上级母线">{{
                infoWindowPoint.busBarName
              }}</el-descriptions-item>
              <el-descriptions-item label="暂降次数">{{
                infoWindowPoint.eventCount
              }}</el-descriptions-item>
              <el-descriptions-item
                label="用户"
                v-if="infoWindowPoint.objName == null"
                >/</el-descriptions-item
              >
              <template v-else>
                <el-descriptions-item label="用户">
                  <div class="descriptionsBox">
                    <div
                      v-for="(value, index) in infoWindowPoint.objName.split(
                        ';'
                      )"
                      style="white-space: nowrap"
                    >
                      {{ value }}
                    </div>
                  </div></el-descriptions-item
                >
              </template>
            </el-descriptions>
            <el-descriptions
              :title="infoWindowPoint.stationName"
              :column="1"
              v-else
              style="min-width: 250px"
              border
            >
              <!-- <el-descriptions-item
                :label="index == 0 ? '母线' : ''"
                v-for="(value, index) in infoWindowPoint.lineEventDetails"
              >
                {{ value.busBarName + `-` + value.lineName }}
              </el-descriptions-item> -->

              <el-descriptions-item label="母线"
                ><div class="descriptionsBox">
                  <div
                    v-for="(value, index) in infoWindowPoint.lineEventDetails"
                    style="white-space: nowrap"
                  >
                    {{ value.busBarName + `-` + value.lineName }}
                  </div>
                </div></el-descriptions-item
              >

              <el-descriptions-item label="暂降次数">{{
                infoWindowPoint.eventCount
              }}</el-descriptions-item>
            </el-descriptions>
          </bm-info-window>
        </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { substationCount } from "@/api/statistics/index";
import { useStore } from "vuex";
// import { BmlMarkerClusterer } from "vue-baidu-map-3x";
const store = useStore();
const mapRef = ref<any>(null); // 地图容器的ref
const mapInstance: any = ref(null); // 百度地图实例
const BMapInstance: any = ref(null); // BMap对象
const loading = ref(false);
const dataList: any = ref([]);
const polyline = ref<any>([]);
const zoom = ref(12);
const areaLineInfo = ref<any>([]);
const siteList = ref<any>([]);
const infoWindowPoint = ref<any>({
  lng: 0,
  lat: 0,
  show: false,
});
const center = ref({
  lng: 116.404367,
  lat: 39.915421,
});
const value = ref("");
const handler = async ({ BMap, map }: any) => {
  if (!BMap.MarkerClusterer) {
    // await import("/offline/libs/MarkerClusterer_min.js");
  }
  mapInstance.value = map;
  BMapInstance.value = BMap;

  // 监听地图容器的鼠标滚轮事件
  const mapDom = mapRef.value.$el; // 获取地图DOM元素
  mapDom.addEventListener("mousewheel", handleMapWheel, { passive: false });
};

// 点击变电站\监测点
const markerClick = (e: any) => {
  zoom.value = 15;
  infoWindowPoint.value = e;
  infoWindowPoint.value.show = true;
  center.value.lng = 116.404367;
  center.value.lat = 39.915421;

  setTimeout(() => {
    center.value.lng = e.lng;
    center.value.lat = e.lat + 0.01;
  }, 0);
};

const init = () => {
  loading.value = true;
  siteList.value = [];
  polyline.value = [];
  dataList.value = [];
  areaLineInfo.value = [];
  substationCount({
    deptId: store.state.deptId,
    type: store.state.timeType,
    startTime: store.state.timeValue[0],
    endTime: store.state.timeValue[1],
  }).then((res: any) => {
    dataList.value = res.data;
    let data = dataList.value;
    let r = 0.0035;
    let list = data.filter((item: any) => item.latitude != 0);
    list.forEach((item: any) => {
      // 变电站图标
      item.icon = {
        url: new URL("@/assets/jcd.png", import.meta.url).href,
        size: {
          width: 40,
          height: 40,
        },
      };
      if (
        item.lineEventDetails?.length > 10 &&
        item.lineEventDetails?.length < 100
      ) {
        r = 0.0055;
      } else if (item.lineEventDetails.length >= 100) {
        r = 0.01055;
      }
      item.lng = item.longitude;
      item.lat = item.latitude;
      item.lineEventDetails.forEach((val: any, i: number) => {
        val.lng =
          item.longitude +
          r * Math.cos((2 * Math.PI * i) / item.lineEventDetails.length);
        val.lat =
          item.latitude +
          r * Math.sin((2 * Math.PI * i) / item.lineEventDetails.length);
        // 监测点图标
        val.icon = {
          url: "",
          size: {
            width: 40,
            height: 40,
          },
        };

        val.icon.url = new URL("@/assets/txycyzj.gif", import.meta.url).href;
        polyline.value.push([
          {
            lng: item.lng,
            lat: item.lat,
          },
          {
            lng: val.lng,
            lat: val.lat,
          },
        ]);
      });

      areaLineInfo.value.push(...item.lineEventDetails);
    });

    siteList.value = list;

    zoom.value = 12;
    setTimeout(() => {
      loading.value = false;
    }, 0);
  });
};
const moveenFlag = ref(true);

const checkMapData = () => {
  if (!mapInstance.value || !BMapInstance.value || !moveenFlag.value) return;

  // 获取地图容器
  const container = mapInstance.value.getContainer();

  setTimeout(() => {
    try {
      // 1. 获取所有图片瓦片
      const tiles = Array.from(container.querySelectorAll("img"));

      // 2. 检查是否有离线地图瓦片
      const hasOfflineTiles = tiles.some((tile: any) => {
        // 确保tile是有效的DOM元素
        if (!tile || !tile.src) return false;

        // 检查是否是离线瓦片
        return tile.src.includes("/plugin/offline/tiles/");
      });

      // 3. 如果没有离线瓦片，回到默认位置
      if (!hasOfflineTiles) {
        console.warn("当前区域无离线地图数据，将返回默认位置");

        // 使用正确的BMap.Point创建方式
        const point = new BMapInstance.value.Point(116.404367, 39.915421);

        // 平滑移动并设置合适缩放级别
        mapInstance.value.panTo(point);
        mapInstance.value.setZoom(12);
        // zoom.value = 12;
      }
    } catch (error) {
      console.error("地图检测出错:", error);
    }
  }, 1000); // 适当缩短延迟时间
};

// 处理地图滚轮缩放，修正scale导致的坐标偏移
const handleMapWheel = (e: WheelEvent) => {
  e.preventDefault();
  if (!mapInstance.value || !BMapInstance.value) return;

  // 1. 获取当前缩放比例（假设你通过scale变量控制，需替换为你的实际scale值）
  const scaleWidth: any = window.sessionStorage.getItem("scaleWidth"); // 你的水平缩放比例
  const scaleHeight: any = window.sessionStorage.getItem("scaleheight"); // 你的垂直缩放比例

  // 2. 获取地图容器的位置和尺寸（原始DOM尺寸，未被scale影响）
  const rect = mapRef.value.$el.getBoundingClientRect();

  // 3. 计算鼠标在地图容器内的原始坐标（未修正）
  const mouseXRaw = e.clientX - rect.left;
  const mouseYRaw = e.clientY - rect.top;

  // 4. 修正坐标：除以缩放比例，得到scale前的原始坐标（地图实际识别的坐标）
  const mouseX = mouseXRaw / scaleWidth;
  const mouseY = mouseYRaw / scaleHeight;

  // 5. 将修正后的坐标转换为百度地图的经纬度
  const point = new BMapInstance.value.Pixel(mouseX, mouseY);
  const lngLat = mapInstance.value.pixelToPoint(point); // 像素坐标转经纬度

  // 6. 执行缩放（滚轮向上放大，向下缩小）
  const zoomDelta = e.deltaY < 0 ? 1 : -1; // 滚轮方向
  const newZoom = mapInstance.value.getZoom() + zoomDelta;
  if (newZoom < 10 || newZoom > 15) return; // 限制缩放范围（百度地图默认范围）

  // 7. 缩放时保持鼠标指向的位置不变（核心：先缩放再移中心点）
  mapInstance.value.setZoom(newZoom);
  mapInstance.value.setCenter(lngLat); // 让鼠标指向的位置成为新中心
};
const syncCenterAndZoom = (e: any) => {
  zoom.value = e.target.getZoom();
  checkMapData();
};
//点击过滤位置
const setIcon = (e: string) => {
  moveenFlag.value = false;
  siteList.value.forEach((item: any) => {
    if (item.stationName == e) {
      console.log(1);

      // center.value.lng = item.lng;
      // center.value.lat = item.lat + 0.01;
      infoWindowPoint.value = item;
      infoWindowPoint.value.show = true;
      zoom.value = 15;
    }
  });
  setTimeout(() => {
    moveenFlag.value = true;
  }, 1500);
};

defineExpose({
  init,
  setIcon,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}
.bm-view {
  width: 99%;
  height: 590px;
}
.iconBox {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2000;
  width: 110px;
  height: 70px;
  padding: 10px;
  background: #ffffff10 !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  font-size: 12px;

  .div {
    display: flex;
    margin-bottom: 5px;

    img {
      height: 20px;
      margin-right: 5px;
    }
  }
}
:deep(.el-descriptions__title) {
  color: #fff;
}
:deep(.el-descriptions__content) {
  color: #fff;
  // width: 100%;
}

:deep(.el-descriptions__body) {
  color: #fff;
  background-color: rgb(0 0 0 / 0%) !important;
}
:deep(.el-descriptions__label) {
  color: #fff;
  // display: inline-block;
  width: 80px;
  text-align: right; /* 右对齐 */
}
:deep(.BMap_pop .BMap_center) {
  background-color: #343849c7;
}
.descriptionsBox {
  max-height: 100px;
  overflow-y: auto;
}
</style>
<style>
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
} /* 地图容器样式 */
.baidu-map-container {
  /* 消除可能的缝隙 */
  line-height: 0;
  font-size: 0;
}
/* .BMap_pop div {
  background-color: #343849c7 !important;
} */
.BMap_top,
.BMap_bottom {
  background-color: #343849c7 !important;
}
/* .BMap_pop div:nth-child(1) {
    background-color: #343849c7 !important;
} */
.BMap_pop > div:nth-child(1) > div,
.BMap_pop > div:nth-child(3) > div,
.BMap_pop > div:nth-child(5) > div,
.BMap_pop > div:nth-child(7) > div {
  background-color: #343849c7 !important;
}
.BMap_pop > div:nth-child(8) > img {
  display: none;
}
.BMap_pop > div:nth-child(8) {
  /* 设置边框宽度和颜色，上边框为可见颜色，其他边框为透明 */
  width: 0 !important;
  height: 0 !important;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #343849c7; /* 倒三角的颜色 */
  transform: translateX(-26px) translateY(24px);
  /* 可选：添加阴影增强视觉效果 */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
}
.bmSelect {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2000;
}
</style>
