<template>
  <div class="dialogForm">
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :disabled="opts === 'view'"
      class="form"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="建设工程名称:" prop="projectNo">
            <el-select
              v-model="form.projectNo"
              placeholder="请选择建设工程"
              style="width: 100%"
              @change="projectChange"
            >
              <el-option
                v-for="project in project_list"
                :key="project.projectNo"
                :label="project.projectName"
                :value="project.projectNo"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设分区:" prop="drainagePartition">
            <el-select
              v-model="form.drainagePartition"
              placeholder="请选择建设分区"
              style="width: 100%"
              :disabled="true"
            >
              <el-option
                v-for="dict in drainage_partition"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工程类型:" prop="engineeringType">
            <el-select
              v-model="form.engineeringType"
              placeholder="请选择工程类型"
              style="width: 100%"
            >
              <el-option
                v-for="dict in sponge_engineering_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设类型:" prop="buildCategory">
            <el-select
              v-model="form.buildCategory"
              placeholder="请选择建设类型"
              :disabled="true"
              style="width: 100%"
            >
              <el-option
                v-for="dict in build_category"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用地类型:" prop="spongeLandType">
            <el-select
              v-model="form.spongeLandType"
              placeholder="请选择用地类型"
              style="width: 100%"
            >
              <el-option
                v-for="dict in sponge_land_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积，㎡:" prop="area">
            <el-input v-model="form.area" placeholder="请输入面积" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="海绵投资，万元:" prop="spongeInvest">
            <el-input v-model="form.spongeInvest" placeholder="请输入海绵投资" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐投产比，万元/m³:" prop="recommendedProductionRatio">
            <el-input v-model="form.recommendedProductionRatio" placeholder="请输入推荐投产比" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="年径流总量控制率%，≥:" prop="annualRunoffTotalControlRate">
            <el-input v-model="form.annualRunoffTotalControlRate" placeholder="请输入年径流总量控制率" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年径流污染控制率%，≥:" prop="annualRunoffPollutionControlRate">
            <el-input v-model="form.annualRunoffPollutionControlRate" placeholder="请输入年径流污染控制率" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="硬质地面率%，＜:" prop="hardGroundRate">
            <el-input v-model="form.hardGroundRate" placeholder="请输入硬质地面率" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="处置客水，m³:" prop="disposalOfGuestWater">
            <el-input v-model="form.disposalOfGuestWater" placeholder="请输入处置客水" :maxlength="100" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="建设单位:" prop="constructionUnit">
            <el-input v-model="form.constructionUnit" placeholder="请输入建设单位" :maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="责任人:" prop="dutyPerson">
            <el-input v-model="form.dutyPerson" placeholder="请输入责任人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="责任人电话:" prop="dutyPersonPhone">
            <el-input v-model="form.dutyPersonPhone" placeholder="请输入责任人电话" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { inheritAttr } from '@/utils/v3'
import { validate, validatePhone } from './validate'
import {
  getProjectInfoList,
  projectBuildTargetConfigAdd,
  getProjectBuildTargetConfigInfo,
  projectBuildTargetConfigEdit
} from '@/api/preassess/targetManage'
import { isNumber } from '@/utils/validate-helper'
const { proxy } = getCurrentInstance();

const emit = defineEmits(['close'])
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  opts: {
    type: String,
    default: ''
  }
})

const { id, opts } = props

const { build_category } = proxy.useDict("build_category")
const { drainage_partition } = proxy.useDict("drainage_partition")
const { sponge_engineering_type } = proxy.useDict("sponge_engineering_type")
const { sponge_land_type } = proxy.useDict("sponge_land_type")
const project_list = ref([])
const getProjectList = async () => {
  const res = await getProjectInfoList()
  if(res.code !== 200) return
  project_list.value = res.data || []
}
getProjectList()
const projectChange = (val) => {
  const item = project_list.value.find(it => it.projectNo === val)
  form.drainagePartition = item.drainagePartition
  form.buildCategory = item.buildCategory
}

const form = reactive({
  projectNo: '',
  drainagePartition: '',
  engineeringType: '',
  buildCategory: '',
  spongeLandType: '',
  annualRunoffTotalControlRate: '',
  area: '',
  spongeInvest: '',
  recommendedProductionRatio: '',
  annualRunoffPollutionControlRate: '',
  hardGroundRate: '',
  disposalOfGuestWater: '',
  constructionUnit: '',
  dutyPerson: '',
  dutyPersonPhone: '',
})
const rules = reactive({
  projectNo: [{ required: true, message: '建设工程名称不能为空', trigger: ['blur', 'change'] }],
  drainagePartition: [{ required: true, message: '建设分区不能为空', trigger: ['blur', 'change'] }],
  engineeringType: [{ required: true, message: '工程类型不能为空', trigger: ['blur', 'change'] }],
  buildCategory: [{ required: true, message: '建设类型不能为空', trigger: ['blur', 'change'] }],
  spongeLandType: [{ required: true, message: '用地类型不能为空', trigger: ['blur', 'change'] }],
  annualRunoffTotalControlRate: isNumber('年径流总量控制率', { required: true, min: 0, max: 100 }),
  area: [{ required: true, validator: validate, trigger: ['blur', 'change'] }],
  spongeInvest: isNumber('海绵投资', { required: true, min: 0 }),
  recommendedProductionRatio: isNumber('推荐投产比', { required: true, min: 0 }),
  annualRunoffPollutionControlRate: isNumber('年径流污染控制率', { required: true, min: 0, max: 100 }),
  hardGroundRate: isNumber('硬质地面率', { required: true, min: 0, max: 100 }),
  disposalOfGuestWater: isNumber('处置客水', { required: true, min: 0 }),
  constructionUnit: [{ required: true, message: '建设单位不能为空', trigger: ['blur', 'change'] }],
  dutyPerson: [{ required: true, message: '责任人不能为空', trigger: ['blur', 'change'] }],
  dutyPersonPhone: [{ required: true, validator: validatePhone, trigger: ['blur', 'change'] }]
})

const getFormData = async () => {
  const res = await getProjectBuildTargetConfigInfo(id)
  if(res.code !== 200) return
  inheritAttr(res.data || {}, form)
}

const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if(valid){
      console.log('submit!', form)
      const params = { ...form }
      if(opts === 'edit') params.id = id
      const res = opts === 'add' ? await create(params) : await update(params)
      if(res?.code !== 200) return
      proxy.$modal.msgSuccess('操作成功！')
      emit('close', opts)
    } else {
      console.log('error submit!', fields)
    }
  })
}

const create = (params) => {
  return projectBuildTargetConfigAdd(params)
}

const update = (params) => {
  return projectBuildTargetConfigEdit(params)
}

const restForm = () => {
  proxy.$refs.ruleForm.resetFields()
}

onMounted(() => {
  if(id) getFormData()
})

defineExpose({
  submit,
  restForm
})

</script>

<style lang="scss" scoped>
.dialogForm {
  ::v-deep(.el-form) {
    padding-bottom: 20px;
    .el-form-item {
      .el-form-item__label {
        width: 186px;
        word-break: keep-all;
        white-space: nowrap;
      }
    }
  }
}
</style>