<template>
  <!-- 长效考核总览详情 -->
  <div class="publicContainer">
    <!-- 可渗透地面变化详情 -->
    <el-table :data="props.detailObj.tableData" style="width: 100%" max-height="400" v-if="props.detailObj.type == 1">
      <el-table-column prop="projectName" label="项目名称" />
      <el-table-column prop="year" label="完工年度" width="100" />
      <el-table-column prop="permeableFloorArea" label="可渗透面积(㎡)" />
      <el-table-column prop="permeableFloorAreaPercent" label="可渗透面积比(%)" />
    </el-table>
    <!-- 雨水资源利用量详情 -->
    <el-table :data="props.detailObj.tableData" style="width: 100%" max-height="400" v-if="props.detailObj.type == 2">
      <el-table-column prop="projectName" label="项目名称" />
      <el-table-column prop="year" label="完工年度" width="100" />
      <el-table-column prop="rainwaterUtilization" label="雨水资源利用量(t)" />
      <el-table-column prop="permeableFloorAreaPercent" label="可渗透面积比(%)" />
    </el-table>
    <!-- 规划管控制度落实详情 -->
    <el-table :data="props.detailObj.tableData" style="width: 100%" max-height="400" v-if="props.detailObj.type == 3">
      <el-table-column prop="projectName" label="项目名称" />
      <el-table-column prop="year" label="申报年度" width="100" />
      <el-table-column prop="isDesignStandard" label="设计是否达标">
        <template #default="scope">
          {{ scope.row.isDesignStandard == 1 ? '是 ' : scope.row.isDesignStandard == 0 ? '否' : '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="implementIndicators" label="是否落实海绵指标">
        <template #default="scope">
          {{ scope.row.implementIndicators == 1 ? '是 ' : scope.row.implementIndicators == 0 ? '否' : '--' }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 合流制溢流污染详情 -->
    <el-table :data="tableData3" style="width: 100%" max-height="400" v-if="props.detailObj.type == 4">
      <el-table-column prop="name" label="降雨开始时间" />
      <el-table-column prop="year" label="降雨历时(h)" />
      <el-table-column prop="val1" label="降雨量(mm)" />
      <el-table-column prop="val2" label="溢流污染物(t,COD)" />
      <el-table-column prop="val3" label="溢流量(万m³)" />
    </el-table>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

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

const tableData3 = ref([{ name: '2023-09-10 12:34', year: '2.3', val1: '45', val2: '', val3: 123.45 }]);

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

<style lang="scss" scoped></style>