<template>
  <div class="map-container">
    <div id="container"></div>
    <!-- 加载动画层 -->
    <div class="loading-overlay" v-if="showLoading">
      <div class="loading-dot"></div>
    </div>
  </div>
</template>
<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(252, 251, 251, 0); */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 确保在地图上方显示 */
}

.loading-dot {
  width: 30px;
  height: 30px;
  background-color: #00ddeb;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import {
  nextTick,
  onMounted,
  reactive,
  ref,
  onUnmounted,
  onActivated,
} from "vue";
import gansuLine from "./newLine.json";
let map = null;
// 控制加载动画显示状态
const showLoading = ref(true);
window._AMapSecurityConfig = {
  securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",
  // securityJsCode: "7aee6d6553ba9a8178e0c57b60a51481",
};
// 初始化地图
const handleInitMap = () => {
  // 先显示遮罩层，延迟3秒后再加载地图
  setTimeout(() => {
    let selectName = sessionStorage.getItem("selectedContentBtn");

    // 获取地图容器并设置初始样式
    const container = document.getElementById("container");
    if (container) {
      container.style.opacity = "0"; // 初始设置为透明
      container.style.transition = "opacity 0.5s ease-in-out"; // 添加过渡效果
    }

    AMapLoader.load({
      key: "c691971f068b92c897fb908c4ddef6d4", // 申请好的Web端开发者Key
      // key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
      version: "2.0",
      plugins: ["AMap.DistrictSearch", "AMap.GeoJSON"],
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "2D",
          zoom: 4, //根据屏幕宽度设置初始化地图级别
          center: [100.808299, 35.791787], //初始化地图中心点位置
          expandZoomRange: true, // 开启显示范围设置
          mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
          // mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
          rotateEnable: false, // 是否可以旋转
          copyrightControl: false,
          logoControl: false,
        });

        // 监听地图加载完成事件
        map.on("complete", function () {
          // 执行地图相关操作
          handleDistrict();
          addPolylines();
          handleAddMarket(selectName);

          // 隐藏加载动画
          showLoading.value = false;

          // 显示地图，添加过渡效果
          if (container) {
            setTimeout(() => {
              container.style.opacity = "1";
            }, 100);
          }
        });
      })
      .catch((e) => {
        console.error(e);
        // 加载失败时也隐藏加载动画
        showLoading.value = false;
        // 显示地图容器
        if (container) {
          container.style.opacity = "1";
        }
      });
  }, 3000);
};
// 高亮和描边
const handleDistrict = () => {
  let districtSearch = new AMap.DistrictSearch({
    subdistrict: 0, //获取边界不需要返回下级行政区
    extensions: "all", //返回行政区边界坐标组等具体信息
    level: "province", //查询行政级别为 市 province-省 district-市
  });
  let polygons = [];
  districtSearch.search("中华人民共和国", function (status, result) {
    map.remove(polygons); //清除上次结果
    let bounds = result.districtList[0].boundaries;
    // 描边
    for (let i = 0; i < bounds.length; i++) {
      let outerPolyline = new AMap.Polyline({
        path: bounds[i],
        strokeColor: "#72A8FF",
        strokeWeight: 3,
        map: map,
      });
      map.add(outerPolyline);
    }
    map.add(polygons);
    map.setFitView(polygons); //视口自适应
  });
};
// 添加新路线
const addPolylines = () => {
  let geojsonObj = new AMap.GeoJSON({
    geoJSON: gansuLine,
    getPolyline: function (geojson, lnglats) {
      // 生成路线
      let polylineObj = new AMap.Polyline({
        path: lnglats,
        strokeWeight: 4,
        strokeColor: "#F0E82A",
        extData: geojson.properties, // 自定义属性数据
      });
      // 生成新的路线，用于覆盖旧的
      const newPolyline = new AMap.Polyline({
        path: lnglats,
        strokeWeight: 4,
        strokeColor: "#00DDEB",
        isOutline: true,
        borderWeight: 2,
        outlineColor: "rgba(0, 221, 235, 1)",
        cursor: "pointer",
      });
      map.add(newPolyline);
      newPolyline.hide();

      // 获取路线数据
      const properties = polylineObj.getExtData();
      // 填报内容
      let content = `
          <div class="infoWindow-title">项目OOI</div>
          <div class="infoWindow-content">
              <p>
                <span class="infoWindow-content-title">数据01:</span>
                <span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
              </p>
              <p>
                <span class="infoWindow-content-title">数据02:</span>
                <span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
              </p>
              <p>
                <span class="infoWindow-content-title">数据03:</span>
                <span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
              </p>
            </div>
          <div class="infoWindow-bottom"></div>
        `;
      // 创建 infoWindow 实例
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        autoMove: true, // 是否自动调整窗体到视野内
        closeWhenClickMap: true, // 控制是否在鼠标点击地图后关闭信息窗体
        content: content, // 传入 dom 对象，或者 html 字符串
        offset: new AMap.Pixel(120, 100),
      });

      // 鼠标经过
      polylineObj.on("mouseover", function (e) {
        newPolyline.show();
        infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
      });
      // 鼠标移出
      polylineObj.on("mouseout", function (e) {
        newPolyline.hide();
        infoWindow.close();
      });

      // 鼠标双击
      polylineObj.on("dblclick", function (e) {});
      return polylineObj;
    },
  });
  map.add(geojsonObj);
};
// 添加标记
let currentMarkers = []; // 存储当前显示的标记
const handleAddMarket = (selectName) => {
  // 清除之前的所有标记
  if (currentMarkers.length > 0) {
    map.remove(currentMarkers);
    currentMarkers = [];
  }

  // 额外确保清除所有标记（防止其他地方创建的标记）
  if (map) {
    map.getAllOverlays("marker").forEach((marker) => {
      map.remove(marker);
    });
  }

  // 根据不同状态定义标记数据
  const markerData = {
    建设: [
      // 安徽
      { number: 1, position: [117.27, 31.86], province: "安徽省" },
      // 广东
      { number: 1, position: [113.2644, 23.1291], province: "广东省" },
      // 陕西
      { number: 2, position: [108.948, 34.2632], province: "陕西省" },
      // 广西
      { number: 2, position: [108.32, 22.824], province: "广西壮族自治区" },
      // 山东
      { number: 2, position: [117.0009, 36.6758], province: "山东省" },
      // 河北
      { number: 1, position: [114.5025, 38.0455], province: "河北省" },
    ],
    试运营: [
      // 四川
      { number: 2, position: [104.066, 30.5728], province: "四川省" },
      // 山东
      { number: 3, position: [117.0009, 36.6758], province: "山东省" },
      // 云南
      { number: 1, position: [102.7123, 25.0406], province: "云南省" },
      // 陕西
      { number: 3, position: [108.948, 34.2632], province: "陕西省" },
      // 广西
      { number: 1, position: [108.32, 22.824], province: "广西壮族自治区" },
      // 湖北
      { number: 1, position: [114.2986, 30.5844], province: "湖北省" },
    ],
    运营: [
      // 四川
      { number: 1, position: [104.066, 30.5728], province: "四川省" },
      // 山东
      { number: 1, position: [117.0009, 36.6758], province: "山东省" },
      // 湖北
      { number: 1, position: [114.2986, 30.5844], province: "湖北省" },
    ],
    退出: [
      // 河南
      { number: 3, position: [113.6654, 34.757], province: "河南省" },
    ],
    // 立项: [],
  };

  const positionsList = markerData[selectName] || [];

  // 如果是"立项"或者没有数据，直接返回，不创建任何标记
  if (!positionsList || positionsList.length === 0) {
    return;
  }

  // 创建新的标记
  for (var i = 0; i < positionsList.length; i++) {
    const markerData = positionsList[i];

    // 创建悬浮窗口内容
    const infoContent = `
      <div class="marker-info-window">
        <div class="marker-info-title">${markerData.province}</div>
        <div class="marker-info-content">
          <span class="marker-info-label">路线数量:</span>
          <span class="marker-info-value">${markerData.number}</span>
          <span class="marker-info-unit">条</span>
        </div>
      </div>
    `;

    // 创建信息窗口实例
    const infoWindow = new AMap.InfoWindow({
      isCustom: true,
      content: infoContent,
      offset: new AMap.Pixel(0, -35),
      closeWhenClickMap: true,
    });

    const marker = new AMap.Marker({
      map: map,
      position: markerData.position,
      offset: new AMap.Pixel(-13, -30),
      content:
        '<div class="custom-content-marker">' +
        '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 40px;height: 40px;">' +
        `<div class="anchorPoint">${markerData.number}</div>` +
        "</div>",
    });

    // 鼠标悬浮事件
    marker.on("mouseover", function (e) {
      infoWindow.open(map, e.lnglat);
    });

    // 鼠标移出事件
    marker.on("mouseout", function () {
      infoWindow.close();
    });

    currentMarkers.push(marker);
  }
};
// 暴露更新标记的方法给父组件
const updateMarkers = (selectName) => {
  handleAddMarket(selectName);
};

// 重置地图到初始状态
const resetMap = () => {
  if (map) {
    map.setZoom(4);
    map.setCenter([100.808299, 35.791787]);
  }
};

// 暴露方法给父组件
defineExpose({
  updateMarkers,
  resetMap,
});
onMounted(() => {
  handleInitMap();
  // 监听窗口大小变化
  window.addEventListener("resize", handleResize);
});

// 处理窗口大小变化
const handleResize = () => {
  if (map) {
    map.resize();
  }
};

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

// 组件从keep-alive缓存中激活时触发
onActivated(() => {
  // 确保地图容器已经渲染完成
  nextTick(() => {
    // 获取地图容器元素
    const container = document.getElementById("container");

    // 如果容器存在，设置明确的尺寸和初始样式
    if (container) {
      container.style.width = "100%";
      container.style.height = "100%";
      container.style.opacity = "0"; // 初始设置为透明
      container.style.transition = "opacity 0.5s ease-in-out"; // 添加过渡效果
    }

    // 无论地图实例是否存在，都重新显示遮罩层并延迟加载地图
    showLoading.value = true;

    // 清除之前可能存在的定时器
    if (window.mapTimer) {
      clearTimeout(window.mapTimer);
    }

    // 延迟300毫秒后重新初始化地图
    window.mapTimer = setTimeout(() => {
      // 如果地图实例已存在，先清除它
      if (map) {
        map.destroy();
        map = null;
      }
      // 重新初始化地图
      handleInitMap();
    }, 300);
  });
});
</script>

<style scoped lang="less">
.tourism {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}
:deep(.infoWindow-title) {
  background-image: url("../assets/images/标题.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 299px;
  line-height: 56px;
  padding-left: 10px;
  font-weight: 700;
}
:deep(.infoWindow-content) {
  background-image: url("../assets/images/信息文本.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 299px;
  height: 100x;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
:deep(.infoWindow-bottom) {
  background-image: url("../assets/images/下标.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 1px;
  height: 22px;
}
:deep(.infoWindow-content-title) {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
}
:deep(.infoWindow-content-value) {
  font-weight: 400;
  font-size: 24px;
  color: #93d2ff;
}
:deep(.infoWindow-unit) {
  font-size: 20px;
  color: #93d2ff;
  display: inline-block;
  margin-left: 3px;
}
:deep(.anchorPoint) {
  position: absolute;
  color: #fff;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 标记悬浮窗口样式
:deep(.marker-info-window) {
  background: #04427e;
  border: 1px solid #00ddeb;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 221, 235, 0.3);
  backdrop-filter: blur(4px);
  min-width: 120px;
}

:deep(.marker-info-title) {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 221, 235, 0.3);
  padding-bottom: 2px;
}

:deep(.marker-info-content) {
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.marker-info-label) {
  font-size: 12px;
  color: #93d2ff;
  font-weight: 400;
}

:deep(.marker-info-value) {
  font-size: 16px;
  font-weight: 600;
  color: #00ddeb;
}

:deep(.marker-info-unit) {
  font-size: 12px;
  color: #93d2ff;
  margin-left: 2px;
}
.amap-container {
  background: none;
}

:deep(.amap-logo) {
  display: none;
  opacity: 0 !important;
}
:deep(.amap-copyright) {
  opacity: 0;
}
</style>
