<template>
  <div id="JichuXinxi_site">
        <div class="dialog-detail-box" v-if="Getproperties.dataCode == 'sewage_pump_station_info'">
      <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">
            {{ 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">
            <dict-tag :options="usage_status" :value="dialogFormDetail.usageStatus" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">建成日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.completeDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</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">
            {{ dialogFormDetail.usedYear }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">泵机个数</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.pumpNumber }}
          </div>
        </div>

        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">地面高程</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.elevation }}
          </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.plan">
            {{ dialogFormDetail.plan }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">所属水系</div>
          <div class="detail-value flex flex-align-center">
            <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" :title="dialogFormDetail.address">
            <span class="ellipsis">{{ dialogFormDetail.address }}</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="pump_station_type" :value="dialogFormDetail.type" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">设计流量(m/s)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.designFlowRate }}
          </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">权属</div>
          <div class="detail-value flex flex-align-center">
            <dict-tag :options="ownership" :value="dialogFormDetail.ownership" />
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">权属单位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.ownershipUnit }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">负责人</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPerson }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">负责人电话</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.dutyPersonPhone }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">维护日期</div>
          <div class="detail-value flex flex-align-center">
            <span>{{ parseTime(dialogFormDetail.maintenanceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</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">
            {{ dialogFormDetail.startLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">控制水位</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.controlLevel }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">装机功率(kw)</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.power }}
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">抽排水体</div>
          <div class="detail-value flex flex-align-center">
            {{ dialogFormDetail.waterBodies }}
          </div>
        </div>

        <div class="flex flex-r textarea" 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>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

} = proxy.useDict(
  'ownership',
  'pump_station_type',
  'usage_status',
  
);

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 = {
    dataId: props.Getproperties.dataId,
    dataCode: props.Getproperties.dataCode,
  };
  getBaseDetail(params).then(res => {
    console.log('getBaseDetail', res);
    dialogFormDetail.value = res.data;
  });
}


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

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