<template>
  <div id="oneMapDataMap" ref="rootmap">
    <!-- !--属性框-->
    <div class="popupdefect" ref="marDom" id="marDom">
      <a
        style="
          color: #fff;
          position: absolute;
          top: 2px;
          right: 8px;
          cursor: pointer;
        "
        class="ol-popup-closer"
        @click="closepopupdefect()"
        >X</a
      >
      <div
        style="
          color: #fff !important;
          font-size: 17px;
          font-weight: bold;
          background: rgb(60 194 201);
          text-align: center;
        "
      >
        {{ currentLayerNamedefect }}
      </div>

      <div style="width: 100%; padding-top: 10px; padding-bottom: 10px">
        <div
          class="divclass"
          v-for="(value, key, index) in resPDatadefect"
          :key="index"
        >
          <div class="itemclasss">{{ key }}</div>
          <div class="itemclasss">{{ value }}</div>
        </div>
      </div>

      <div class="triangle common"></div>
    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import FormatWKT from "ol/format/WKT";
import TileWMS from "ol/source/TileWMS";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import XYZ from "ol/source/XYZ";
import Overlay from "ol/Overlay.js";
import { ref, reactive, toRefs, onMounted } from "vue";

import bus from "@/utils/util";
export default {
  name: "oneMapDataMap",
  setup() {
    const AllData = reactive({
      // 声明变量
      map: null,
      Sourceszz: null,
      layersZZ: null,
      Sourceysbz: null,
      layersYSBZ: null,
      Sourcewsbz: null,
      layersWSBZ: null,
      Sourcetxc: null,
      layersTXC: null,
      menu_overlaydefect: null,
      currentLayerNamedefect: "",
      resPDatadefect: [],
      marDoms: null,
    });
    const marDom = ref(null);
    function closepopupdefect() {
      if (AllData.menu_overlaydefect && AllData.menu_overlaydefect != "")
        AllData.menu_overlaydefect.setPosition(undefined);
    }
    function initMap() {
      AllData.map = new Map({
        target: "oneMapDataMap",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer/tile/{z}/{y}/{x}",
            }),
            zIndex: 1,
          }),
        ],
        view: new View({
          projection: "EPSG:4326", //使用这个坐标系
          center: [114.295, 30.594],
          zoom: 11.5,
        }),
      });
      // console.log("popupdefect", $ref.popupdefect)
      //添加缺陷点属性面板
      // AllData.marDoms = document.getElementById("a123")
      // console.log(111111111111111111,document.getElementsByClassName("popupdefect")[0])
      console.log(marDom.value);
      AllData.menu_overlaydefect = new Overlay({
        element: marDom.value,
        //element:document.getElementById("marDom"),
        autoPan: true,
        // positioning: "bottom-center",
        // offset: [0, -20]
      });

      AllData.menu_overlaydefect.setVisible(false);
      AllData.map.addOverlay(AllData.menu_overlaydefect);

      //鼠标移动事件
      AllData.map.on("pointermove", (evt) => {
        var pixel = AllData.map.getEventPixel(evt.originalEvent);
        var hit = AllData.map.hasFeatureAtPixel(pixel);
        AllData.map.getTargetElement().style.cursor = hit ? "pointer" : "";
      });

      //鼠标点击事件
      AllData.map.on("click", (e) => {
        e.preventDefault();
        closepopupdefect();

        var pixel = AllData.map.getEventPixel(e.originalEvent);
        var feature = AllData.map.forEachFeatureAtPixel(
          pixel,
          function (feature, layer) {
            return feature;
          }
        );

        if (feature) {
          // if(feature.type=="闸站")
          // {

          // }
          console.log(feature);

          var data = {
            "类型:": feature.cell.stationType || "",
            "名称:": feature.cell.name || "",
            "安装位置:": feature.cell.address || "",
            经度: feature.cell.lon || "",
            纬度: feature.cell.lat || "",
            覆盖区域: feature.cell.覆盖区域 || "",
            日处理量: feature.cell.日处理量 || "",
            最大抽排量: feature.cell.最大抽排量 || "",
            日最大抽排量: feature.cell.日最大抽排量 || "",
            运行负荷: feature.cell.运行负荷 || "",
            累计当天处理量: feature.cell.累计当天处理量 || "",
          };

          //筛选data为空的不显示
          var lastresult = {};
          for (let key in data) {
            if (data[key] != "") {
              lastresult[key] = data[key];
            }
          }
          console.log(lastresult);

          AllData.resPDatadefect = lastresult;
          // MarkDom.style.display="block"
          AllData.currentLayerNamedefect = feature.cell.name;
          AllData.menu_overlaydefect.setVisible(true);

          AllData.menu_overlaydefect.setPosition([
            e.coordinate[0],
            e.coordinate[1],
          ]);

          AllData.map.getView().setCenter([e.coordinate[0], e.coordinate[1]]);
        }
      });
    }

    function locateToTarget(index) {
      var listData = [
        {
          lon: 114.299834,
          lat: 30.624262,
          stationType: "闸站",
          name: "西渠闸门",
          address: "汉口西渠1号点附近",
        },
        {
          lon: 114.298601,
          lat: 30.600581,
          stationType: "闸站",
          name: "解放大道澳门路闸",
          address: "解放大道与澳门路交叉口",
        },
        {
          lon: 114.2889,
          lat: 30.577341,
          stationType: "闸站",
          name: "中山大道前进四路闸",
          address: "中山大道与前进四路交叉口",
        },

        {
          lon: 114.264018,
          lat: 30.594424,
          stationType: "污水泵站",
          name: "王家墩污水泵站",
          address: "王家墩",
          日处理量: "10万立方米",
          运行负荷: "9立方米每秒",
          累计当天处理量: "10万立方米",
        },

        {
          lon: 114.285454,
          lat: 30.639734,
          stationType: "雨水泵站",
          name: "后湖二期泵站",
          address: "后湖片区",
          最大抽排量: "10万立方米",
          日最大抽排量: "8万立方米",
        },
        {
          lon: 114.231538,
          lat: 30.577095,
          stationType: "雨水泵站",
          name: "铁桥路泵站",
          address: "汉口铁桥路",
          最大抽排量: "8万立方米",
          日最大抽排量: "7万立方米",
        },
        {
          lon: 114.227347,
          lat: 30.770662,
          stationType: "雨水泵站",
          name: "机场河补水泵站",
          address: "机场高速段",
          最大抽排量: "7万立方米",
          日最大抽排量: "6万立方米",
        },

        {
          lon: 114.23972,
          lat: 30.619935,
          stationType: "调蓄池",
          name: "长青公园地下调蓄池",
          address: "长青公园",
          覆盖区域: "长青公园附近片区",
          日处理量: "6万立方米",
        },
        {
          lon: 114.285502,
          lat: 30.617127,
          stationType: "调蓄池",
          name: "黄孝河CSO调蓄",
          address: "黄孝河2号点附近",
          覆盖区域: "黄孝河路主干及片区",
          日处理量: "8万立方米",
        },
        {
          lon: 114.195307,
          lat: 30.763984,
          stationType: "调蓄池",
          name: "机场河CSO调蓄",
          address: "机场河1号点",
          覆盖区域: "黄陂机场周边20平方公里",
          日处理量: "5万立方米",
        },
      ];

      var cell = listData[index];

      var data = {
        "类型:": cell.stationType || "",
        "名称:": cell.name || "",
        "安装位置:": cell.address || "",
        经度: cell.lon || "",
        纬度: cell.lat || "",
        覆盖区域: cell.覆盖区域 || "",
        日处理量: cell.日处理量 || "",
        最大抽排量: cell.最大抽排量 || "",
        日最大抽排量: cell.日最大抽排量 || "",
        运行负荷: cell.运行负荷 || "",
        累计当天处理量: cell.累计当天处理量 || "",
      };

      //筛选data为空的不显示
      var lastresult = {};
      for (let key in data) {
        if (data[key] != "") {
          lastresult[key] = data[key];
        }
      }
      console.log(lastresult);

      AllData.resPDatadefect = lastresult;
      // MarkDom.style.display="block"
      AllData.currentLayerNamedefect = cell.name;

      AllData.menu_overlaydefect.setVisible(true);

      AllData.menu_overlaydefect.setPosition([cell.lon, cell.lat]);

      AllData.map.getView().setCenter([cell.lon, cell.lat]);
    }

    function addWSCLCToMap(imgUrl, listData, type) {
      var wkt = "POINT(" + listData.lon + " " + listData.lat + ")";
      var feature = new FormatWKT().readFeature(wkt);
      feature.typeid = type;
      feature.lon = listData.lon; //经度
      feature.lat = listData.lat; //维度
      feature.cell = listData;

      //  var color="red"
      //  if(listData.stName=="桂林洋污水处理厂")
      // color="red"
      // else if(listData.stName=="福创溪监测点")
      // color="#1dfdf8"
      // if(listData.stName=="江东新区水质净化中心")
      // color="#45c4aa"

      feature.setStyle(
        new Style({
          // text: new Text({
          //               text: listData.stName,
          //               font: "bold 12px 微软雅黑",
          //               fill: new Fill({
          //                   color: color,
          //               }),
          //               offsetY: -10,
          //               textAlign: "center",
          //               textBaseline: "bottom",
          //           }),

          image: new Icon({
            src: imgUrl,
            scale: 0.5,
          }),
          zIndex: 999999,
        })
      );

      return feature;
    }
    //开关图层,layerid分别传入1，2，3，4代表从上往下四个图层；flag给true代表显示图层，给false代表隐藏图层；
    function switchLayer(layerid, flag) {
      if (layerid == 1) {
        if (AllData.layersZZ) AllData.layersZZ.setVisible(flag);
      } else if (layerid == 2) {
        if (AllData.layersWSBZ) AllData.layersWSBZ.setVisible(flag);
      } else if (layerid == 3) {
        if (AllData.layersYSBZ) AllData.layersYSBZ.setVisible(flag);
      } else if (layerid == 4) {
        if (AllData.layersTXC) AllData.layersTXC.setVisible(flag);
      }
    }

    function initAllStations() {
      //清除所有
      if (AllData.Sourceszz) AllData.Sourceszz.clear();
      if (AllData.layersZZ) AllData.map.removeLayer(AllData.layersZZ); //闸站
      if (AllData.Sourceysbz) AllData.Sourceysbz.clear();
      if (AllData.layersYSBZ) AllData.map.removeLayer(AllData.layersYSBZ); //雨水泵站
      if (AllData.Sourcewsbz) AllData.Sourcewsbz.clear();
      if (AllData.layersWSBZ) AllData.map.removeLayer(AllData.layersWSBZ); //污水泵站
      if (AllData.Sourcetxc) AllData.Sourcetxc.clear();
      if (AllData.layersTXC) AllData.map.removeLayer(AllData.layersTXC); //调蓄池

      //添加矢量图层
      AllData.Sourceszz = new SourceVector({
        wrapX: false,
      });
      AllData.layersZZ = new LayerVector({
        source: AllData.Sourceszz,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Sourceysbz = new SourceVector({
        wrapX: false,
      });
      AllData.layersYSBZ = new LayerVector({
        source: AllData.Sourceysbz,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Sourcewsbz = new SourceVector({
        wrapX: false,
      });
      AllData.layersWSBZ = new LayerVector({
        source: AllData.Sourcewsbz,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Sourcetxc = new SourceVector({
        wrapX: false,
      });
      AllData.layersTXC = new LayerVector({
        source: AllData.Sourcetxc,
        zIndex: 999999999999999,
        visible: true,
      });

      let imgUrl1 = "./../../../../../public/static/img/ZhaZhan.png"; // 闸站
      let imgUrl2 = "./../../../../../public/static/img/YuShuiBengZhan.png"; // 雨水泵站
      let imgUrl3 = "./../../../../../public/static/img/WuShuiBengZhan.png"; // 污水泵站
      let imgUrl4 = "./../../../../../public/static/img/TiaoXuChhi.png"; // 调蓄池
      var listData = [
        {
          lon: 114.299834,
          lat: 30.624262,
          stationType: "闸站",
          name: "西渠闸门",
          address: "汉口西渠1号点附近",
        },
        {
          lon: 114.298601,
          lat: 30.600581,
          stationType: "闸站",
          name: "解放大道澳门路闸",
          address: "解放大道与澳门路交叉口",
        },
        {
          lon: 114.2889,
          lat: 30.577341,
          stationType: "闸站",
          name: "中山大道前进四路闸",
          address: "中山大道与前进四路交叉口",
        },

        {
          lon: 114.264018,
          lat: 30.594424,
          stationType: "污水泵站",
          name: "王家墩污水泵站",
          address: "王家墩",
          日处理量: "10万立方米",
          运行负荷: "9立方米每秒",
          累计当天处理量: "10万立方米",
        },

        {
          lon: 114.285454,
          lat: 30.639734,
          stationType: "雨水泵站",
          name: "后湖二期泵站",
          address: "后湖片区",
          最大抽排量: "10万立方米",
          日最大抽排量: "8万立方米",
        },
        {
          lon: 114.231538,
          lat: 30.577095,
          stationType: "雨水泵站",
          name: "铁桥路泵站",
          address: "汉口铁桥路",
          最大抽排量: "8万立方米",
          日最大抽排量: "7万立方米",
        },
        {
          lon: 114.227347,
          lat: 30.770662,
          stationType: "雨水泵站",
          name: "机场河补水泵站",
          address: "机场高速段",
          最大抽排量: "7万立方米",
          日最大抽排量: "6万立方米",
        },

        {
          lon: 114.23972,
          lat: 30.619935,
          stationType: "调蓄池",
          name: "长青公园地下调蓄池",
          address: "长青公园",
          覆盖区域: "长青公园附近片区",
          日处理量: "6万立方米",
        },
        {
          lon: 114.285502,
          lat: 30.617127,
          stationType: "调蓄池",
          name: "黄孝河CSO调蓄",
          address: "黄孝河2号点附近",
          覆盖区域: "黄孝河路主干及片区",
          日处理量: "8万立方米",
        },
        {
          lon: 114.195307,
          lat: 30.763984,
          stationType: "调蓄池",
          name: "机场河CSO调蓄",
          address: "机场河1号点",
          覆盖区域: "黄陂机场周边20平方公里",
          日处理量: "5万立方米",
        },
      ];

      if (listData.length > 0) {
        //添加图片
        for (let i = 0; i < listData.length; i++) {
          if (
            listData[i].stationType.indexOf("闸站") > -1 &&
            listData[i].lon &&
            listData[i].lat
          ) {
            var featurethis = addWSCLCToMap(imgUrl1, listData[i], "闸站");
            AllData.layersZZ.getSource().addFeature(featurethis);
          } else if (
            listData[i].stationType.indexOf("雨水泵站") > -1 &&
            listData[i].lon &&
            listData[i].lat
          ) {
            var featurethis = addWSCLCToMap(imgUrl2, listData[i], "雨水泵站");
            AllData.layersYSBZ.getSource().addFeature(featurethis);
          } else if (
            listData[i].stationType.indexOf("污水泵站") > -1 &&
            listData[i].lon &&
            listData[i].lat
          ) {
            var featurethis = addWSCLCToMap(imgUrl3, listData[i], "污水泵站");
            AllData.layersWSBZ.getSource().addFeature(featurethis);
          } else if (
            listData[i].stationType.indexOf("调蓄池") > -1 &&
            listData[i].lon &&
            listData[i].lat
          ) {
            var featurethis = addWSCLCToMap(imgUrl4, listData[i], "调蓄池");
            AllData.layersTXC.getSource().addFeature(featurethis);
          }
        }

        AllData.map.addLayer(AllData.layersZZ);
        AllData.map.addLayer(AllData.layersYSBZ);
        AllData.map.addLayer(AllData.layersWSBZ);
        AllData.map.addLayer(AllData.layersTXC);
      }
    }
    onMounted(() => {
      initMap();
      initAllStations();
      // 监听兄弟组件事件
      // 选择站点
      bus.on("siteClick", (e) => {
        console.log(e);
        locateToTarget(e.ZhaId);
      });
      // 选择类型
      bus.on("groupClick", (e) => {
        console.log(e);
        switchLayer(e.id, e.isChecked);
      });
    });
    return {
      initMap,
      initAllStations,
      addWSCLCToMap,
      switchLayer,
      closepopupdefect,
      locateToTarget,
      ...toRefs(AllData),
      marDom,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#oneMapDataMap {
  width: 100%;
  height: 100%;
}

.popupdefect {
  position: absolute;
  width: 298px;
  left: -150px;
  bottom: 26px;
  background: #4aabbbde;
  z-index: 99999999;
  box-shadow: 0px 0px 10px 5px #90ebea;
}
.divclass {
  height: 30px;
  width: 90%;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-left: 20px;
}

.itemclasss {
  font-size: 14px;
  line-height: 30px;
  margin-top: 5px;
}
.bubble {
  width: 200px;
  height: 50px;
  border: 5px solid gray;
  position: relative;
}
.common {
  width: 0;
  height: 0;
  position: absolute; /* 使用绝对定位 */
  left: 50%;
  transform: translate(-50%, 0); /* 水平居中 */
}
.triangle {
  bottom: -10px;
  border-top: 10px solid gray;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.cover {
  bottom: -13px;
  border-top: 20px solid gray;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
</style>