<template>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>计算结果</span>
      </div>
    </template>
    <el-form class="form" ref="targetForm" :model="form">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="面积加和㎡:" prop="areaTotal">
            <template #label>
              <span>面积加和㎡</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>不同类型下垫面面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.areaTotal }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="硬质地面㎡:" prop="hardGroundAreaTotal">
            <template #label>
              <span>硬质地面㎡</span>
              <popover>
                <span style="font-weight: 700">说明</span>
                <br />
                <span>硬质地面面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.hardGroundAreaTotal }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="硬质地面率是否达标:" prop="hardGroundStandards">
            <template #label>
              <span>硬质地面率是否达标</span>
              <popover :width="260">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>硬质地面占总面积的百分比，跟目标硬质地面对比，小于等于目标则达标</span>
              </popover>
              <span>:</span>
            </template>
            <el-tag
              v-if="standardMap.get(form.hardGroundStandards)?.text"
              :type="standardMap.get(form.hardGroundStandards)?.type"
            >{{ standardMap.get(form.hardGroundStandards)?.text }}</el-tag>
            <span v-else></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="综合径流系数:" prop="comprehensiveRunoffCoefficient">
            <template #label>
              <span>综合径流系数</span>
              <popover :width="260">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>不同类型下垫面径流系数×不同类型下垫面面积/下垫面面积加和</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.comprehensiveRunoffCoefficient }}</span>
          </el-form-item></el-col>
        <el-col :span="8">
          <el-form-item label="目标调蓄量m³:" prop="targetStorageCapacity">
            <template #label>
              <span>目标调蓄量m³</span>
              <popover :width="280">
                <span style="font-weight: 700">说明</span>
                <br />
                <span>0.01*设计降雨量*面积加和*综合径流系数</span>
              </popover>
              <span>:</span>
            </template>
            <span>{{ form.targetStorageCapacity }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>目标调蓄量计算参数</span>
      </div>
    </template>
    <el-form
      class="tableForm"
      ref="tableForm"
      :model="formModel"
      :disabled="props.disabled"
    >
      <el-table
        :data="formModel.tableData"
        v-loading="loading"
        stripe
        element-loading-text="数据加载中..."
      >
        <el-table-column label="下垫面类型" align="center" prop="itemName" show-overflow-tooltip />
        <el-table-column label="面积㎡" align="center" prop="area">
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'tableData.' + $index + '.' + 'area'"
              :rules="rules['area']"
            >
              <el-input v-model="row.area" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="径流系数" align="center" prop="runoffCoefficient">
          <template #header>
            <span>径流系数</span>
            <popover>
              <span style="font-weight: 700">说明</span>
              <br />
              <span>可输入参考值范围内的值，默认取径流系数参考值下限</span>
            </popover>
          </template>
          <template #default="{ row, $index }">
            <el-form-item
              :prop="'tableData.' + $index + '.' + 'runoffCoefficient'"
              :rules="rules['runoffCoefficient']"
            >
              <el-input v-model="row.runoffCoefficient" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="径流系数参考值" align="center" show-overflow-tooltip>
          <template #header>
            <span>径流系数参考值</span>
            <popover>
              <span style="font-weight: 700">说明</span>
              <br />
              <span>由下垫面建议径流系数配置获取</span>
            </popover>
          </template>
          <template #default="{ row }">
            <span>{{ `${row.downValue}-${row.upValue}` }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { getUnderlyingSurfaceRunoffConfigItemList } from '@/api/preassess/runoffCoefficient'
import { facilitiesStandardCalcEdit } from '@/api/preassess/calculate'
import { standardMap } from './map'
import { inheritAttr } from '@/utils/v3'
import popover from '@/components/popover'

const areaValidate = (rule, value, callback) => {
  if (value === '') {
    callback()
  } else {
    const reg = /^\d+(\.\d+)?$/
    if(reg.test(value)) callback()
    else callback(new Error('请输入数字'))
  }
}

const runoffCoefficientValidate = (rule, value, callback) => {
  if (value === '') {
    callback()
  } else {
    const reg = /^\d+(\.\d+)?$/
    if(reg.test(value)){
      const props = rule.field.split('.')
      const { downValue, upValue } = formModel[props[0]][props[1]]
      if(parseFloat(value) >= downValue * 1 && parseFloat(value) <= upValue * 1){
        callback()
      } else {
        callback(new Error('请输入参考值范围的值'))
      }
    } else {
      callback(new Error('请输入参考值范围的值'))
    }
  }
}

const { proxy } = getCurrentInstance();
const emit = defineEmits(['success', 'set-computed-disabled'])
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  opts: {
    type: Object,
    default: () => {}
  },
  projectInfo: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const { id, opts, projectInfo } = props

const form = reactive({
  id: '',
  areaTotal: '',
  hardGroundAreaTotal: '',
  hardGroundStandards: '',
  comprehensiveRunoffCoefficient: '',
  targetStorageCapacity: '',
  facilityStorageCapacity: '',
  storageCapacityStandards: '',
  facilityStorageCapacityToAnnualRunoffTotalControlRate: '',
  pollutionRemovalRate: '',
  pollutionRemovalStandards: '',
})

const formModel = reactive({
  tableData: []
})
const rules = reactive({
  area: [{ validator: areaValidate, trigger: ['blur']  }],
  runoffCoefficient: [{ validator: runoffCoefficientValidate, trigger: ['blur']  }]
})
const loading = ref(false)

const params = computed(() => {
  const data = JSON.parse(JSON.stringify(formModel.tableData))
  for (const item of data) {
    item.area = item.area || '0'
    item.runoffCoefficient = item.runoffCoefficient || item.downValue
  }
  return {
    calculateType: 0,
    id: form.id,
    projectNo: projectInfo.projectNo,
    standardCalcUnderlyingSurfaceRunoffSaveRequestList: data
  }
})

const getTableList = async () => {
  loading.value = true
  const res = await getUnderlyingSurfaceRunoffConfigItemList({ status: '1'})
  if(res?.code !== 200) return
  loading.value = false
  res.data.forEach((item) => {
    item.area = ''
    item.runoffCoefficient = item.downValue
  })
  formModel.tableData = res.data
  emit('set-computed-disabled', !formModel.tableData.length)
}

const getDetailInfo = (data) => {
  inheritAttr(data, form)
  formModel.tableData = data.standardCalcUnderlyingSurfaceRunoffSaveRequestList
}

const getList = (data = {}) => {
  if(formModel.tableData.length) return
  if(id){
    getDetailInfo(data)
  } else {
    getTableList()
  }
}

const submit = () => {
  proxy.$refs.tableForm.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit', params)
      const res = await facilitiesStandardCalcEdit(params.value)
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('计算成功！')
      inheritAttr(res.data, form)
      for (const item of formModel.tableData) {
        item.area = item.area || '0'
        item.runoffCoefficient = item.runoffCoefficient || item.downValue
      }
      emit('success')
    } else {
      console.log('error submit!', fields)
    }
  })
}

onMounted(() => {

})

defineExpose({
  getList,
  submit,
  form
})
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
  .card-header {
    font-weight: 700;
    font-size: 16px;
  }

  ::v-deep(.form) {
    .el-form-item {
      margin-bottom: 0;
    }
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>