<template>
  <div id="danganInfo">
    <div class="table-content">
      <el-form :model="ListData">
        <!-- 常规 -->
        <div v-show="showData == 0">
          <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>
          <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-row>
        </div>
        <!-- 积水 -->
        <div v-show="showData == 1">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点名称:" prop="" class="mb5">
                <span class="title">{{ ListData.waterloggingName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="内涝积水点位置:" prop="" class="mb5">
                <span class="title">{{ ListData.waterloggingAddress }}</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.installTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属辖区:" prop="" class="mb5">
                <span class="title">{{ ListData.belongingArea }}</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.drainageArea }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目建设单位:" prop="" class="mb5">
                <span class="title">{{ ListData.constructionUnit }}</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.type == 0 ? '易涝点' : '风险点' }}</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.reason }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <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="danganInfo">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
import { waterloggingArchiveList } from '@/api/system/tanchuang';
const ListData = ref({});

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>
#danganInfo {
  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>