<template>
  <div>
    <a-form-model ref="form" :model="formData" :rules="rules">
      <a-form-model-item label="姓 名" prop="personName">
        <a-input v-model="formData.personName" :maxLength="30" style="width:180px;" />
      </a-form-model-item>
      <a-form-model-item label="民 族" prop="nation">
        <para-select v-model="formData.nation" :width="180" :typeId="11" />
      </a-form-model-item>
      <a-form-model-item label="职 称" prop="title">
        <para-multi-select :width="180" v-model="formData.title" :typeId="7" />
      </a-form-model-item>
      <a-form-model-item label="专 业" prop="spec">
        <para-multi-select :width="180" v-model="formData.spec" :typeId="57" />
      </a-form-model-item>
      <a-form-model-item label="学 位" prop="degree">
        <para-select v-model="formData.degree" :width="180" :typeId="9" />
      </a-form-model-item>
      <a-form-model-item label="职 务" prop="duty">
        <a-input v-model="formData.duty" :maxLength="30" style="width:180px;" />
      </a-form-model-item>
      <a-form-model-item label="联系电话" prop="telephone">
        <a-input v-model="formData.telephone" :maxLength="30" style="width:180px;" />
      </a-form-model-item>
      <a-form-model-item label="传 真" prop="fax">
        <a-input v-model="formData.fax" :maxLength="30" style="width:180px;" />
      </a-form-model-item>
      <a-form-model-item label="邮 箱" prop="email">
        <a-input v-model="formData.email" :maxLength="30" style="width:180px;" />
      </a-form-model-item>
      <a-form-model-item label="通讯地址" prop="address">
        <a-input v-model="formData.address" :maxLength="60" style="width:180px;" />
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { isEmptyParams, hideIdCard, hidePhone, checkEmail } from "@/views/utils/common"
import paraMultiSelect from '@/views/components/common/paraMultiSelect'
import paraSelect from '@/views/components/common/paraSelect'
import baseSelect from '@/views/components/common/baseSelect'

export default {
  name: "infoEdit",
  components: {
    paraMultiSelect, paraSelect, baseSelect
  },
  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' },],
        address: [{ required: true, 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('load', false)
          }).catch(() => { this.$emit('load', false) })
        } else {
          this.$message.warn('信息未填写完全！')
          return false
        }
      });
    },
  }
}
</script>
<style scoped lang="less">
.app-content {
  padding: 10px 8px 10px 8px;
  min-width: 920px;
  .border-style {
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #ffffff;
    overflow: hidden;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .card-left {
    float: left;
    width: 300px;
    height: 600px;
    margin-right: 6px;
    .holder-photo {
      margin: 20px 0px 10px 0px;
      text-align: center;
    }
    .holder-photo > img {
      width: 104px;
      height: 104px;
      margin-bottom: 10px;
    }
    .holder-info {
      padding: 0px 10px 0px 10px;
      .ant-row .ant-col {
        padding: 3px 5px 3px 5px;
      }
    }
    .title {
      text-align: right;
    }
  }
  .card-right {
    float: left;
    width: calc(100% - 320px);
    min-width: 600px;
    min-height: 200px;
    padding: 0px 15px 15px 15px;
    .ant-form-item {
      margin-bottom: 0px;
    }
    ::v-deep .ant-row {
      .ant-col {
        display: inline-block;
      }
      .ant-form-item-label {
        width: 70px;
      }
      .ant-form-item-control-wrapper {
        width: calc(100% - 70px);
      }
      .ant-form-explain {
        margin-left: 5px;
        display: inline-block;
      }
    }
  }
}
</style>