<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>