<template>
  <div class="app-content" style="height: 50vh;overflow: auto;">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <div class="page-content">
        <a-form-model ref="form" :model="memObject" :rules="rules" style="border-top: 0px" class="from-table font-line-space">
          <a-row type="flex">
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">姓名</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="name">
                <a-input v-model="memObject.name" :maxLength="20" placeholder="姓名" style="width: 40%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">证件号码</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="certId">
                <a-input v-model="memObject.certId" :maxLength="20" placeholder="证件号" style="width: 60%" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">性别</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="sex">
                <base-select v-model="memObject.sex" :type="16" :isAll="true" :width="120" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">出生年月</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="birthday">
                <a-date-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD HH:mm:ss" v-model="memObject.birthday" style="width: 60%" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">职称</div>
              </div>
            </a-col>
            <a-col :span="20">
              <a-form-model-item prop="title">
                <para-multi-select v-model="memObject.title" :typeId="7" :width="120" @changeTitle="(e)=>{ memObject.titleName = e}" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">学位</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="degree">
                <para-select v-model="memObject.degree" :typeId="9" :width="120" @changeTitle="(e)=>{ memObject.degreeName = e}" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">工作单位</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="workUnit">
                <a-input v-model="memObject.workUnit" :maxLength="50" placeholder="工作单位" style="width: 60%" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row type="flex">
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">手机</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="mobile">
                <a-input v-model="memObject.mobile" :maxLength="20" placeholder="手机" style="width: 60%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">电子邮箱</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="email">
                <a-input v-model="memObject.email" :maxLength="50" placeholder="电子邮箱" style="width: 60%" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">项目分工</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="projWork">
                <a-input v-model="memObject.projWork" :maxLength="20" placeholder="项目分工" style="width: 60%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="4" class="bg-gray">
              <div class="special-middle">
                <div class="required">每年工作（月）</div>
              </div>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="forMonths">
                <a-input-number v-model="memObject.forMonths" :min="0" :max="12" :step="1" style="width: 60%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="page-footer">
        <a-button style="margin-left: 10px" type="primary" @click="submit">保存</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>

import { isEmptyParams, checkEmail, checkPhone, checkIdentitytionId, personBirthday, personGender } from "@/views/utils/common"
import { isIdentityId } from '@/views/utils/validate'
import { getType } from '@/views/utils/auth'
import { max } from "moment";


export default {
  name: "memberEdit",
  components: {
    
  },
  data () {
    return {
      rules: {
        name: [{ required: true, message: '*', trigger: 'blur' },],
        sex: [{ required: true, message: '*', trigger: 'change' },],
        birthday: [{ required: true, message: '*', trigger: 'change' },],
        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 {
        //       this.memObject.sex = personGender(value)
        //       this.memObject.birthday = personBirthday(value) + ' 00:00:00'
        //       callback()
        //     }
        //   }
        // }
        ],
        workUnit: [{ required: true, message: '*', trigger: 'blur' },],
        title: [{ required: true, message: '*', trigger: 'change' },],
        degree: [{ required: true, message: '*', trigger: 'change' },],
        email: [
          { required: true, message: '*', trigger: 'blur' },
          { required: true, validator: checkEmail, trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '*', trigger: 'blur' },
          { required: true, validator: checkPhone, trigger: 'blur' }
        ],
        projWork: [{ required: true, message: '*', trigger: 'blur' },],
        forMonths: [{ required: true, message: '*', trigger: 'blur' },],
      },
      loading: false,
    }
  },
  props: {
    members: {
      type: Array,
      default: () => {
        return []
      }
    },
    memObject: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  created () {

  },
  methods: {
    submit () {
      this.memObject._key = Math.random().toString(16).substring(2, 8)
      this.$refs.form.validate(valid => {
        // if (valid) {
          this.$emit('close', this.memObject)
        // } else {
        //   this.$message.error('信息未填写完全！')
        //   return false
        // }
      })
    },
  },
}
</script>
<style scoped lang="less">
::v-deep .ant-spin-container {
  width: 100%;
  height: 100%;
}
.page-content {
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
}
.page-footer {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: rgb(248, 248, 248);
  text-align: center;
}
</style>