<template>
  <div id="W_MapBox" ref="rootmap">
    <!-- !--属性框-->
    <div class="popupdefect" ref="marDom" id="marDom">
      <div class="ol-popup-Title1">
        <a class="ol-popup-closer" @click="closepopupdefect()">X</a>
      </div>

      <div class="ol-popup-Title2">
        {{ currentLayerNamedefect }}
      </div>

      <div class="CoeLeft">
        <n-space>
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 1 }"
            @click="ChouPaiListCheck(1)"
          >
            厂站简介
          </div>
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 2 }"
            @click="ChouPaiListCheck(2)"
          >
            工艺组态
          </div>
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 3 }"
            @click="ChouPaiListCheck(3)"
          >
            生产运行
          </div>
        </n-space>
        <div class="IfBox" v-if="CoeListCheckIndex == 1">
          <div class="divclass1">
            <div
              class="divclass"
              v-for="(value, key, index) in resPDatadefect"
              :key="index"
            >
              <div class="itemclasss">{{ key }}</div>
              <div class="itemclasss itemclasssValue">{{ value }}</div>
            </div>
          </div>

          <div class="divclass2">
            <img
              src="@/assets/Imgs/LiuYuYiZhangTu/ceshi.png"
              class="divclass2Imgs"
            />
            <p class="divclass2Font">
             <p>简介</p>
              铁路桥地下污水厂采用MBR处理工艺，日处理量为10万吨，主要解决黄雄安和铁路桥上游合流制片区的旱季截污问题，解决旱季6~11
              万吨污水直排的问题，从明渠的源头进行控制，并且可以兼顾一部分雨天的合流制溢流污染控制；此外铁路桥污水厂尾水可实现生态补水功能，新增净化厂的出水可以为黄孝河明渠提供优质补水。
            </p>
          </div>
        </div>
        <div class="IfBox" v-else-if="CoeListCheckIndex == 2"></div>
        <div class="IfBox" v-else></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";
import * as GisFunction from "@/utils/olmapCommon"; //引入所有的cesium封装方法
export default {
  name: "W_MapBox",
  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,
      CoeListCheckIndex: 1,
    });
    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: "W_MapBox",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
            zIndex: 1,
          }),
        ],
        view: new View({
          projection: "EPSG:4326", //使用这个坐标系
          center: [114.295, 30.594],
          zoom: 11.5,
        }),
      });
      //添加缺陷点属性面板
      // AllData.marDoms = document.getElementById("a123")
      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 = "/static/img/ZhaZhan.png"; // 闸站
      let imgUrl2 = "/static/img/YuShuiBengZhan.png"; // 雨水泵站
      let imgUrl3 = "/static/img/WuShuiBengZhan.png"; // 污水泵站
      let imgUrl4 = "/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);
      }
    }

    // 抽排量站点点击切换
    function ChouPaiListCheck(index) {
      AllData.CoeListCheckIndex = index;
    }
    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,
      ChouPaiListCheck,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#W_MapBox {
  width: 100%;
  height: 100%;
}

.popupdefect {
  position: absolute;
  width: 820px;
  left: -417px;
  bottom: 26px;
  background: #000000;
  z-index: 99999999;

  .ol-popup-Title1 {
    background: linear-gradient(
      90deg,
      rgba(25, 255, 241, 0.2) 0%,
      rgba(25, 255, 241, 0) 100%
    );
    text-align: right;
    height: 26px;
  }
  .ol-popup-closer {
    color: #fff;
    cursor: pointer;
    margin: 5px 15px;
    display: inline-block;
  }

  .ol-popup-Title2 {
    color: #85dff6 !important;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-left: 20px;
    font-size: 18px;
    margin-top: 10px;
  }

  .CoeLeft {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .IfBox {
      width: 100%;
      height: 340px;
      margin-top: 20px;
    }

    .CoeList {
      width: 142px;
      height: 30px;
      background: #0c5c5f;
      border: 1px solid #313a3a;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #78828a;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .CoeListCheck {
      background: #0c5c5f;
      border: 1px solid #dafffe;
      color: #dafffe;
    }
  }
}

.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;
}

.divclass1 {
  width: 400px;
  display: inline-block;
  height: 330px;
  overflow: auto;

  .divclass {
    height: 36px;
    width: 390px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 20px;
  }

  .itemclasss {
    font-size: 14px;
    line-height: 36px;
    margin-top: 5px;
  }

  .itemclasssValue {
    font-weight: bold;
    color: #ffd861;
    padding-right: 20px;
  }
}

.divclass2 {
  width: 390px;
  height: 330px;
  overflow: auto;
  display: inline-block;

  .divclass2Imgs {
    width: 320px;
    height: 200px;
    margin-left: 35px;
  }

  .divclass2Font {
    font-weight: bold;
    color: #dafffe;
    font-size: 12px;
  }
}
</style>