<template>
  <!-- 编辑简历名称与目标岗位弹窗 — Teleport 到 body 避免缩放影响 -->
  <Teleport to="body">
    <div v-if="visible" class="resume-edit-name-overlay" @click.self="handleClose">
      <div class="resume-edit-name-dialog">
        <!-- 关闭按钮 -->
        <button class="resume-edit-name-dialog__close" @click="handleClose">✕</button>

        <!-- 简历名称 -->
        <div class="resume-edit-name-dialog__field">
          <label class="resume-edit-name-dialog__label">
            <span class="resume-edit-name-dialog__required">*</span>简历名称
          </label>
          <input
            v-model="form.resumeName"
            placeholder="请输入简历名称"
            maxlength="50"
            class="resume-edit-name-dialog__input"
          />
        </div>

        <!-- 目标岗位 -->
        <div class="resume-edit-name-dialog__field">
          <label class="resume-edit-name-dialog__label">目标岗位</label>
          <input
            v-model="form.targetPosition"
            placeholder="请输入岗位名称"
            maxlength="50"
            class="resume-edit-name-dialog__input"
          />
        </div>

        <!-- 按钮区域 -->
        <div class="resume-edit-name-dialog__footer">
          <button class="resume-edit-name-dialog__btn resume-edit-name-dialog__btn--cancel" @click="handleClose">
            取消
          </button>
          <button
            class="resume-edit-name-dialog__btn resume-edit-name-dialog__btn--save"
            :disabled="saving"
            @click="handleSave"
          >
            {{ saving ? '保存中...' : '保存' }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { updateResumeInfo } from '@/api/resume'
import { ElMessage } from 'element-plus'

// ==================== Props & Emits ====================

const props = defineProps<{
  /** 控制弹窗显隐 */
  modelValue: boolean
  /** 简历 ID */
  resumeId: string
  /** 当前简历名称 */
  resumeName?: string
  /** 当前目标岗位 */
  targetPosition?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  /** 保存成功后通知父组件刷新 */
  (e: 'saved'): void
}>()

// ==================== 弹窗显隐 ====================

/** 弹窗可见状态 */
const visible = ref(false)

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    // 打开时回填当前值
    form.resumeName = props.resumeName || ''
    form.targetPosition = props.targetPosition || ''
  }
})

watch(visible, (val) => {
  if (!val) emit('update:modelValue', false)
})

// ==================== 表单数据 ====================

/** 编辑表单 */
const form = reactive({
  resumeName: '',
  targetPosition: '',
})

/** 保存中状态 */
const saving = ref(false)

// ==================== 事件处理 ====================

/** 关闭弹窗 */
function handleClose() {
  visible.value = false
}

/** 保存简历名称和目标岗位（调用新 Java 后端接口 /resume/updateInfo） */
async function handleSave() {
  if (!form.resumeName.trim()) {
    ElMessage.warning('请输入简历名称')
    return
  }

  saving.value = true
  try {
    const res = await updateResumeInfo({
      resumeId: props.resumeId,
      resumeName: form.resumeName.trim(),
      targetPosition: form.targetPosition.trim(),
    })
    if (res.code === '0') {
      ElMessage.success('保存成功')
      emit('saved')
      handleClose()
    } else {
      ElMessage.error(res.msg || '保存失败')
    }
  } catch {
    ElMessage.error('保存失败，请稍后重试')
  } finally {
    saving.value = false
  }
}
</script>
