<template>
  <div v-show="show" class="edit-user-info">
    <div class="edit-user__info">编辑个人信息</div>
    <el-form
      ref="formRef"
      :model="form.Model"
      :rules="rules"
      label-position="top"
      hide-required-asterisk
    >
      <el-row :gutter="28">
        <el-col :span="12">
          <el-form-item label="姓名" prop="FName">
            <el-input v-model="form.Model.FName" size="large" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当前求职状态" prop="FDepartRemain">
            <el-select
              v-model="form.Model.FDepartRemain"
              size="large"
              placeholder="选择求职状态"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in jobStatus"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="FSex">
            <div class="sex">
              <span :class="form.Model.FSex === '0' ? 'active' : ''" @click="form.Model.FSex = '0'"
                >男</span
              >
              <span :class="form.Model.FSex === '1' ? 'active' : ''" @click="form.Model.FSex = '1'"
                >女</span
              >
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="我的牛人身份" prop="FMyIdentity">
            <el-select
              v-model="form.Model.FMyIdentity"
              size="large"
              placeholder="请选择身份"
              style="width: 100%"
            >
              <el-option label="职场人" value="0" />
              <el-option label="学生" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月" prop="FBornDate">
            <el-date-picker
              v-model="form.Model.FBornDate"
              type="date"
              placeholder="选择日期"
              :disabled-date="disabledDate"
              size="large"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="FUserPhone">
            <el-input v-model="form.Model.FUserPhone" size="large" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参加工作时间" prop="FGoWorkDate">
            <el-date-picker
              v-model="form.Model.FGoWorkDate"
              type="date"
              placeholder="选择日期"
              :disabled-date="disabledDate"
              size="large"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信号 (选填)">
            <el-input v-model="form.Model.FWechat" size="large" placeholder="请输入微信号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱 (选填)" prop="FEmail">
            <el-input v-model="form.Model.FEmail" size="large" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="edit-resume-btn">
          <el-button size="large" style="width: 100px" @click="handleClose">取消</el-button>
          <el-button size="large" type="primary" style="width: 100px" @click="onConfirm"
            >完成</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { updateResume } from '@/services/api/recruitmentManagement'
import { jobStatus } from '../config'

defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:show', 'init'])

const form: any = ref({
  NeedUpDateFields: [
    'FName',
    'FEmail',
    'FSex',
    'FGoWorkDate',
    'FBornDate',
    'FBornDate',
    'FDepartRemain',
    'FWechat',
    'FPersonalStrengths_Tag',
    'FPhotos',
    'FMyIdentity'
  ],
  IsDeleteEntry: 'false',
  Model: {
    FID: 0,
    FName: '', //姓名
    FEmail: '', //邮箱
    FSex: '0', //性别
    FGoWorkDate: '', //参加工作时间
    FBornDate: '', //出生日期
    FDepartRemain: '', //离职在职情况
    FWechat: '', //微信号
    FPhotos: '', //照片
    FMyIdentity: '', //我的牛人身份
    FUserPhone: ''
  }
})

const rules = {
  FName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  FEmail: [
    // { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  FSex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
  FGoWorkDate: [{ required: true, message: '参加工作时间不能为空', trigger: 'blur' }],
  FBornDate: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
  FDepartRemain: [{ required: true, message: '离职在职情况不能为空', trigger: 'blur' }],
  FWechat: [{ required: true, message: '微信号不能为空', trigger: 'blur' }],
  FPhotos: [{ required: true, message: '照片不能为空', trigger: 'blur' }],
  FMyIdentity: [{ required: true, message: '我的牛人身份不能为空', trigger: 'blur' }],
  FUserPhone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {
      message: '请输入有效的手机号',
      trigger: 'blur',
      pattern: (rule: any, value: any) => {
        return !value || /^1\d{2}\*{4}\d{4}$/.test(value) || /^1[3456789]\d{9}$/.test(value)
      }
    }
  ]
}

const formRef = ref()

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const onConfirm = async () => {
  await formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const res: any = await updateResume({ Parmeter: form.value })
      if (res.code === 200) {
        ElNotification.success({
          title: '更新个人信息',
          message: '更新成功'
        })
        handleClose()
        emits('init')
      }
    }
  })
}

const handleClose = () => {
  formRef.value?.resetFields()
  emits('update:show', false)
}

defineExpose({
  form
})
</script>

<style lang="scss" scoped>
.edit-user-info {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 24px;
  font-weight: 400;
  color: #222222;
  .edit-user__info {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .sex {
    display: flex;
    align-items: center;
    span {
      width: 227px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      display: inline-block;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #cccccc;
      margin-right: 15px;
      color: #999999;
      cursor: pointer;
    }
    .active {
      background: #dcecff;
      border: 1px solid #177cfa;
      color: #177cfa;
    }
  }

  .edit-resume-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
</style>
