<template>
  <div v-loading="loading" element-loading-background="#343849c7">
    <echartMap
      ref="EchartMap"
      style="width: 100%; height: 608px"
      :options="echartMapList"
      @clickMap="clickMap"
    ></echartMap>

    <div class="legend">
      <div class="box" @click="EchartMap.setIcon('点23')">
        <!-- <div style="background-color: #0000ff"></div> -->
        <img src="@/assets/img/bdz1.png" alt="" style="width: 20px" />
        <div>变电站</div>
      </div>
      <div class="box" @click="EchartMap.setIcon('点13')">
        <div style="background-color: #ffa500"></div>
        <div>暂降次数</div>
      </div>
      <!-- <div class="box">
        <div style="background-color: #800080"></div>
        <div>远程通知数</div>
      </div> -->
    </div>
  </div>
  <!-- 详情弹框 -->
  <tablePopUpMap ref="tablePopUpMapRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { mapCount } from "@/api/statistics/index";
import tablePopUpMap from "@/views/VoltageSag_BJ/components/tablePopUpMap.vue";
import { assignColorsByRank } from "@/utils/color";

import "echarts-gl";
import echartMap from "@/components/echartMap3D.vue";
import { ElMessage, ElLoading } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const EchartMap = ref();
const dataList = ref([]);
const loading = ref(false);
const tablePopUpMapRef = ref();
const echartMapList: any = ref({
  name: "",
  title: {
    text: "",
  },

  tooltip: {
    trigger: "item", // 关键：3D 系列需设置为 'item'
    show: true, // 显式开启

    //  position: ['50%', '50%'],
    formatter: (params) => {
      if (!params.data || params.seriesType != "scatter3D") return "";
      const { name, value } = params.data;
      return `
      <div style="  border-radius: 4px;">
        <div style="font-weight: bold;">变电站1 ${name}</div>
          <div>监测点数量：10个</div>
        <div>发生暂降次数：10次</div>
      
      </div>
    `;
    },
    // 确保 3D 场景下不被遮挡
    zlevel: 100, // 提高层级，避免被地图或其他元素遮挡
  },

  options: {
    series: [],
  },
});
const renderChart = () => {
  EchartMap.value.GetEchar("北京");
  const specialDepts = [
    "城区供电公司",
    "石景山区供电公司",
    "海淀区供电公司",
    "丰台区供电公司",
  ];
  echartMapList.value.options.series = [
    {
      type: "map3D",
      map: "北京",
      viewControl: {
        autoRotate: false, // 关闭自动旋转
        center: [0, -10, 0], //位置
        beta: 45, //x轴旋转
        alpha: 50, //Y轴旋转
      },
      regionHeight: 2,
      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",
        fontSize: 12,
      },

      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,
      // ...地图配置
    },
    {
      name: "监测点",
      type: "scatter3D",
      coordinateSystem: "geo3D",

      // 使用SVG路径作为自定义图标（示例为一个简单的标记图标）
      // symbolSize: 15, // 图标大小
      symbol:
        "path://M96.86 877.95H159l69.55-398.25h-90.94v48.4h-28.23v-76.78l122.1-98.26V294.9h-93.79v48.4h-28.31v-76.7l122.1-98.42v-20.5c0-25.46 21.72-42.62 45.96-42.79l108.51-0.08c24.32 0 46.37 17.49 46.37 42.95v20.75l122.25 98.34v76.46h-28.39v-48.4h-93.87v58.32l122.25 98.26v49.37h-28.39v-21.23h-90.94l3.74 21.23H363.4l21.23-21.23H279.06l52.71 52.46 16.43-16.18-8.13 49.29-8.22-8.13-73.61 73.12 73.61 86.87 23.35-27.49h6.18v19.93l-17.89 21.15 17.89 21.15v27.33l-29.53-34.81-113.14 133.63h160.73v-187H875.7v187h50.84v40.75H96.78l0.08-40.75z m152.92-230.43l-36.52 209.62L320.3 730.65l-70.52-83.13z m25.71-146.5l-18.46 105.5 62.3-61.9-43.84-43.6z m5.93-73.05l40.02-56.61-40.02-56.61v113.22z m50.84-71.9l43.19-61.17h-86.46l43.27 61.17z m50.03-40.26L343 371.36l39.29 55.56V315.81z m-50.03 70.84l-45.64 64.67h91.35l-45.71-64.67z m-50.84-139.82l38.31-38.31-38.31-38.23v76.54z m50.84-50.84l41.32-41.32-82.64-0.08 41.32 41.4z m50.03-24.89l-37.5 37.5 37.5 37.5v-75z m-50.03 50.02l-45.47 45.47h90.86l-45.39-45.47z m100.05 166.1v64.18h79.63l-79.63-64.18z m-280.79 64.1h79.96v-64.26l-79.96 64.26z m280.79-248.83v64.02h79.63l-79.63-64.02zM151.6 266.51h79.88v-64.26l-79.88 64.26z m737.44 252.48h-98.42v-42.05h4.56v-21.88h-69.47v21.88h4.48v66.05h-10.66v-24H366.1l-20.5 125.35v27.09h563.94v-27.09l-20.5-125.35zM466.39 877.95h82.15v-148.2h-82.15v148.2z m283.15-148.2h-82.07v97.36h82.07v-97.36z m0 0", // 替换为实际图标路径
      label: { show: false },
      emphasis: {
        label: { show: false },
      },

      data: [
        {
          name: "点1",
          value: ["116.345678", "39.876543", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点2",
          value: ["116.456789", "39.987654", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点3",
          value: ["116.567890", "40.098765", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点6",
          value: ["116.123456", "39.654321", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点7",
          value: ["116.678901", "40.234567", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点9",
          value: ["116.345670", "40.345678", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },

        {
          name: "点13",
          value: ["116.456788", "40.567890", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点15",
          value: ["116.123457", "40.678901", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点17",
          value: ["116.345671", "40.789012", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点21",
          value: ["116.456787", "40.012345", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点22",
          value: ["116.678903", "39.876543", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点23",
          value: ["116.123458", "40.123456", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点24",
          value: ["116.890125", "39.765432", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点25",
          value: ["116.345672", "40.234567", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点26",
          value: ["116.567894", "39.654321", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点29",
          value: ["116.456786", "40.456789", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点31",
          value: ["116.123459", "40.567890", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点33",
          value: ["116.345673", "40.678901", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点34",
          value: ["116.567895", "39.210987", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点37",
          value: ["116.456785", "40.890123", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点39",
          value: ["116.123451", "39.987654", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点41",
          value: ["116.345674", "39.876543", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点45",
          value: ["116.456784", "39.654321", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点46",
          value: ["116.678906", "40.345678", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点48",
          value: ["116.890128", "40.456789", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点50",
          value: ["116.567897", "40.567890", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点53",
          value: ["116.456783", "39.210987", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点58",
          value: ["116.567898", "39.987654", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点62",
          value: ["116.678908", "39.765432", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点63",
          value: ["116.123454", "40.234567", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点65",
          value: ["116.345677", "40.345678", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点71",
          value: ["116.123455", "40.678901", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点72",
          value: ["116.890131", "39.210987", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点73",
          value: ["116.345680", "40.789012", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点77",
          value: ["116.456790", "39.987654", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点78",
          value: ["116.678920", "40.012345", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点79",
          value: ["116.123460", "39.876543", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点80",
          value: ["116.890140", "40.123456", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点81",
          value: ["116.345685", "39.765432", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点82",
          value: ["116.567910", "40.234567", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点85",
          value: ["116.456795", "39.543210", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点86",
          value: ["116.678930", "40.456789", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },

        {
          name: "点88",
          value: ["116.890150", "40.567890", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点90",
          value: ["116.567920", "40.678901", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点94",
          value: ["116.678940", "40.890123", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点97",
          value: ["116.345695", "40.012345", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
        {
          name: "点98",
          value: ["116.567930", "39.876543", 0],
          itemStyle: { color: "#0000ff" },
          symbolSize: 15, // 大小15px
        },
      ],
      // data: dataList.value
      //   .filter((item: any) => {
      //     if (item.lan) {
      //       return item;
      //     }
      //   })
      //   .map((item: any) => {
      //     return {
      //       name: item.deptsName,
      //       value: [item.lan, item.lat, 0, item.lineCount],
      //       list: item.lineList,
      //     };
      //   }),

      // [
      //   {
      //     name: "大兴",
      //     value: ["116.386537", "39.607924", 50],
      //   },
      //   {
      //     name: "通州",
      //     value: ["116.705424", "39.757376", 50],
      //   },
      // ],
      // shading: "lambert",
      // label: {
      //   show: false,
      //   position: "top",
      //   distance: 0.2, // 距离柱子顶部的距离
      //   textStyle: {
      //     fontSize: 14, // 设置字体大小为14px
      //     // fontWeight: "bold", // 设置字体加粗
      //   },
      //   formatter: (params: any) => {
      //     return params.value[2];
      //   },
      // },

      // emphasis: {
      //   label: { show: true },
      // },
    },
    // {
    //   name: "暂降次数",
    //   type: "bar3D",
    //   silent: true, // 默认显示
    //   coordinateSystem: "geo3D",
    //   zlevel: 1,
    //   data: dataList.value
    //     .filter((item: any) => {
    //       if (item.lan) {
    //         return item;
    //       }
    //     })
    //     .map((item: any) => {
    //       let num = specialDepts.includes(item.deptsName) ? 0.03 : 0.04;
    //       return {
    //         name: item.deptsName,
    //         value: [item.lan + num, item.lat + num, item.eventCount],
    //         list: item.eventList,
    //       };
    //     }),

    //   shading: "lambert",
    //   label: {
    //     show: true,
    //     position: "top",
    //     distance: 0.2, // 距离柱子顶部的距离

    //     textStyle: {
    //       fontSize: 14, // 设置字体大小为14px
    //       // fontWeight: "bold", // 设置字体加粗
    //     },
    //     formatter: (params: any) => {
    //       return params.value[2];
    //     },
    //   },

    //   barSize: 0.8,
    //   minHeight: 0.01,
    //   itemStyle: {
    //     color: "#FFA500",
    //   },
    //   emphasis: {
    //     label: { show: true },
    //   },
    // },
    // {
    //   name: "远程通知数",
    //   type: "bar3D",
    //   silent: true, // 默认显示
    //   coordinateSystem: "geo3D",

    //   data: dataList.value
    //     .filter((item: any) => {
    //       if (item.lan) {
    //         return item;
    //       }
    //     })
    //     .map((item: any) => {
    //       let num = specialDepts.includes(item.deptsName) ? 0.04 : 0.06;
    //       return {
    //         name: item.deptsName,
    //         value: [item.lan + num, item.lat + num, item.noticeCount],
    //         list: item.noticeList,
    //       };
    //     }),

    //   shading: "lambert",
    //   label: {
    //     show: true,
    //     position: "top",
    //     distance: 0.2, // 距离柱子顶部的距离

    //     textStyle: {
    //       fontSize: 14, // 设置字体大小为14px
    //       fontWeight: 700, // 设置字体加粗
    //     },
    //     formatter: (params: any) => {
    //       return params.value[2];
    //     },
    //   },

    //   barSize: 0.8,
    //   minHeight: 0.01,
    //   itemStyle: {
    //     color: "#800080",
    //   },
    //   emphasis: {
    //     label: { show: true },
    //   },
    // },
  ];
};
const init = () => {
  loading.value = true;
  // echartMapList.value.geo3Ds = {
  //   regions: [
  //     {
  //       name: "平谷",
  //       itemStyle: {
  //         color: assignColorsByRank(800),
  //         opacity: 1,
  //       },
  //     },
  //   ],
  // };
  let regionsList = [];
  mapCount({ deptId: store.state.deptId, type: store.state.timeType }).then(
    (res: any) => {
      res.data.forEach((item: any) => {
        if (item.deptsName == "城区供电公司") {
          regionsList.push({
            name: "东城",
            value: item.eventList.length,
          });
          regionsList.push({
            name: "西城",
            value: item.eventList.length,
          });
        } else {
          regionsList.push({
            name: item.deptsName.replace("区供电公司", ""),
            value: item.eventList.length,
          });
        }

        switch (item.deptsName) {
          case "大兴区供电公司":
            item.lan = 116.386537;
            item.lat = 39.607924;
            break;
          case "通州区供电公司":
            item.lan = 116.705424;
            item.lat = 39.757376;
            break;
          case "房山区供电公司":
            item.lan = 115.771153;
            item.lat = 39.703052;
            break;
          case "门头沟区供电公司":
            item.lan = 115.777329;
            item.lat = 39.990483;
            break;
          case "昌平区供电公司":
            item.lan = 116.171615;
            item.lat = 40.223036;
            break;
          case "延庆区供电公司":
            item.lan = 116.099058;
            item.lat = 40.533533;
            break;
          case "怀柔区供电公司":
            item.lan = 116.511466;
            item.lat = 40.370998;
            break;
          case "密云区供电公司":
            item.lan = 116.893304;
            item.lat = 40.465165;
            break;
          case "平谷区供电公司":
            item.lan = 117.094677;
            item.lat = 40.226792;
            break;
          case "顺义区供电公司":
            item.lan = 116.710987;
            item.lat = 40.15707;
            break;
          case "朝阳区供电公司":
            item.lan = 116.550205;
            item.lat = 39.873331;
            break;
          case "丰台区供电公司":
            item.lan = 116.279454;
            item.lat = 39.824133;
            break;
          case "石景山区供电公司":
            item.lan = 116.140426;
            item.lat = 39.934654;
            break;
          case "海淀区供电公司":
            item.lan = 116.238135;
            item.lat = 39.970893;
            break;
          case "城区供电公司":
            item.lan = 116.363685;
            item.lat = 39.898051;
            break;
        }
      });
      console.log("🚀 ~ init ~ regionsList:", assignColorsByRank(regionsList));

      echartMapList.value.geo3Ds = {
        regions: [...assignColorsByRank(regionsList)],
      };
      dataList.value = res.data;

      renderChart();
      loading.value = false;
    }
  );
};
const clickMap = (e: any) => {
  // console.log("🚀 ~ clickMap ~ e:", e);
  // console.log("🚀 ~ clickMap ~ e:", dataList.value);
  let list: any = dataList.value.filter((item: any) =>
    item.deptsName.includes(e == "西城" ? "城区" : e == "东城" ? "城区" : e)
  );
  console.log("🚀 ~ clickMap ~ list:", list);

  if (list.length == 0) {
    ElMessage({
      message: "暂无数据",
      type: "warning",
    });
  }
  // tablePopUpMapRef.value.open({
  //   title: list[0].deptsName + "_详情",
  //   eventList: list[0].eventList,
  //   lineList: list[0].lineList,
  //   noticeList: list[0].noticeList,
  // });
  // if (e.seriesName == "监测点数") {
  //   tablePopUpMapRef.value.open({
  //     title: e.name + "_监测点",
  //     data: e.data.list,
  //     columns: [
  //       { prop: "stationName", label: "变电站" },
  //       { prop: "devName", label: "终端名称" },
  //       { prop: "busBarName", label: "母线名称" },
  //       { prop: "lineName", label: "监测点名称" },
  //     ],
  //   });
  // } else if (e.seriesName == "暂降次数") {
  //   tablePopUpMapRef.value.open({
  //     title: e.name + "_暂降",
  //     data: e.data.list,
  //     columns: [
  //       {
  //         prop: "timeid",
  //         label: "发生时间",
  //         width: 180,
  //       },
  //       { prop: "bdname", label: "变电站" },
  //       { prop: "pointname", label: "监测点" },
  //       {
  //         prop: "eventvalue",
  //         label: "残余电压",
  //         width: 100,
  //       },
  //       {
  //         prop: "persisttime",
  //         label: "持续时间",
  //         width: 100,
  //       },
  //     ],
  //   });
  // } else if (e.seriesName == "远程通知数") {
  //   tablePopUpMapRef.value.open({
  //     title: e.name + "_远程通知",
  //     data: e.data.list,
  //     columns: [
  //       {
  //         prop: "sendTime",
  //         label: "发送时间",
  //         width: 180,
  //       },
  //       { prop: "userName", label: "接受人", width: 100 },
  //       { prop: "phone", label: "手机号", width: 100 },
  //       { prop: "msgContent", label: "发送内容", align: "left" },
  //     ],
  //   });
  // }
};
onMounted(() => {
  init();
});
defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.legend {
  position: absolute;
  left: 20px;
  bottom: 0px;
  width: 90px;
  height: 50px;
  font-size: 12px;
  .box {
    display: flex;
    align-items: center;
    div {
      &:nth-child(1) {
        width: 20px;
        height: 12px;
        border-radius: 3px;
        margin-right: 5px;
      }
    }
  }
}
</style>
