<template>
  <!-- 基础管理-业主单位-新增或编辑 -->
  <div>
    <el-form
      :model="addOrEditForm"
      :rules="addOrEditFormRules"
      ref="addOrEditFormRef"
      label-position="left"
      label-width="auto"
    >
      <el-form-item label="业主单位名称" prop="unitName">
        <el-row>
          <el-col :span="20">
            <el-input v-model="addOrEditForm.unitName" placeholder="请输入业主单位名称"/>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="主单位负责人" prop="unitMan">
        <el-row>
          <el-col :span="20">
            <el-input v-model="addOrEditForm.unitMan" placeholder="请输入主单位负责人"/>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="主单位负责人电话" prop="phone">
        <el-row>
          <el-col :span="20">
            <el-input v-model="addOrEditForm.phone" placeholder="请输入主单位负责人电话"/>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="主单位地址" prop="address">
        <el-row>
          <el-col :span="20">
            <el-input v-model="addOrEditForm.address" placeholder="请输入主单位地址"/>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-row>
          <el-col :span="20">
            <el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/>
          </el-col>
        </el-row>
      </el-form-item>


      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {addOwnerApi, editOwnerApi,} from '@/api/basic/owner-manage'

export default {
  name: 'AddOrEditForm',
  data() {
    return {
      addOrEditForm: {
        unitName: '',
        unitMan: '',
        phone: '',
        address: '',
        remark: '',
        id: undefined,
      },
      addOrEditFormRules: {
        unitName: [{required: true, message: '请输入业主单位名称', trigger: 'blur'}],
        unitMan: [{required: true, message: '请输入主单位负责人', trigger: 'blur'}],
      },
    }
  },
  methods: {
    cancel() {
      this.addOrEditForm.unitName='';
      this.addOrEditForm.unitMan='';
      this.addOrEditForm.phone='';
      this.addOrEditForm.address='';
      this.addOrEditForm.remark='';
      this.addOrEditForm.id=undefined;
      this.$emit('closeAddOrEditFormDialog', false)
    },
    submitForm() {
      this.$refs.addOrEditFormRef.validate(async (valid) => {
        if (valid) {
          // 组装参数
          const params = {
            unitName: this.addOrEditForm.unitName?.trim() ?? '',
            unitMan: this.addOrEditForm.unitMan?.trim() ?? '',
            phone: this.addOrEditForm.phone?.trim() ?? '',
            address: this.addOrEditForm.address?.trim() ?? '',
            remark: this.addOrEditForm.remark?.trim() ?? '',
          }
          if (this.addOrEditForm.id) {
            params.id = this.addOrEditForm.id
          }
          const API = this.addOrEditForm.id ? editOwnerApi : addOwnerApi

          const res = await API(params)
          if (res.code === 200) {
            this.$modal.msgSuccess(this.addOrEditForm.id ? '修改成功' : '新增成功')
            this.addOrEditForm.unitName='';
            this.addOrEditForm.unitMan='';
            this.addOrEditForm.phone='';
            this.addOrEditForm.address='';
            this.addOrEditForm.remark='';
            this.addOrEditForm.id=undefined;
            this.$emit('closeAddOrEditFormDialog', true)
          }
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.addOrEditFormRef.resetFields()
    },

    setFormData(data) {
      const {unitName,unitMan, phone,address, remark, id} = data
      this.addOrEditForm.unitName = unitName
      this.addOrEditForm.unitMan = unitMan
      this.addOrEditForm.phone = phone
      this.addOrEditForm.address = address
      this.addOrEditForm.remark = remark
      this.addOrEditForm.id = id
    },
  },
}
</script>
