<template>
  <!-- 厂站设施弹窗 -->
  <div class="psPopup" id="psPopup" v-show="allData.popupShow">
    <div class="title">
      <div class="titleName" v-if="allData.dataList.pumpName">{{ allData.dataList.pumpName }}</div>
      <div class="titleName" v-if="allData.dataList.sewageName">{{ allData.dataList.sewageName }}</div>
      <div class="titleName" v-if="allData.dataList.roadName">{{ allData.dataList.roadName }}</div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup"><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'
                ? '污水'
                : allData.dataList.pumpType == 'drain_flooded'
                ? '排涝'
                : allData.dataList.pumpType
            }}
          </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.designScale }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">泵机台数：</div>
          <div class="contentValue">{{ allData.dataList.deviceCount }}台</div>
          <div class="contentName">建设单位：</div>
          <div class="contentValue" :title="allData.dataList.unitDep">{{ allData.dataList.unitDep }}</div>
        </div>
        <!-- <div class="contentInfo">
          <div class="contentName">汇水分区：</div>
          <div class="contentValue" :title="allData.dataList.catchmentArea">{{ allData.dataList.catchmentArea }}</div>
          <div class="contentName">污水系统：</div>
          <div class="contentValue" :title="allData.dataList.hhsxWaterCode">{{ allData.dataList.hhsxWaterCode }}</div>
        </div> -->
        <div class="contentInfo">
          <div class="contentName">起泵水位：</div>
          <div class="contentValue">{{ allData.dataList.qbWaterlevel }}</div>
          <div class="contentName">停泵水位：</div>
          <div class="contentValue">{{ allData.dataList.tbWaterlevel }}</div>
        </div>
        <div class="contentInfo">
          <div class="contentName">地址：</div>
          <div class="contentValue">{{ allData.dataList.address }}</div>
        </div>

        <!-- <div class="contentInfo">
          <div class="contentName">日抽排量：</div>
          <div class="contentValue">{{ allData.dataList.large }}m³/h</div>
          <div class="contentName">设计型号：</div>
          <div class="contentValue">{{ allData.dataList.model }}</div>
        </div> -->
        <el-button type="warning" size="small" style="position: absolute; right: -30px; bottom: -60px" @click="gongYiTuInfo">
          查看工艺图
        </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>
        <!-- <el-button type="warning" size="small" style="position: absolute; right: 80px; bottom: -60px" @click="gongYiTuInfo">
          查看工艺图
        </el-button> -->
      </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>
  <!-- 工艺流程图(目前只做城西泵站的) -->
  <el-dialog
    v-model="allData.gongYiTuShow"
    title="城西泵站工艺图"
    width="1550px"
    append-to-body
    class="gytDialog"
    style="margin-top: 20px !important"
  >
    <liuChengGongYiTu v-if="allData.gongYiTuShow"></liuChengGongYiTu>
  </el-dialog>
</template>

<script setup name="commonPopup">
import { getImageUrl } from '@/utils/ruoyi';
import bus from '@/bus';
import liuChengGongYiTu from '../stationGY/index.vue';
const allData = reactive({
  popupShow: false,
  dataList: {},
  srcList: [getImageUrl('tiaoxuchi.png', 'newImgs/paishuiImgs')],
  gongYiTuShow: false,
});

const closePopup = () => {
  allData.popupShow = false;
  newfiberMapbox.map.easeTo({
    center: [113.953, 30.906],
    zoom: 13.6,
    pitch: 55,
  });
  let clearSelectedFeature = [];
  newfiberMapbox.getLayers().forEach(feature => {
    if (feature.newfiberId == 'highlight_point') {
      clearSelectedFeature.push(feature);
    }
  });

  if (!!clearSelectedFeature.length) {
    clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  }
};
const gongYiTuInfo = () => {
  allData.gongYiTuShow = true;
};

onMounted(() => {
  bus.on('closeCommonPopup', closeCommonPopup => {
    allData.popupShow = closeCommonPopup;
  });
  bus.on('popupData', data => {
    allData.popupShow = data.popupShow;
    allData.dataList = data.popupInfo;
    console.log(allData.dataList, 9999);
    !!allData.dataList.pumpType && allData.dataList.pumpType == 'rain_water' ? (allData.dataList.pumpType = '雨水泵站') : '污水泵站';
  });
});
onBeforeUnmount(() => {
  bus.off('popupData');
  bus.off('closeCommonPopup');
});
</script>
<style lang="scss">
// 样式重新定义
.gytDialog {
  // prettier-ignore
  .el-dialog__header{
    height: 50PX !important;
    padding:20PX !important
  }
  // prettier-ignore
  .el-dialog__body {
    padding: 0px !important;
    max-height: 1000PX !important;
    height: calc(100vh - 120PX) !important ;
  }
}
.psPopup {
  width: 500px;
  height: 300px;
  padding: 10px;
  background: rgba(0, 49, 78, 0.5);
  border: 1px solid #094065;
  z-index: 111;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleName {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ccf1ff;
      line-height: 22px;
      margin: 5px;
      width: 330px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .closePopup {
      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;
        // height: 20px;
        width: 80px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #00d1ff;
      }
      .contentName1 {
        margin: 3px;
        // height: 20px;
        width: 185px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #00d1ff;
      }
      .contentValue {
        margin: 3px;
        // height: 20px;
        width: 100px;
        font-size: 14px;
        font-weight: 400;
        // line-height: 20px;
        color: #00d1ff;
        // overflow: hidden;
        word-wrap: break-word;
        // white-space: nowrap;
        // text-overflow: ellipsis;
      }
    }
  }
}
</style>