<template>
  <el-form class="tableForm" ref="tableForm" :model="formModel">
    <el-table
      :data="formModel.list"
      v-loading="loading"
      :max-height="200"
      element-loading-text="数据加载中..."
      :span-method="objectSpanMethod"
      :border="true"
    >
      <el-table-column label="设施类型" show-overflow-tooltip>
        <template #default>
          <span>{{ props.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施名称" prop="itemName" show-overflow-tooltip />
      <el-table-column label="设施面积㎡" prop="facilityArea" />
      <el-table-column :label="props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m'" prop="effectiveStorageDepth" />
      <el-table-column label="设施服务面积㎡" prop="facilityServiceArea" />
      <el-table-column label="污染去除率（%，以SS计）" prop="pollutionRemovalRate" />
      <el-table-column label="污染去除率推荐值（%，以SS计）">
        <template #default="{ row }">
          <span>{{ `${row.downValue}-${row.upValue}` }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script setup>
const { proxy } = getCurrentInstance();
import useTable from './mixins';
const { loading, formModel, objectSpanMethod } = useTable(proxy);
const props = defineProps({
  name: {
    type: String,
    default: '',
  },
  list: {
    type: Array,
    default: () => {},
  },
});
</script>

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