<template>
  <el-form
    class="tableForm"
    ref="tableForm"
    :model="formModel"
    :disabled="props.disabled"
  >
    <el-table
      :data="formModel.list"
      v-loading="loading"
      stripe
      element-loading-text="数据加载中..."
      :span-method="objectSpanMethod"
      :border="true"

    >
      <el-table-column label="设施类型" align="center" show-overflow-tooltip>
        <template #default>
          <span>{{ props.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施名称" align="center" prop="itemName" show-overflow-tooltip />
      <el-table-column label="设施面积㎡" align="center" 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="props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m'" align="center" 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="设施服务面积㎡" align="center" 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计）" align="center" prop="pollutionRemovalRate">
        <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计）" align="center" show-overflow-tooltip>
        <template #default="{ row }">
          <span>{{ `${row.downValue}-${row.upValue}` }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import { isNumber, isScope } from '@/utils/validate-helper'
const { proxy } = getCurrentInstance()
import useTable from './mixins'
const { loading, formModel, validate, objectSpanMethod } = useTable(proxy)
const props = defineProps({
  name: {
    type: String,
    default: ''
  },
  list: {
    type: Array,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const rules = reactive({
  facilityArea: isNumber('设施面积', { required: false, min: 0 }),
  effectiveStorageDepth: isNumber(props.name === '储存设施' ? '调蓄量m³' : '有效调蓄深度m', { required: false, min: 0 }),
  facilityServiceArea: isNumber('设施服务面积', { required: false, min: 0 }),
  pollutionRemovalRate: isScope('污染去除率', { required: false, data: formModel })
})

defineExpose({
  validate
})
</script>

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