<template>
<!-- 河湖档案 -->
  <div id="hehudangan" v-loading="loading"
    element-loading-background="rgba(11, 18, 52, 0.3)">
     <div class="flex flex-justcontent-spacebetween">
       <div class="eachInfo">
      <div class="name">库容量(万m³):</div>
      <div class="text">{{listData.lakeVolume}}</div>
    </div>
     <div class="eachInfo">
      <div class="name">常态水位(m):</div>
      <div class="text">{{listData.mormalWaterLevel}}</div>
    </div>
     </div>
     <div class="flex flex-justcontent-spacebetween">
       <div class="eachInfo">
      <div class="name">最高控制水位(m):</div>
      <div class="text">{{listData.maxControlWaterLevel}}</div>
    </div>
     <div class="eachInfo">
      <div class="name">保证水位(m):</div>
      <div class="text">{{listData.ecologyWaterLevel}}</div>
    </div>
     </div>
     <div class="flex flex-justcontent-spacebetween">
       <div class="eachInfo">
      <div class="name">最大水深(m):</div>
      <div class="text">{{listData.maxWaterDepth}}</div>
    </div>
     <div class="eachInfo">
      <div class="name">平均水深(m):</div>
      <div class="text">{{listData.avgWaterDepth}}</div>
    </div>
     </div>
     <div class="flex flex-justcontent-spacebetween">
       <div class="eachInfo">
      <div class="name">蓝线控制面积(ha):</div>
      <div class="text">{{listData.blueLineControlArea}}</div>
    </div>
     <div class="eachInfo">
      <div class="name">岸线长度(km):</div>
      <div class="text">{{listData.lakeLine}}</div>
    </div>
     </div>
     <div class="flex flex-justcontent-spacebetween">
       <!-- <div class="eachInfo">
      <div class="name">河湖定位:</div>
      <el-icon style=" font-size: 22px; cursor: pointer;
  color: #ccdfff;"><LocationFilled /></el-icon>
    </div> -->
     <div class="eachInfo">
      <div class="name">高程类别:</div>
      <div class="text">黄海高程</div>
    </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="hehudangan">
const { proxy } = getCurrentInstance();
import {
  lakeInfoList,
} 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
  let parmas={
    id:props.Getproperties.id
  }
  lakeInfoList(parmas).then(res => {
    console.log('河湖档案详情数据', res);
  loading.value=false
    if (res && res.code == 200) {
      let data=res.data[0]
      listData.value=data
      listData.value.imgArr=listData.value.fileUrl?listData.value.fileUrl.split(','):[]
    }
  },(error)=>{
    loading.value=false
  });
}


onMounted(() => {
  gitDataFun()

});
</script>

<style lang="scss" scoped>
#hehudangan {
 
  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: 130px;
      text-align: right;
      padding-right: 10px;
    }
    .text {
      min-height: 37px;
      min-width: 200px;
        flex: 1;
      color: #8fbffe;
      background: #0d2359;
      border-radius: 6px;
      border: 1px solid #0b9bff;
      padding: 7px 12px;
    }
  }
}
</style>