<template>
<!-- 河湖档案 -->
  <div id="hehudangan" v-loading="loading" element-loading-background="rgba(11, 18, 52, 0.3)">
    <el-row :gutter="10">
      <el-col :span="3"><div class="name">库容量(万m³):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.lakeVolume}}</div></el-col>
      <el-col :span="3"><div class="name">常态水位(m):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.mormalWaterLevel}}</div></el-col>
      <el-col :span="3"><div class="name">最高控制水位(m):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.maxControlWaterLevel}}</div></el-col>
      <el-col :span="3"><div class="name">保证水位(m):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.ecologyWaterLevel}}</div></el-col>
      <el-col :span="3"><div class="name">最大水深(m):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.maxWaterDepth}}</div></el-col>
      <el-col :span="3"><div class="name">平均水深(m):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.avgWaterDepth}}</div></el-col>
      <el-col :span="3"><div class="name">蓝线控制面积(ha):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.blueLineControlArea}}</div></el-col>
      <el-col :span="3"><div class="name">岸线长度(km):</div></el-col>
      <el-col :span="9"><div class="text">{{listData.lakeLine}}</div></el-col>
      <el-col :span="3"><div class="name">高程类别:</div></el-col>
      <el-col :span="9"><div class="text">黄海高程</div></el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="3"><div class="name">现场照片:</div></el-col>
      <el-col :span="9">
        <el-image v-if="listData.imgArr?.length>0"
            style="width:120px; height:120px"
            :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>
      </el-col>
    </el-row>
  </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;
      line-height: 30px;
    }
    .text {
      // min-height: 37px;
      // min-width: 200px;
      //   flex: 1;
      color: #8fbffe;
      background: #0d2359;
      border-radius: 6px;
      border: 1px solid #0b9bff;
      // padding: 7px 12px;
      height: 30px;
      line-height: 28px;
      padding: 0 10px;
    }
  // }
}
.el-col {
  margin-bottom:10px;
}
</style>