<template>
  <el-form class="tableForm" ref="tableForm" :model="formModel" :rules="rules" :disabled="props.disabled">
    <el-table :data="formModel.list" element-loading-text="数据加载中..." :span-method="objectSpanMethod" :border="true">
      <el-table-column label="设施类型" show-overflow-tooltip>
        <template #default>
          <span>渗透设施</span>
        </template>
      </el-table-column>
      <el-table-column label="设施名称" prop="itemName" show-overflow-tooltip />
      <el-table-column label="设施面积㎡" prop="facilityArea">
        <template #default="{ row, $index }">
          <el-form-item :prop="'list.' + $index + '.' + 'facilityArea'" :rules="rules['facilityArea']">
            <el-input v-model="row.facilityArea" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="有效调蓄深度m" prop="effectiveStorageDepth">
        <template #default="{ row, $index }">
          <el-form-item :prop="'list.' + $index + '.' + 'effectiveStorageDepth'" :rules="rules['effectiveStorageDepth']">
            <el-input v-model="row.effectiveStorageDepth" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="设施服务面积㎡" prop="facilityServiceArea">
        <template #default="{ row, $index }">
          <el-form-item :prop="'list.' + $index + '.' + 'facilityServiceArea'" :rules="rules['facilityServiceArea']">
            <el-input v-model="row.facilityServiceArea" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="污染去除率（%，以SS计）" prop="pollutionRemovalRate">
        <template #header>
          <span>污染去除率（%，以SS计）</span>
          <popover :width="280">
            <span style="font-weight: 700">说明</span>
            <br />
            <span>可输入参考值范围内的值，默认取污染去除率参考值下限</span>
          </popover>
        </template>
        <template #default="{ row, $index }">
          <el-form-item :prop="'list.' + $index + '.' + 'pollutionRemovalRate'" :rules="rules['pollutionRemovalRate']">
            <el-input v-model="row.pollutionRemovalRate" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="污染去除率推荐值（%，以SS计）" show-overflow-tooltip>
        <template #default="{ row }">
          <span>{{ `${row.downValue}-${row.upValue}` }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script setup>
import useTable from './mixins';
import popover from '@/components/popover';
const { proxy } = getCurrentInstance();
const props = defineProps({
  list: {
    type: Array,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const { formModel, rules, objectSpanMethod, validate } = useTable(proxy);

defineExpose({
  validate,
});
</script>

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