<template>
  <!-- 厂站设施弹窗 -->
  <div class="cesiumPopup" id="cesiumPopupID" v-show="allData.popupShow">
    <div class="title">
      <div class="titleNamePP" v-if="allData.dataList.pumpName">{{ allData.dataList.pumpName }}</div>
      <div class="titleNamePP" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
      <div class="titleNamePP" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
      <div class="titleNamePP" v-if="allData.dataList.name">{{ allData.dataList.name }}</div>
      <div class="titleNamePP" v-if="allData.dataList.stName">{{ allData.dataList.stName }}</div>
      <div class="PopupClosed">
        <el-icon :size="18" @click="closePopupCES"><Close /></el-icon>
      </div>
    </div>
    <div class="dividerLine"></div>
    <div class="basicInfo" v-if="allData.dataList.pumpCode">
      <div class="basicContent">
        <div class="contentInfo">
          <div class="contentName">厂站编码：</div>
          <div class="contentValue">{{ allData.dataList.pumpCode }}</div>
          <div class="contentName">厂站类型：</div>
          <div class="contentValue">
            {{
              allData.dataList.pumpType == 'rain_water' ? '雨水泵站' : allData.dataList.pumpType == 'sewage_water' ? '污水泵站' : '雨污合建'
            }}
          </div>
        </div>
        <div class="contentInfo">
          <div class="contentName">建筑面积：</div>
          <div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
          <div class="contentName">设计规模：</div>
          <div class="contentValue">{{ allData.dataList.rainpump.designScaleSecond }} m³/s</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">泵机台数：</div>
          <div class="contentValue">{{ allData.dataList.rainpump.deviceCount }}台</div>
          <div class="contentName">建设单位：</div>
          <div class="contentValue" :title="allData.dataList.unitDep">{{ allData.dataList.unitDep }}</div>
        </div>
        <div class="contentInfo" style="width: 100%">
          <div class="contentName">地址：</div>
          <div class="contentValue" style="width: 100%">{{ allData.dataList.address }}</div>
        </div>
        <el-button type="warning" @click="checkGYT" style="margin: 20px 0px 0px 12%">查看工况图</el-button>
      </div>
    </div>

    <div class="basicInfo" v-if="allData.dataList.sewageCode">
      <div class="basicContent">
        <div class="contentInfo">
          <div class="contentName">厂站编码：</div>
          <div class="contentValue">{{ allData.dataList.sewageCode }}</div>
          <div class="contentName">出水标准：</div>
          <div class="contentValue">{{ allData.dataList.standard }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">核心工艺：</div>
          <div class="contentValue">{{ allData.dataList.workmanship }}</div>
          <div class="contentName">设计规模：</div>
          <div class="contentValue">{{ allData.dataList.planScale }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName1">尾水受纳水体：</div>
          <div class="contentValue">{{ allData.dataList.intoWater }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName1">地址：</div>
          <div class="contentValue" style="width: 195px">{{ allData.dataList.address }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName1">污水收集服务分区描述：</div>
          <div class="contentValue" :title="allData.dataList.address">{{ allData.dataList.region }}</div>
        </div>
      </div>
    </div>
    <div class="basicInfo" v-if="allData.dataList.pointType">
      <div class="basicContent">
        <div class="contentInfo">
          <div class="contentName">排口编码：</div>
          <div class="contentValue">{{ allData.dataList.pointNumber }}</div>
          <div class="contentName">所在道路：</div>
          <div class="contentValue">{{ allData.dataList.roadName }}</div>
        </div>
        <!-- <div class="contentInfo">
          <div class="contentName">排口类型：</div>
          <div class="contentValue">雨水排口</div>
          <div class="contentName">管线点高程：</div>
          <div class="contentValue">{{ allData.dataList.pipelinePointElevation }}</div>
        </div> -->
        <div class="contentInfo">
          <div class="contentName">管点材质：</div>
          <div class="contentValue">{{ allData.dataList.pointTexture }}</div>
          <div class="contentName">地面高程：</div>
          <div class="contentValue">{{ allData.dataList.groundElevation }}m</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">井底深度：</div>
          <div class="contentValue">{{ allData.dataList.bottomBuriedDepth }}</div>
          <div class="contentName">普查单位：</div>
          <div class="contentValue">{{ allData.dataList.operationalUnits }}</div>
        </div>
      </div>
    </div>

    <div class="basicInfo" v-if="allData.dataList.type == 'WSCLC'">
      <div class="basicContent">
        <div class="contentInfo">
          <div class="contentName">设计规模：</div>
          <div class="contentValue">{{ allData.dataList.designSize }}万吨/天</div>
          <div class="contentName">出水标准：</div>
          <div class="contentValue">{{ allData.dataList.criterion }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">排放水体：</div>
          <div class="contentValue">{{ allData.dataList.towater }}</div>
        </div>
      </div>
    </div>
    <div class="basicInfo" v-if="allData.dataList.originType">
      <div class="basicContent">
        <div class="contentInfo">
          <div class="contentName">内涝地址：</div>
          <div class="contentValue">{{ allData.dataList.address }}</div>
          <div class="contentName">行政辖区：</div>
          <div class="contentValue">{{ allData.dataList.jurisdiction }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">所属街道：</div>
          <div class="contentValue">{{ allData.dataList.belongsStreet }}</div>
          <div class="contentName">风险级别：</div>
          <div class="contentValue">{{ allData.dataList.riskLevel }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">内涝原因：</div>
          <div class="contentValue">{{ allData.dataList.originTypeName }}</div>
          <div class="contentName">积水次数 ：</div>
          <div class="contentValue">{{ allData.dataList.yearHappenCount }}次</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">最大深度：</div>
          <div class="contentValue">{{ allData.dataList.yearMaxDepth }}mm</div>
          <div class="contentName">退水时长 ：</div>
          <div class="contentValue">{{ allData.dataList.yearMaxHour }}h</div>
        </div>
      </div>
    </div>
    <div class="basicInfo" v-if="allData.dataList.type == 'YSBZ'">
      <div class="basicContent">
        <div class="contentInfo">
          <div class="contentName">泵机台数：</div>
          <div class="contentValue">{{ allData.dataList.ysNumber }}台</div>
          <div class="contentName">抽排量：</div>
          <div class="contentValue">{{ allData.dataList.yswater }}m³/s</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">泵站类型：</div>
          <div class="contentValue">{{ allData.dataList.Layer }}</div>
        </div>
      </div>
    </div>

    <div class="basicInfo" v-if="allData.dataList.type == 'WSBZ'">
      <div class="basicContent">
        <div class="contentInfo" v-if="allData.dataList.ysNumber != 0">
          <div class="contentName">雨水泵机台数：</div>
          <div class="contentValue">{{ allData.dataList.ysNumber }}台</div>
          <div class="contentName">雨水抽排量：</div>
          <div class="contentValue">{{ allData.dataList.yswater }}m³/s</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">污水泵机台数：</div>
          <div class="contentValue">{{ allData.dataList.wsNumber }}台</div>
          <div class="contentName">污水抽排量：</div>
          <div class="contentValue">{{ allData.dataList.wswater }}m³/s</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">泵站类型：</div>
          <div class="contentValue">{{ allData.dataList.Layer }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="CesiumPopup">
import { getImageUrl } from '@/utils/ruoyi';
import bus from '@/bus';
const allData = reactive({
  dataList: {},
  popupShow: false,
});

//
function closePopupCES() {
  allData.popupShow = false;
  bus.emit('closeCesiumPopup');
}

// 泵站工况图查看
function checkGYT() {
  bus.emit('checkBZGYT', allData.dataList);
}

onMounted(() => {
  bus.on('popupcontent', data => {
    allData.dataList = data.popupInfo;
    console.log(allData.dataList, 9999);
  });
});
onBeforeUnmount(() => {
  bus.off('popupcontent');
  bus.off('closeCesiumPopup');
});
</script>
<style lang="scss">
.cesiumPopup {
  position: absolute;
  width: 500px;
  height: 300px;
  padding: 10px;
  background: #003b6d;
  border: 1px solid #6acefe;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleNamePP {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b8ecff;
      line-height: 22px;
      margin: 5px;
      width: 330px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .PopupClosed {
      position: absolute;
      margin-left: 450px;
      height: 22px;
      z-index: 9999;
      cursor: pointer;
    }
  }

  .basicContent {
    position: absolute;
    top: 60px;
    left: -30px;
    .contentInfo {
      display: flex;
      align-items: center;
      margin-left: 50px;
      .contentName {
        margin: 3px;
        width: 100px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #b8ecff;
      }
      .contentName1 {
        margin: 3px;
        width: 185px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #b8ecff;
      }
      .contentValue {
        margin: 3px;
        width: 100px;
        font-size: 14px;
        font-weight: 400;
        color: #b8ecff;
        word-wrap: break-word;
      }
    }
  }
}
</style>