<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" filterable>
              <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 {
  :deep(.el-form) {
    padding-bottom: 20px;
    .el-form-item {
      .el-form-item__label {
        width: 186px;
        word-break: keep-all;
        white-space: nowrap;
      }
    }
  }
}
</style>