<template>
<!-- 泵站档案信息 -->
  <div id="bengzhandanganfenxi" v-loading="loading"
    element-loading-background="rgba(11, 18, 52, 0.3)">
    <div class="flex flex-justcontent-spacebetween">
      <div class="eachInfo">
      <div class="name">泵站名称:</div>
      <div class="text">{{listData.name}}</div>
    </div>
     <div class="eachInfo">
      <div class="name">流域:</div>
      <div class="text">{{listData.waterRegionName}}</div>
    </div>
    </div>
    <div class="flex flex-justcontent-spacebetween">
       <div class="eachInfo">
      <div class="name">影响区域:</div>
      <div class="text">{{listData.discharge}}&nbsp;&nbsp;{{listData.elevation}}</div>
    </div>
    <div class="eachInfo">
      <div class="name">排出方向:</div>
      <div class="text">{{listData.discharge}}</div>
    </div>
      </div>
    
    <div class="eachInfo">
      <div class="name">泵站工艺:</div>
      <div class="text">{{listData.plan}}</div>
    </div>
    <div class="eachInfo">
      <div class="name">泵站介绍:</div>
      <div class="text">{{listData.description}}</div>
    </div>
     <div class="eachInfo">
      <div class="name">防汛专班联系人:</div>
      <div class="text">{{listData.dutyPerson}}  {{listData.dutyPersonPhone}}</div>
    </div>
    <div class="eachInfo">
      <div class="name">泵站图纸:</div>
      <div>
         <el-image v-if="listData.imgArr?.length>0"
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="listData.imgArr[0]"
              fit="cover"
              :preview-src-list="listData.imgArr"
              :preview-teleported="true"
            ></el-image>
      </div>
    </div>
    
  </div>
</template>

<script setup name="bengzhandanganfenxi">
const { proxy } = getCurrentInstance();
import {
  
  rainWaterPumpStationInfo,
} from '@/api/FloodControlAndDrainage.js';
const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  arrstcode: {
    type: Array,
  },
  arrid: {
    type: Array,
  },
  Getproperties:{
    type: Object,
  }
});
// 获取数据
const loading=ref(false)
const listData=ref({})

function gitDataFun() {
  loading.value=true
  rainWaterPumpStationInfo(props.Getproperties.id).then(res => {
    console.log('渍水风险详情数据', res);
  loading.value=false
    if (res && res.code == 200) {
      listData.value=res.data
      listData.value.imgArr=listData.value.fileUrl?listData.value.fileUrl.split(','):[]
    }
  },(error)=>{
    loading.value=false
  });
}


onMounted(() => {

    console.log('Getproperties123',props.Getproperties.dataId);
  gitDataFun()

});
</script>

<style lang="scss" scoped>
#bengzhandanganfenxi {
  width: 100%;
  height: 100%;
  color: #ccefff;
  padding: 20px 30px;
  overflow-y: auto;
  .eachInfo {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 20px;
    
    .name {
      color: #ccdfff;
      min-width: 120px;
      text-align: right;
      padding-right: 10px;
    }
    .text {
      min-height: 37px;
        flex: 1;
        min-width: 300px;
      color: #8fbffe;
      background: #0d2359;
      border-radius: 6px;
      border: 1px solid #0b9bff;
      padding: 7px 12px;
    }
  }
}
</style>