<template>
  <div id="JC_dialog">
    <div class="table-content">
      <el-form :model="ListData">
        <!-- 常规 -->
        <div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点编码:" prop="" class="mb5">
                <span class="title">{{ ListData.siteNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站点名称:" prop="" class="mb5">
                <span class="title">{{ ListData.siteName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="安装设备:" prop="" class="mb5">
                <span class="title">{{ ListData.shebei }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装位置:" prop="" class="mb5">
                <span class="title">{{ ListData.weizhi }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="水&emsp;&emsp;深:" prop="" class="mb5">
                <span class="title">{{ ListData.z + '米' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装高度:" prop="" class="mb5">
                <span class="title">{{ ListData.h + '米' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="信号强度:" prop="" class="mb5">
                <span class="title">{{ ListData.q }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电&emsp;&emsp;量:" prop="" class="mb5">
                <span class="title">{{ ListData.dl + '米' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="电源电压:" prop="" class="mb5">
                <span class="title">{{ ListData.dy + '伏特' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监测状态:" prop="" class="mb5">
                <span class="title">{{ ListData.state }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="监测时间:" prop="" class="mb5">
                <span class="title">{{ ListData.jcTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="存储时间:" prop="" class="mb5">
                <span class="title">{{ ListData.cunchuTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点名称:" prop="" class="mb5">
                <span class="title">{{ '东关大街与长青路交叉口' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="水&emsp;&emsp;深:" prop="" class="mb5">
                <span class="title">{{ 0 + ' 米' }}</span>
              </el-form-item>
            </el-col>
          </el-row> -->
        </div>
        <!-- 积水 -->
        <!-- <div v-show="showData == 1">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="站点图片:" prop="" class="mb5">
                <el-image
                  v-for="(item, index) in ListData.fileList"
                  style="width: 130px; height: 150px; margin-right: 20px; margin-bottom: 10px"
                  :src="item.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="
                    ListData.fileList.map(item => {
                      return item.url;
                    })
                  "
                  :initial-index="index"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div> -->
      </el-form>
    </div>
  </div>
</template>

<script setup name="JC_dialog">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
import { waterloggingArchiveList } from '@/api/system/tanchuang';
const ListData = ref({
  siteNo: '2024101601',
  siteName: '王家坪旧址门口',
  shebei: '水位计',
  weizhi: '延安市宝塔区凤凰山街道王家坪革命旧址-大门',
  z: '0',
  h: '0.017',
  q: '96%',
  dl: '74%',
  dy: '3.96',
  state: '正常',
  jcTime: '2024-10-24 10:25:00',
  cunchuTime: '2024-10-24 10:25:04',
});

const showData = ref(null);
const loading = ref(false);
const props = defineProps({
  // 数据SiteNo
  SiteNo: {
    type: String,
  },
});

const getInfo = () => {
  loading.value = true;
  waterloggingArchiveList({ relevenceSiteNo: props.SiteNo }).then(res => {
    if (res.data[0]) {
      ListData.value = res.data[0];
      showData.value = 1;
    } else {
      showData.value = 0;
    }
    loading.value = false;
    // console.log('🚀 ~ waterloggingArchiveList ~ ListData.value:', ListData.value);
  });
};

onMounted(() => {
  // getInfo();
});
</script>

<style lang="scss" scoped>
#JC_dialog {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  .table-content {
    // height: calc(100% - 44px);
    width: 100%;
    padding: 0 20px;
    // overflow: hidden;
    overflow-y: auto;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
    :deep(.el-form-item__label) {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
}
:deep(.el-form-item__label) {
  color: #fff;
}

:deep(.el-form-item__content) {
  color: #fff;
}
</style>