<template>
  <div>
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <a-form-model ref="form" :model="formData" :rules="rules" class="from-table">
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div>证件号</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="certId" prop="certId">
              <a-input v-model="formData.certId" @blur="() => { $refs.certId.onFieldBlur();}" style="width: 250px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div>姓名</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="personName" prop="personName">
              <a-input v-model="formData.personName" @blur="() => {$refs.personName.onFieldBlur(); }" style="width: 250px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div>单位</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item prop="upTreeCode">
              <unit-tree-select v-model="formData.treeCode" :disable="false" :unitType="2" :width="240"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div>邮箱</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="email" prop="email">
              <a-input v-model="formData.email" @blur="() => {$refs.email.onFieldBlur();}" style="width: 180px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div>学历</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="education" prop="education">
              <para-select v-model="formData.education" :typeId="8" :width="180" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div>职称</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="title" prop="title" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <para-multi-select v-model="formData.title" :typeId="7" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray">
            <div>专业</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="spec" prop="spec" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <para-multi-select v-model="formData.spec" :typeId="57" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align:center;">
            <a-button type="primary" style="margin-right:50px;" @click="submit">保存</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </div>
</template>

<script>
import { isEmptyParams, getCardInfo } from "@/views/utils/common"
import { isIdentityId } from '@/views/utils/validate'
import moment from 'moment'
import paraMultiSelect from '@/views/components/common/paraMultiSelect'
import paraSelect from '@/views/components/common/paraSelect'
import baseSelect from '@/views/components/common/baseSelect'
import unitTreeSelect from '@/views/components/common/unitTreeSelect'

export default {
  name: "personEdit",
  components: {
    paraMultiSelect, paraSelect, baseSelect, unitTreeSelect
  },
  data () {
    return {
      formData: {
        id: null, certId: null, sex: null, unitId: null, birthday: null, mobile: null, email: null, title: null, unitId: null, education: null, spec: null, address: null, treeCode: null
      },
      rules: {
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        certId: [{ required: true, message: '请输入证件号', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value == '' || value == undefined) {
              callback()
            }
            var errorMsg = isIdentityId(value);
            if (errorMsg != "") {
              callback(new Error(errorMsg));
            } else {
              let pars = { certId: this.formData.certId, id: this.formData.id }
              this.$api.base.checkCertIdById(pars).then(({ data = {} }) => {
                if (data) {
                  callback(new Error("证件号已存在"));
                } else
                  callback()
              })
            }
          }
        }],
        email: [{ required: false, message: '请输入邮箱', trigger: 'blur' }],
        title: [{ required: false, message: '请选择职称', trigger: 'change' }],
        unitId: [{ required: false, message: '请选择单位', trigger: 'change' }],
        education: [{ required: false, message: '请选择学历', trigger: 'change' }],
        spec: [{ required: false, message: '请选择专业', trigger: 'change' }],
        treeCode: [{ required: false, message: '请选择单位', trigger: 'change' }],
      },
      loading: false,
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
    obj: {
      type: Object
    }
  },
  created () {
    this.getPersonById()
  },
  methods: {
    moment,
    getPersonById () {
      this.loading = true
      this.$api.person.getPersonById({ id: this.value }).then(({ data = {} }) => {
        if (data) {
          this.formData = data
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    onBirthdayChange (date, dateString) {
      this.formData.birthday = dateString;
    },
    submit () {
      this.loading = true
      let pars = isEmptyParams(this.formData)
      let par = { ...pars }
      this.$api.person.updatePerson(par).then(({ data = {} }) => {
        if (data) {
          this.$message.success('成功！')
          this.$emit('close', 'edit')
        }
        this.loading = false
      }).catch(() => { this.loading = false })
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //     this.loading = true
      //     let pars = isEmptyParams(this.formData)
      //     let par = { ...pars }
      //     this.$api.person.updatePersonInfo(par).then(({ data = {} }) => {
      //       if (data) {
      //         this.$message.success('成功！')
      //         this.$emit('close', 'edit')
      //       }
      //       this.loading = false
      //     }).catch(() => { this.loading = false })
      //   } else {
      //     this.$message.warn('请检查表单!')
      //     return false
      //   }
      // })
    }
  }
}
</script>