<template>
  <div class="cesiumPopup" id="cesiumPopupID" v-show="AllData.popupShow">
    <div class="title">
      <div class="titleNameIcon"></div>
      <div class="titleNamePP">
        {{ AllData.dataList.roadName }}
      </div>
      <!-- <div class="PopupClosed">
        <el-icon :size="18" @click="closePopupCES"><Close /></el-icon>
      </div> -->
    </div>
    <div
      class="basicInfo"
      style="margin-top: 10px"
      v-if="AllData.dataList.code == 200"
      @click="showStreetLayer()"
    >
      <img :src="AllData.dataList.data.base64" />
    </div>
  </div>
</template>

<script setup name="popup">
import { ref, reactive, toRefs, onMounted } from "vue";
import bus from "@/bus";

const AllData = reactive({
  dataList: {},
  popupShow: false,
  streetPosition: null,
});
//街景弹框点击事件
const showStreetLayer = () => {
  AllData.dataList.RefName = "zhoubianjiejing";
  AllData.dataList.NoPromise = true;
  AllData.dataList.Getmenuarr = [
    {
      menuName: "周边全景",
      moduleName: "zhoubianjiejing",
      pointName: "",
      pointType: "",
      show: true,
    },
  ];
  AllData.dataList.comIDs = ["zhoubianjiejing"];
  bus.emit("DynamicBus", AllData.dataList);
};
onMounted(() => {
  bus.on("popupcontent", (params) => {
    console.log("popup接收地图标注点值---111", params);

    // 排水弹窗
    if (params.popupInfo.type == "paishuiSupervise") {
      AllData.popupShow = false;
      let data = {
        title: "水位计：" + params.popupInfo.name,
        comIDs: ["JC_dialog", "JC_oldList"],
        SiteNo: params.popupInfo.siteNo,
      };
      bus.emit("publicDialog", data);
      return;
    }
    AllData.streetPosition = params.point;
    AllData.dataList = params.popupInfo;
    let pipePopupDiv = document.getElementById("cesiumPopupID");

    let popupCenter,
      center,
      offsets = null;
    if (AllData.dataList.geometry) {
      if (AllData.dataList.geometry.includes("LINESTRING")) {
        popupCenter = turf.center(
          turf.feature(Terraformer.WKT.parse(AllData.dataList.geometry))
        ).geometry.coordinates;
      } else {
        popupCenter = Terraformer.WKT.parse(AllData.dataList.geometry).coordinates;
      }
      center = [popupCenter[0], popupCenter[1]];
      offsets = [-130, 200];
    } else {
      center = [params.point[0], params.point[1] + 0.0005];
      offsets = [-150, 200];
    }
    if (AllData.dataList.pumpCode) {
      AllData.dataList.rainpump = JSON.parse(AllData.dataList.rainpump);
      AllData.dataList.sweagepump = JSON.parse(AllData.dataList.sweagepump);
    }
    AllData.dataList.geometry = `POINT(${params.point.join(" ")})`;
    window.pipePopup = new mapboxL7.Popup({
      html: pipePopupDiv,
      lngLat: {
        lng: popupCenter ? popupCenter[0] : params.point[0],
        lat: popupCenter ? popupCenter[1] : params.point[1],
      },
      anchor: "center",
      offsets: offsets ? offsets : [-90, 130],
      autoClose: false,
    });
    newfiberMap.addPopup(pipePopup);
    newfiberMap.map.easeTo({
      center: center,
      zoom: 18,
    });
    AllData.popupShow = true;
    // 建筑社区弹框
    if (params.popupInfo.type == "HMJZYSQ") {
      AllData.popupShow = false;
      let data = {
        title: params.popupInfo.name,
        comIDs: ["xxinformation"],
      };
      bus.emit("publicDialog", data);
      setTimeout(() => {
        bus.emit("xxinformationList", params);
      }, 100);
    }
    if (AllData.dataList.siteType == "rain") changeDate(); //雨量站曲线图
    if (AllData.dataList.type == "waterCourse") changeDateSW(); //河道水位计
    if (AllData.dataList.type == "waterLoging") changeDateJSD(); //内涝积水点
  });
});
onBeforeUnmount(() => {
  bus.off("popupcontent");
});
</script>

<style lang="scss">
.l7-popup-close-button {
  right: 32px !important;
  top: 32px !important;
}
.cesiumPopup {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
  border-radius: 6px;
  border: 1px solid #6acefe;
  box-shadow: inset 0 0 5px 5px #47eef38a;
  .title {
    background: linear-gradient(
      90deg,
      rgba(14, 210, 254, 0.5) 0%,
      rgba(31, 221, 255, 0.2) 100%
    );
    background-size: cover;
    display: flex;
    align-items: center;

    .titleNameIcon {
      height: 17px;
      width: 14px;
      background: url("@/assets/images/pictureOnMap/titleIcon.png") no-repeat;
      background-size: 100% 100%;
      margin-left: 10px;
    }
    .titleNamePP {
      width: 450px;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b8ecff;
      line-height: 22px;
      margin: 5px;
      overflow: hidden;
      text-overflow: ellipsis; /* 超出宽度后显示省略号 */
      white-space: nowrap; /* 限制不允许换行 */
      &:before {
        // display: block;
        // content: '';
        // width: 3px;
        // height: 16px;
        // background: #00d1ff;
        // margin-right: 10px;
      }
    }
    .PopupClosed {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 9999;
      cursor: pointer;
      color: #cee3ecff;
    }
  }
}
</style>