<template>
<!-- 流域介绍 -->
  <div id="liuyujieshaoHeHu" v-loading="loading"
    element-loading-background="rgba(11, 18, 52, 0.3)">
    <!-- <div class="eachInfo">
      <div class="name">地形地貌:</div>
      <div class="text">{{listData.lakeVolume}}</div>
    </div> -->
     <div class="eachInfo">
      <div class="name">流域介绍:</div>
      <div class="text">{{listData.description}}</div>
    </div>
     
    <div class="eachInfo">
      <div class="name">流域分区:</div>
      <div>
         <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>
      </div>
    </div>
    
  </div>
</template>

<script setup name="liuyujieshaoHeHu">
const { proxy } = getCurrentInstance();
import {
  waterRegionInfo,
} 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
  waterRegionInfo(props.Getproperties.waterRegionCode).then(res => {
    console.log('流域介绍详情数据', res);
  loading.value=false
    if (res && res.code == 200) {
      let data=res.data
      listData.value=data
      listData.value.imgArr=listData.value.fileUrl?listData.value.fileUrl.split(','):[]
    }
  },(error)=>{
    loading.value=false
  });
}


onMounted(() => {
  gitDataFun()

});
</script>

<style lang="scss" scoped>
#liuyujieshaoHeHu {
 
  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>