<template>
  <div v-show="show" class="personal-advantages">
    <div class="edit-info">编辑个人优势</div>
    <el-form ref="formRef" :model="form.Parmeter.Model" :rules="rules" hide-required-asterisk>
      <el-form-item label="" prop="FPersonalStrengths">
        <el-input
          v-model="form.Parmeter.Model.FPersonalStrengths"
          type="textarea"
          show-word-limit
          :maxlength="500"
          :rows="8"
        />
      </el-form-item>
    </el-form>
    <div 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
      >
    </div>
  </div>
</template>

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

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

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

const form: any = ref({
  Parmeter: {
    NeedUpDateFields: ['FPersonalStrengths'],
    IsDeleteEntry: 'false',
    Model: {
      FID: 0,
      FPersonalStrengths: ''
    }
  }
})

const rules = {
  FPersonalStrengths: [{ required: true, message: '个人优势不能为空', trigger: 'blur' }]
}

const formRef = ref()

const onConfirm = async () => {
  await formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const res: any = await updateResume(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>
.personal-advantages {
  background: #f8f8f8;
  border-radius: 12px;
  padding: 24px;
  font-weight: 400;
  color: #222222;
  .edit-info {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .edit-resume-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24px;
  }
}
</style>
