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

    <div class="legend">
      <div class="box">
        <!-- <div style="background-color: #0000ff"></div> -->
        <img src="@/assets/img/bdz.png" alt="" style="width: 18px" />
        <div>变电站</div>
      </div>
    </div>
  </div>
  <!-- 详情弹框 -->
  <tablePopUpMap ref="tablePopUpMapRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { substationCount } from "@/api/statistics/index";
import tablePopUpMap from "@/views/VoltageSag_BJ/components/tablePopUpMap.vue";
import "echarts-gl";
import MyEchartMap from "@/components/MyEchartMap.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: "",
  },

  legend: {
    show: false,
  },
  tooltip: {
    trigger: "item", // 关键：3D 系列需设置为 'item'
    show: true, // 显式开启
    extraCssText: "z-index:9",
    //  position: ['50%', '50%'],
    formatter: (params) => {
      if (!params.data) return "";
      const { name, value } = params.data;
      return `
      <div style="  border-radius: 4px;">
        <div style="font-weight: bold;">${name} </div>
          <div>监测点数量：${value[2]}个</div>
        <div>发生暂降次数：${value[3]}次</div>

      </div>
    `;
    },
    // 确保 3D 场景下不被遮挡
    zlevel: 100, // 提高层级，避免被地图或其他元素遮挡
  },

  options: {
    series: [],
  },
});
const renderChart = () => {
  EchartMap.value.GetEchar("北京");

  echartMapList.value.options.series = [
    {
      type: "scatter",
      mapName: "china",
      name: "变电站",
      coordinateSystem: "geo",
      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", // 替换为实际图标路径

      data: dataList.value.map((item) => {
        return {
          name: item.stationName,
          value: [
            item.longitude,
            item.latitude,
            item.lineCount,
            item.eventCount,
          ],
          itemStyle: { color: "#00FF00 " },
          symbolSize: 15, //大小15px
        };
      }),
      // [
      //   {
      //     name: "点1",
      //     value: ["116.345678", "39.876543", 0],
      //     itemStyle: { color: "#00FF00 " },
      //     symbolSize: 15, // 大小15px
      //   },

      // ],
    },
  ];
};

const init = () => {
  loading.value = true;

  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;

    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" },
  //     ],
  //   });
  // }
};
// 变电站变色
const setIcon = (name: string) => {
  EchartMap.value.setIcon(name);
};
onMounted(() => {});
defineExpose({
  init,
  setIcon,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.legend {
  position: absolute;
  left: 20px;
  bottom: 0px;
  width: 90px;
  height: 35px;
  font-size: 12px;
  .box {
    display: flex;
    align-items: center;

    div {
      &:nth-child(1) {
        width: 20px;
        height: 12px;
        border-radius: 3px;
        margin-right: 5px;
      }
    }
  }
}
</style>
