<!-- 地图组件 -->
<template>
  <div style="position: relative">
    <div class="bars_w" ref="chartMap" id="chartMap"></div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
// import "echarts/lib/component/dataZoom";
const props = defineProps(["options"]);
const myCharts = ref();

const fetchConfig = async (name: string) => {
  const res = await import(`./mapJson/${name}.json`);
  return res.default;
  // GetEchar(res.default)
};
// fetchConfig()
const areaName = ref("");
const emit = defineEmits(["clickMap"]);
onMounted(() => {});

const GetEchar = async (name: string) => {
  let chartDom = document.getElementById("chartMap");
  myCharts.value?.dispose();
  myCharts.value = echarts.init(chartDom);

  echarts.registerMap(name, await fetchConfig(name)); //注册可用的地图
  let option = {
    title: {
      left: "center",
      top: "3%",
      ...props.options.title,
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
        label: {
          color: "#fff",
          fontSize: 16,
        },
      },
      textStyle: {
        color: "#fff",
        fontStyle: "normal",
        opacity: 0.35,
        fontSize: 14,
      },
      backgroundColor: "rgba(0,0,0,0.55)",
      ...(props.options.tooltip || null),
    },

    color: [
      ...(props.options.color || ""),
      "#07CCCA ",
      "#00BFF5",
      "#FFBF00",
      "#77DA63",
      "#D5FF6B",
      "#Ff6600",
      "#FF9100",
      "#5B6E96",
      "#66FFCC",
      "#B3B3B3",
    ],

    geo3D: {
      show: false,
      map: "北京",

      viewControl: {
        autoRotate: false, // 关闭自动旋转
        center: [0, -10, 0], //位置
        beta: 45, //x轴旋转
        alpha: 50, //Y轴旋转
      },
      light: {
        main: {
          color: "#ffffff",
          intensity: 1,
          shadow: false,
        },
      },
      itemStyle: {
        color: "#4D96FA",
        borderWidth: 1,
        borderColor: "#fff",
        opcity: 1,
      },

      shading: "realistic", //简化着色模式（'color' 比 'realistic' 性能更好）
      label: {
        show: true,
        position: "bottom",
        distance: 0, // 紧贴地面
        color: "#fff",
      },
      emphasis: {
        label: {
          formatter: function (params: any) {
            areaName.value = params.name;
            return params.name;
          },
          show: true,
          textStyle: {
            color: "orange",
            fontSize: 18,
            backgroundColor: "rgba(0,23,11,0)",
          },
        },
      },
      postEffect: {
        enable: false, // 关闭后期特效（抗锯齿、 Bloom 等）
      },
      // 减少顶点计算
      polygonOffset: {
        factor: 1,
        units: 1,
      },
      // 启用 GPU 加速渲染
      renderOption: {
        useGPU: true, // 启用 GPU 渲染
        maxCache: 1000, // 缓存顶点数据
        vertexLimit: 50000, // 限制顶点数量
      },
      // 优化材质计算
      material: {
        color: "#4D96FA",
        opacity: 0.8,
        roughness: 0.2, // 粗糙度（数值越低性能越好）
        metalness: 0, // 金属度
      },

      groundPlane: true,
      // ...(props.options.geo3Ds || null),
      // data: originalDatas.datas,
      // 将geo3d放在最底层
    },

    ...props.options.options,
  };
  if (props.options.visualMap) {
    option.visualMap = props.options.visualMap;
  }
  // if (props.options.geo3D) {
  //   option.geo = null;
  //   option.geo3D = {
  //     map: name,
  //     ...(props.options.geo3D || null),
  //   };
  // }

  myCharts.value.setOption(option);
  // window.addEventListener("resize", resizeHandler);
  const inquireTimer: any = ref(null);
  // 点击事件
  myCharts.value.off("click");
  let selectedPoint = null;
  myCharts.value.on("click", (params: any) => {
    console.log("系列索引：", params.seriesIndex); // 应为 1（监测点系列）
    console.log("数据索引：", params.dataIndex); // 应为 0、1、2...（对应点1、点2...）
    // console.log("🚀 ~ myCharts.value.getZr ~ e:", e);
    // // 清除上一次的定时器
    // if (inquireTimer.value) {
    //   clearTimeout(inquireTimer.value);
    // }
    // inquireTimer.value = setTimeout(async () => {
    //   emit("clickMap", e.name);
    //   inquireTimer.value = null;
    // }, 300);
  });
  // myCharts.value.getZr().on("click", (e: any) => {
  //   console.log("🚀 ~ myCharts.value.getZr ~ e:", e);
  //   // 清除上一次的定时器
  //   if (inquireTimer.value) {
  //     clearTimeout(inquireTimer.value);
  //   }
  //   inquireTimer.value = setTimeout(async () => {
  //     emit("clickMap", areaName.value);
  //     inquireTimer.value = null;
  //   }, 300);
  // });
};

/**
 * 外部触发：通过 name 修改指定图标的颜色并显示 tooltip

 * @param {string} targetName - 目标点的 name（如 "点1"）
 * @param {string} newColor - 新颜色（默认红色 "#ff0000"）
 */
function setIcon(targetName, newColor = "#ff0000") {
  console.log("🚀 ~ setIcon ~ targetName:", targetName);
  // 获取当前图表配置（基于您的 echartMapList.value.options）
  const currentOptions = props.options.options;
  // 找到 "监测点" 系列的索引（固定为 series 中的第1项，因您的配置中 map3D 是第0项）
  const monitorSeriesIndex = currentOptions.series.findIndex(
    (series) => series.name === "监测点"
  );

  if (monitorSeriesIndex === -1) {
    console.warn("未找到 '监测点' 系列");
    return;
  }

  // 获取监测点数据列表
  const monitorData = currentOptions.series[monitorSeriesIndex].data;
  // 找到 name 匹配的点的索引
  const targetDataIndex = monitorData.findIndex(
    (item) => item.name === targetName
  );

  if (targetDataIndex === -1) {
    console.warn(`未找到名称为 ${targetName} 的点`);
    return;
  }

  // 1. 重置所有点的颜色（恢复默认蓝色，避免多个点同时变色）
  monitorData.forEach((item, index) => {
    item.itemStyle.color = "#0000ff";
    item.symbolSize = 17;
  });

  // 2. 修改目标点的颜色
  monitorData[targetDataIndex].itemStyle.color = newColor;
  monitorData[targetDataIndex].symbolSize = 25;

  // 3. 更新图表配置，使颜色生效
  myCharts.value.setOption(currentOptions);

  myCharts.value.dispatchAction({
    type: "showTip",
    seriesIndex: monitorSeriesIndex,
    dataIndex: targetDataIndex,

    // 可选：强制指定基于鼠标的位置（如果百分比位置无效）
    position: ["50%", "50%"],
  });

  console.log(`已通过外部触发修改 ${targetName} 的颜色为 ${newColor}`);
}

const resizeHandler = () => {
  myCharts.value?.resize();
  myCharts.value?.setOption(myCharts.value.getOption()); // 强制更新配置
};
onBeforeUnmount(() => {
  // window.removeEventListener("resize", resizeHandler);
  myCharts.value?.dispose();
});
defineExpose({ GetEchar, setIcon });
watch(
  () => props.options,
  (newVal, oldVal) => {
    // GetEchar('中国')
  }
);
</script>

<style lang="scss" scoped>
.bars_w {
  width: 100%;
  height: 100%;
}

.iconfont {
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 20px;
  color: var(--el-color-primary) !important;
}
</style>
