<template>
  <div class="cesiumPopup" id="cesiumPopupID" v-show="AllData.popupShow">
    <div class="title">
      <div class="titleNameIcon"></div>
      <div class="titleNamePP">
        {{ AllData.dataList.name }}
      </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 = () => {
  dataList.RefName = "zhoubianjiejing";
  dataList.NoPromise = true;
  dataList.Getmenuarr = [
    {
      menuName: "周边全景",
      moduleName: "zhoubianjiejing",
      pointName: "",
      pointType: "",
      show: true,
    },
  ];
  dataList.comIDs = ["zhoubianjiejing"];
  bus.emit("DynamicBus", dataList);
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.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/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>