<template>
  <div id="shuiku_site">
    <div class="dialog-detail-box" v-if="Getproperties.stType == 'reservoir_water_level'">
      <div class="dialog-form-detail flex flex-r flex-wrap">
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水库名称</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.name">
            {{ dialogFormDetail.name }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">水库值班电话</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.dutyTelephone">
            {{ dialogFormDetail.dutyTelephone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div
            class="detail-value flex flex-align-center"
            :title="selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')"
          >
            <span v-if="dialogFormDetail.waterRegionCode">{{
              selectArrListLabel(alllist, dialogFormDetail.waterRegionCode, 'id', 'name')
            }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">工程规模</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="project_scale" :value="dialogFormDetail.projectScale" />
            <!-- 注意：这里未添加:title属性，因为dict-tag组件可能不支持 -->
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">街道</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.street">
            <span class="ellipsis">{{ dialogFormDetail.street }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">集水面积(km2)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.waterArea">
            {{ dialogFormDetail.waterArea }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">总库容(万m3)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.reservoirVolume">
            {{ dialogFormDetail.reservoirVolume }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">调洪库容(万m3)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.floodVolume">
            {{ dialogFormDetail.floodVolume }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">坝顶高程(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.damHight">
            {{ dialogFormDetail.damHight }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">正常蓄水位(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.normalWaterLevel">
            {{ dialogFormDetail.normalWaterLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">设计洪水位(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.designFloodLevel">
            {{ dialogFormDetail.designFloodLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">校核洪水位(m)</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.verifyFloodLevel">
            {{ dialogFormDetail.verifyFloodLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-姓名</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolUserName">
            {{ dialogFormDetail.patrolUserName }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-单位</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolWorkPlace">
            {{ dialogFormDetail.patrolWorkPlace }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-职务</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolPost">
            {{ dialogFormDetail.patrolPost }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">巡查责任人-电话</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.patrolPhone">
            {{ dialogFormDetail.patrolPhone }}
          </div>
        </div>

        <div class="flex flex-r" style="width: 100%" v-if="dialogFormDetail.fileUrl">
          <div class="detail-label flex flex-align-center">图片</div>
          <div class="detail-value flex flex-align-center">
            <el-image
              style="width: 80px; height: 80px"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :src="dialogFormDetail.fileUrl"
              fit="cover"
              :preview-src-list="[dialogFormDetail.fileUrl]"
            ></el-image>
            <!-- 注意：图片部分未添加:title属性，因为通常图片不需要这样的提示 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="shuiku_site">
const { proxy } = getCurrentInstance();
import { listwaterRegionInfo, getBaseDetail } from '@/api/MonitorAssetsOnMap';
import { getChineseFun } from '@/utils/ruoyi';
const { ownership, pump_station_type, usage_status, project_scale } = proxy.useDict(
  'ownership',
  'pump_station_type',
  'usage_status',
  'project_scale'
);

const props = defineProps({
  Getproperties: {
    type: Object,
  },
});

const alllist = ref([]);
function getListlast() {
  listwaterRegionInfo().then(response => {
    alllist.value = response.data;
  });
}
const dialogFormDetail = ref([]);

function getDetailBycodeAndDataid() {
  let params = {};
  if (props.Getproperties.stType == 'reservoir_water_level') {
    params = {
      dataId: props.Getproperties.id,
      dataCode: 'reservoir_info',
    };
  }
  getBaseDetail(params).then(res => {
    console.log('getBaseDetail', res);
    dialogFormDetail.value = res.data;
  });
}

onMounted(() => {
  getListlast();
  getDetailBycodeAndDataid();
  console.log('props.dataCode', props);
});
</script>

<style lang="scss" scoped>
#shuiku_site {
  width: 100%;
  height: 100%;

  .dialog-detail-box {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10px;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;
    font-weight: bold;

    .flex-r {
      min-height: 40px;
      max-height: 75px;
    }

    .detail-label {
      font-size: 12px;
      text-align: left;
      width: 160px;
      background: transparent;
      color: #ccefff;
      border: none;
    }

    .detail-value {
      font-size: 14px;
      text-align: left;
      width: calc(100% - 165px);
      align-items: center;
      background: transparent;
      color: #ccefff;
      border: none;
      align-items: center;
      overflow: hidden;
    }

    .ellipsis {
      width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 3; /* 显示最大行数 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dialog-form-detail {
      border: none;
    }

    .dialog-form-detail .flex-r {
      border: none;
    }
  }
}
.items-content {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 10px;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: auto;

  .contentitem {
    // height: 10px;
    // line-height: 20px;
    width: 50%;
    display: flex;

    .name {
      width: 80px;
      color: #ccefff;
    }

    .value {
      width: calc(90% - 80px);
      font-size: 13px;
      font-weight: bold;
    }

    .gxname {
      width: 110px;
    }

    .gxvalue {
      width: calc(90% - 100px);
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏超出容器宽度的文本 */
      text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
    }
  }
}

.img,
.textarea {
  width: 100% !important;
}
</style>