<template>
  <div style="height:65vh;overflow:auto;">
    <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 class="required">证件号</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="certId" prop="certId" v-if="!!!formData.id">
              <a-input v-model="formData.certId" @blur="() => {$refs.certId.onFieldBlur(); }" style="width: 250px" />
            </a-form-model-item>
            <a-input disabled="disabled" style="margin-left:6px;width: 250px" v-model="formData.certId" v-if="!!formData.id" />
          </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 ref="mobile" prop="mobile" v-if="!!!formData.id">
              <a-input v-model="formData.mobile" @blur="() => {$refs.mobile.onFieldBlur();}" style="width: 250px" />
            </a-form-model-item>
            <a-input disabled="disabled" style="margin-left:6px;width:250px" v-model="formData.mobile" v-if="!!formData.id" />
          </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 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 v-if="isShow">
          <a-col :span="4" class="bg-gray">
            <div>选择单位</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="treeCode" prop="treeCode">
              <unit-tree-select v-model="formData.treeCode" :disable="false" :unitType="2" :width="200" /> <span style="color: green;margin-left: 6px;">※系统中单位选择此项</span>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="isShow">
          <a-col :span="4" class="bg-gray">
            <div>工作单位</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="workUnit" prop="workUnit">
              <a-input v-model="formData.workUnit" @blur="() => {$refs.workUnit.onFieldBlur(); }" style="width: 200px" /> <span style="color: green;margin-left: 6px;">※非系统中单位填写此项</span>
            </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 ref="title" prop="title">
              <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 class="required">学历</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 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 type="flex">
          <a-col :span="4" class="bg-gray">
            <div class="special-middle">
              <div class="required">评审专业</div>
            </div>
          </a-col>
          <a-col :span="20">
            <div class="special-middle">
              <a-form-model-item ref="specList" prop="specList">
                <spec-select :specList.sync="formData.specList" />
              </a-form-model-item>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray" style="padding-left:16px">
            <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: 250px" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4" class="bg-gray" style="padding-left:16px">
            <div>备注</div>
          </a-col>
          <a-col :span="20">
            <a-form-model-item ref="email" prop="remark">
              <a-input v-model="formData.remark" @blur="() => {$refs.remark.onFieldBlur();}" style="width: 250px" />
            </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, checkEmail, checkPhone, checkIdentitytionId, personBirthday, personGender } from "@/views/utils/common"
import { isIdentityId } from '@/views/utils/validate'
import moment from 'moment'
import specSelect from '@/views/expert/components/specSelect'
import unitSelect from '@/views/components/common/unitSelect'
import unitTreeSelect from '@/views/components/common/unitTreeSelect'

export default {
  name: 'expertEdit',
  components: {
    unitSelect, specSelect, unitTreeSelect
  },
  data () {
    return {
      loading: true,
      isShow: false,
      formData: { id: null, personName: null, sex: '', birthday: null, certId: null, mobile: null, remark: null, email: null, education: null, degree: null, title: null, specList: [], treeCode: null },
      rules: {
        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.expert.expertIsExist(pars).then(({ data = {} }) => {
                  if (data) {
                    callback(new Error("专家已存在"));
                  } else {
                    this.formData.sex = personGender(this.formData.certId)
                    this.formData.birthday = personBirthday(this.formData.certId) + ' 00:00:00'
                    callback()
                  }
                })
              }
            }
          }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { required: true, validator: checkPhone, trigger: 'blur' }
        ],
        email: [
          { required: false, message: '请输入邮箱', trigger: 'blur' },
          { required: false, validator: checkEmail, trigger: 'blur' }
        ],
        personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        workUnit: [{ required: false, message: '请输入工作单位', trigger: 'blur' }],
        education: [{ required: true, message: '请选择学历', trigger: 'change' }],
        // degree: [{ required: true, message: '请选择学位', trigger: 'change' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        title: [{ required: true, message: '请选择职称', trigger: 'change' }],
        treeCode: [{ required: false, message: '请选择单位', trigger: 'change' }],
        remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
      },
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  created () {
    let user = JSON.parse(window.sessionStorage.getItem('user'))
    if (user && user.roles) {
      if (user.roles.indexOf("0") != -1) {
        this.isShow = true
      }
    }
    if (this.value)
      this.getExpertById()
    else
      this.loading = false
  },
  methods: {
    moment,
    getExpertById () {
      this.$api.expert.getExpertById({ id: this.value }).then(({ data = {} }) => {
        if (data) {
          this.formData = data
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    submit () {
      if (!!!this.formData.specList || this.formData.specList.length == 0) {
        this.$message.error('请选择评审专业！')
        return false
      } else {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            let pars = isEmptyParams(this.formData)
            let par = { ...pars }
            if (!!!this.formData.id) {
              this.$api.expert.insert(par).then(({ data = {} }) => {
                if (data) {
                  this.$message.success('成功！')
                  this.$emit('close', 'edit')
                }
                this.loading = false
              }).catch(() => { this.loading = false })
            } else {
              this.$api.expert.update(par).then(({ data = {} }) => {
                if (data) {
                  this.$message.success('成功！')
                  this.$emit('close', 'edit')
                }
                this.loading = false
              }).catch(() => { this.loading = false })
            }
          } else {
            return false
          }
        })
      }
    },
  }
}
</script>