<!-- 人员登记 基本信息 -->
<script name="RegisterBasic" lang="ts" setup>
import type { FormInstance, UploadProps } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import type { IDictType, IStaffBasicInfo } from '../person-regitster'
import nationList from '@/assets/json/nation-code.json'
import { getDictByCode } from '@/api/system/dict'
import { UploadFile } from '@/api/file'
import { getPhotoUrl } from '@/api/system/tool'
import { addStaffBasic } from '@/api/resource/register'

const props = defineProps({
  operation: { type: String, default: '' },
})

const emit = defineEmits(['afterAddBasic'])

const staffBasicInfo = reactive<IStaffBasicInfo>({
  account: 'ty',
  pictureFile: '',
  staffNo: '',
  staffName: '',
  idCard: '',
  birthday: '',
  nativePlace: '',
  education: '',
  recordDate: '',
  officerNo: '',
  gender: '',
  genderName: '',
  graduationDate: '',
  nation: '',
  degree: '',
  deptId: '',
  station: '',
  major: '',
  certificateNumber: '',
  engageDate: '',
  workingDate: '',
  titleInitialDate: '',
  titleRecentlyDate: '',
  academicStartDate: '',
  partyDate: '',
  enlistmentDate: '',
  staffType: '',
  rankLevel: '',
  rankLevelDate: '',
  jobLevel: '',
  jobLevelDate: '',
  treatmentLevel: '',
  treatmentLevelDate: '',
  workingExperience: '',
  rankExperience: '',
  titleExperience: '',
  rewardsPunishments: '',
  remark: '',
})
const educationList = ref<IDictType[]>([])
const genderList = ref<IDictType[]>([])
const degreeList = ref<IDictType[]>([])
const staffTypeList = ref<IDictType[]>([])
const genderName = ref('')

const basicFormRef = ref()

// 身份证号码验证规则
const validateIDcard = (rule: any, value: any, callback: any) => {
  const rr = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/
  if (rr.test(value)) {
    // 校验成功后自动填充出生日期和性别字段
    // 获取生日
    const idCardStr = staffBasicInfo.idCard
    staffBasicInfo.birthday = `${idCardStr.substring(6, 10)}-${idCardStr.substring(10, 12)}-${idCardStr.substring(12, 14)}`

    // 获取性别 第17位  奇数为男 偶数为女
    if (Number(idCardStr.substring(16, 17)) % 2) {
    // 男
      staffBasicInfo.gender = '1'
      staffBasicInfo.genderName = '男'
    }
    else {
    //  女
      staffBasicInfo.gender = '2'
      staffBasicInfo.genderName = '女'
    }

    callback()
  }
  else {
    // 校验失败将出生日期和性别字段清除
    staffBasicInfo.birthday = ''
    staffBasicInfo.gender = ''
    staffBasicInfo.genderName = ''

    callback(new Error('验证失败'))
  }
}

const staffBasicRules = ref({
  staffNo: [{ required: true, message: '人员编号不能为空', trigger: 'blur' }],
  staffName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  idCard: [{ required: true, message: '身份证号码为空或不符合规范', trigger: 'blur', validator: validateIDcard }],
  nativePlace: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }],
  education: [{ required: true, message: '学历不能为空，请选择', trigger: 'blur' }],
  titleRectDate: [{ required: true, message: '职称最近续评时间不能为空，请选择', trigger: 'blur' }],
  staffType: [{ required: true, message: '人员类别不能为空，请选择', trigger: 'blur' }],
  jobLevelDate: [{ required: true, message: '职务层级时间不能为空，请选择', trigger: 'blur' }],
}) // 表单验证规则

// 逻辑

// 查询学历字典值
const getEducationDict = () => {
  getDictByCode('bizEducation').then((res) => {
    if (res.code === 200) {
      educationList.value = res.data
    }
  })
}

// 查询性别字典值
const getGenderDict = () => {
  getDictByCode('sex').then((res) => {
    if (res.code === 200) {
      genderList.value = res.data
    }
  })
}

// 查询学位字典值
const getDegreeDict = () => {
  getDictByCode('bizDegree').then((res) => {
    if (res.code === 200) {
      degreeList.value = res.data
    }
  })
}

// 查询人员类别字典值
const getStaffTypeDict = () => {
  getDictByCode('bizStaffType').then((res) => {
    if (res.code === 200) {
      staffTypeList.value = res.data
    }
  })
}

// 上传请求
const uploadQuarterlyEvaluateFile: any = (file: any) => {
  const fd = new FormData()
  fd.append('multipartFile', file.file)
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  UploadFile(fd).then((res) => {
    if (res.code === 200) {
      console.log(res)
      ElMessage.success('上传成功')
      staffBasicInfo.pictureFile = res.data[0]
      loading.close()
    }
  }).catch(() => {
    loading.close()
    ElMessage.error('上传失败')
  })
}

// 上传之前的验证
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
    ElMessage.error('只能上传png/jpeg/jpg格式的图片')
    return false
  }
  else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片不能大于2MB')
    return false
  }
  return true
}

// 保存基本信息
const saveBasicForm = async () => {
  if (!basicFormRef) { return }

  if (props.operation === 'create') {
    await basicFormRef.value.validate((valid: boolean, fields: any) => {
      if (valid === true) {
        ElMessageBox.confirm(
          '确认保存吗？',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          },
        ).then(() => {
          addStaffBasic(staffBasicInfo).then((res) => {
            console.log(res)
            if (res.code === 200) {
              ElMessage.success('保存成功')
              emit('afterAddBasic', res.data.id)
            }
          })
        })
      }
    })
  }
}

// 图片预览地址
const photoUrl = ref('')
watch(() => staffBasicInfo.pictureFile, (newVal) => {
  getPhotoUrl(newVal).then((res) => {
    if (res.code === 200) {
      photoUrl.value = res.data
    }
  })
})

watch(() => staffBasicInfo.engageDate, (newVal) => {
  const now = new Date()
  const intervalDay = dayjs(now).diff(newVal, 'day')
  staffBasicInfo.workingDate = `${(intervalDay / 365).toFixed(1)}`
})

onMounted(() => {
  getEducationDict()
  getGenderDict()
  getDegreeDict()
  getStaffTypeDict()
})

defineExpose({
  saveBasicForm,
})
</script>

<template>
  <app-container>
    <el-form ref="basicFormRef" :model="staffBasicInfo" :rules="staffBasicRules" label-position="right" label-width="110px" border stripe>
      <el-row :gutter="24">
        <!-- 第一行 第一、二列 -->
        <el-col :span="12">
          <el-form-item>
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :http-request="uploadQuarterlyEvaluateFile"
              :before-upload="beforeAvatarUpload"
              accept="image/png, image/jpeg,image/jpg"
            >
              <img v-if="staffBasicInfo.pictureFile" :src="photoUrl" class="avatar">
              <el-icon v-else class="avatar-uploader-icon">
                <plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>

        <!-- 第一行 第三列 -->
        <el-col :span="6">
          <el-form-item label="人员编号" prop="staffNo">
            <el-input v-model="staffBasicInfo.staffNo" placeholder="请输入人员编号，必填项" :clearable="true" />
          </el-form-item>

          <el-form-item label="姓名" prop="staffName">
            <el-input v-model="staffBasicInfo.staffName" placeholder="请输入姓名，必填项" :clearable="true" />
            <el-input v-model="staffBasicInfo.account" type="hidden" />
          </el-form-item>

          <el-form-item label="身份证号" prop="idCard">
            <el-input ref="idCard" v-model="staffBasicInfo.idCard" placeholder="请输入身份证号，必填项" :clearable="true" />
          </el-form-item>

          <el-form-item label="出生日期" prop="birthday">
            <el-input v-model="staffBasicInfo.birthday" placeholder="自动从身份证号获取" :readonly="true" />
          </el-form-item>

          <el-form-item label="籍贯" prop="nativePlace">
            <el-input v-model="staffBasicInfo.nativePlace" placeholder="请输入籍贯" />
          </el-form-item>

          <el-form-item label="学历" prop="education">
            <el-select v-model="staffBasicInfo.education" placeholder="请选择学历" style="width: 100%;">
              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 第一行 第四列 -->
        <el-col :span="6">
          <el-form-item label="建档时间">
            <el-date-picker
              v-model="staffBasicInfo.recordDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择建档时间" style="width: 100%;"
            />
          </el-form-item>

          <el-form-item label="军官证号">
            <el-input v-model="staffBasicInfo.officerNo" placeholder="请输入军官证号" />
          </el-form-item>

          <el-form-item label="性别">
            <el-input v-model="staffBasicInfo.gender" type="hidden" :readonly="true" />
            <el-input v-model="staffBasicInfo.genderName" placeholder="自动从身份证号获取" :readonly="true" />
          </el-form-item>

          <el-form-item label="毕业时间">
            <el-date-picker
              v-model="staffBasicInfo.graduationDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择毕业时间" style="width: 100%;"
            />
          </el-form-item>

          <el-form-item label="民族">
            <el-select v-model="staffBasicInfo.nation" placeholder="请选择民族" style="width: 100%;" :filterable="true" :clearable="true">
              <el-option v-for="item in nationList" :key="item.id" :label="item.text" :value="item.text" />
            </el-select>
          </el-form-item>

          <el-form-item label="学位">
            <el-select v-model="staffBasicInfo.degree" placeholder="请选择学位" style="width: 100%;">
              <el-option v-for="item in degreeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="24">
        <!-- 第一列 -->
        <el-col :span="6">
          <el-form-item label="工作部门">
            <dept-select v-model="staffBasicInfo.deptId" placeholder="请选择工作部门" style="width: 100%;" />
          </el-form-item>

          <el-form-item label="从事专业时间">
            <el-date-picker
              v-model="staffBasicInfo.engageDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择从事专业时间" style="width: 100%;"
            />
          </el-form-item>

          <el-form-item label="入学时间">
            <el-date-picker
              v-model="staffBasicInfo.academicStartDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择入学时间" style="width: 100%;"
            />
          </el-form-item>

          <el-form-item label="军衔等级">
            <el-input v-model="staffBasicInfo.rankLevel" placeholder="请输入军衔等级" />
          </el-form-item>

          <el-form-item label="待遇级别">
            <el-input v-model="staffBasicInfo.treatmentLevel" placeholder="请输入待遇级别" />
          </el-form-item>
        </el-col>

        <!-- 第二列 -->
        <el-col :span="6">
          <el-form-item label="岗位">
            <el-input v-model="staffBasicInfo.station" placeholder="请输入岗位" />
          </el-form-item>
          <el-form-item label="干龄">
            <el-input v-model="staffBasicInfo.workingDate" placeholder="自动计算" readonly>
              <template #append>
                年
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="党团时间">
            <el-date-picker
              v-model="staffBasicInfo.partyDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择党团时间" style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="军衔等级时间">
            <el-date-picker
              v-model="staffBasicInfo.rankLevelDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择军衔等级时间" style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="待遇级别时间">
            <el-date-picker
              v-model="staffBasicInfo.treatmentLevelDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择待遇级别时间" style="width: 100%;"
            />
          </el-form-item>
        </el-col>

        <!-- 第三列 -->
        <el-col :span="6">
          <el-form-item label="计量专业">
            <el-input v-model="staffBasicInfo.major" placeholder="请输入从事计量专业" />
          </el-form-item>

          <el-form-item label="职称初评">
            <el-date-picker
              v-model="staffBasicInfo.titleInitialDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选职称初评时间" style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="入伍时间">
            <el-date-picker
              v-model="staffBasicInfo.enlistmentDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择入伍时间" style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="职务层级">
            <el-input v-model="staffBasicInfo.jobLevel" placeholder="请输入职务层级" />
          </el-form-item>
        </el-col>

        <!-- 第四列 -->
        <el-col :span="6">
          <el-form-item label="证号">
            <el-input v-model="staffBasicInfo.certificateNumber" placeholder="自动获取检定员证书号" readonly />
          </el-form-item>
          <el-form-item label="职称最近续评" prop="titleRectDateProp">
            <el-date-picker
              v-model="staffBasicInfo.titleRecentlyDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择职称最近续评时间" style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="人员类别" prop="staffTypeProp">
            <el-select v-model="staffBasicInfo.staffType" placeholder="请选择人员类别" style="width: 100%;">
              <el-option v-for="item in staffTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="职务层级时间" prop="jobLevelDateProp">
            <el-date-picker
              v-model="staffBasicInfo.jobLevelDate" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择职务层级时间" style="width: 100%;"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行 -->
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="工作简历">
            <el-input v-model="staffBasicInfo.workingExperience" placeholder="请输入工作简历" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="军衔/时间">
            <el-input v-model="staffBasicInfo.rankExperience" placeholder="请输入军衔及获得时间" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="职称/时间">
            <el-input v-model="staffBasicInfo.titleExperience" placeholder="请输入职称及获得时间" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="奖惩情况">
            <el-input v-model="staffBasicInfo.rewardsPunishments" placeholder="请输入奖惩情况" type="textarea" :rows="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="staffBasicInfo.remark" placeholder="请输入备注信息" type="textarea" :rows="1" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </app-container>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 190px;
  height: 250px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 190px;
  height: 250px;
  text-align: center;
}
</style>