<template>
  <div class="per_edit">
    <a-form-model ref="form" :model="formData" :rules="rules" class="from-table">
      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="required">姓 名</div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="unitName">
            <a-input v-model="formData.personName" placeholder="姓 名" style="width:360px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="required">民 族</div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="nation">
            <para-select v-model="formData.nation" :typeId="11" :width="180" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="required">职 称</div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="title">
            <para-multi-select :width="180" v-model="formData.title" :typeId="7" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="required">专 业</div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="spec">
            <para-multi-select :width="180" v-model="formData.spec" :typeId="57" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="required">学 位</div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="degree">
            <para-select v-model="formData.degree" :width="180" :typeId="9" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="required">职 务</div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="duty">
            <a-input v-model="formData.duty" placeholder="职 务" :maxLength="30" style="width:360px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="bg-gray">
          <div class="required">邮 箱</div>
        </a-col>
        <a-col :span="20">
          <a-form-model-item prop="email">
            <a-input v-model="formData.email" placeholder="邮 箱" style="width:360px" />
          </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="address">
            <a-input v-model="formData.address" placeholder="通讯地址" style="width:360px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>主要研究领域</div>
          </div>
        </a-col>
        <a-col :span="20">
          <div class="special-middle">
            <div>
              <a-form-model-item prop="mainResearchAreas">
                <a-textarea placeholder="主要研究领域" v-model="formData.mainResearchAreas" :maxLength="300" style="width: 360px; height: 80px; margin-top: 4px" />
              </a-form-model-item>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import { isEmptyParams, checkEmail, checkPhone, checkIdentitytionId, personBirthday, personGender } from "@/views/utils/common"


export default {
  name: "infoEdit",
  components: {

  },
  data () {
    return {
      rules: {
        personName: [{ required: true, message: '*', trigger: 'blur' },],
        nation: [{ required: true, message: '*', trigger: 'change' }],
        title: [{ required: true, message: '*', trigger: 'change' }],
        spec: [{ required: true, message: '*', trigger: 'change' }],
        degree: [{ required: true, message: '*', trigger: 'change' }],
        duty: [{ required: true, message: '*', trigger: 'blur' }],
        telephone: [{ required: true, message: '*', trigger: 'blur' },],
        fax: [{ required: true, message: '*', trigger: 'blur' },],
        email: [
          { required: true, message: '*', trigger: 'blur' },
          { required: true, validator: checkEmail, trigger: 'blur' }
        ],
        address: [{ required: false, message: '*', trigger: 'blur' },],
        mainResearchAreas: [{ required: false, message: '*', trigger: 'blur' },],
      },
    }
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return null
      }
    },
  },
  created () {
  },
  methods: {
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('load', true)
          let pars = isEmptyParams(this.formData)
          let par = { ...pars }
          this.$api.person.updatePerson(par).then(({ data = {} }) => {
            if (data) {
              this.$message.success('成功！')
              this.$emit('sub', true)
            }
            this.$emit('load', false)
          }).catch(() => { this.$emit('load', false) })
        } else {
          this.$message.error('信息未填写完全！')
          return false
        }
      });
    },
  }
}
</script>
<style scoped lang="less">
</style>