<!-- 人员登记 基本信息 -->
<script name="RegisterBasic" lang="ts" setup>
import type { PropType } from 'vue'
import type { IDictType, IStaffBasicInfo } from '../person-regitster'
import { getDictByCode } from '@/api/system/dict'

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

const staffBasicInfo = reactive<IStaffBasicInfo>({
  account: '',
  pictureFile: '',
  staffNo: '',
  staffName: '',
  idCard: '',
  birthday: '',
  nativePlace: '',
  education: '',
  recordDate: '',
  officerNo: '',
  gender: '',
  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 nationList = ref<IDictType[]>([])
const degreeList = ref<IDictType[]>([])
const staffTypeList = ref<IDictType[]>([])

// 逻辑

// 查询学历字典值
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 getNationDict = () => {
  getDictByCode('sex').then((res) => {
    if (res.code === 200) {
      nationList.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 getBirthday = () => {
  // ruleFormRef.value?.validateField('idCard').then((res) => {
  // 获取生日
  const idCardStr = staffBasicInfo.idCard
  staffBasicInfo.birthday = `${idCardStr.substring(6, 10)}-${idCardStr.substring(10, 12)}-${idCardStr.substring(12, 14)}`

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

onMounted(() => {
  getEducationDict()
  getGenderDict()
  // getNationDict()
  getDegreeDict()
  getStaffTypeDict()
})
</script>

<template>
  <app-container>
    <el-form ref="basicFormRef" label-position="right" label-width="110px" border stripe>
      <el-row :gutter="24">
        <!-- 第一行 第一、二列 -->
        <el-col :span="12">
          <el-form-item prop="minioFileName">
            <!-- <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.minioFileName" :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="staffNoProp">
            <el-input ref="staffNoRef" v-model="staffBasicInfo.staffNo" placeholder="请输入人员编号，必填项" :clearable="true" />
          </el-form-item>

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

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

          <el-form-item label="出生日期" prop="birthdayProp">
            <el-input ref="birthdayRef" v-model="staffBasicInfo.birthday" :readonly="true" />
          </el-form-item>

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

          <el-form-item label="学历">
            <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-select v-model="staffBasicInfo.gender" placeholder="请选择性别" style="width: 100%;">
              <el-option v-for="item in genderList" :key="item.id" :label="item.name" :value="item.value" />
            </el-select>
          </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%;">
              <el-option v-for="item in educationList" :key="item.id" :label="item.name" :value="item.value" />
            </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 placeholder="身份证号" readonly />
          </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 placeholder="身份证号" readonly />
          </el-form-item>
          <el-form-item label="职称最近续评">
            <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="人员类别">
            <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="职务层级时间">
            <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>