<template>
  <el-dialog
    v-model="visible"
    :show-close="true"
    width="4.8rem"
    class="dislike-dialog"
    :close-on-click-modal="true"
  >
    <!-- 弹窗标题 -->
    <div class="dislike-dialog__title">为了给您推荐更适合岗位，请告诉我们不匹配的原因：</div>

    <!-- 原因选项列表 — 单选 -->
    <div class="dislike-dialog__options">
      <label
        v-for="option in dislikeOptions"
        :key="option.value"
        class="dislike-dialog__option"
        :class="{ 'dislike-dialog__option--active': dislikeReason === option.value }"
      >
        <el-radio v-model="dislikeReason" :value="option.value">{{ option.label }}</el-radio>
      </label>
    </div>

    <!-- 补充描述输入框 -->
    <el-input
      v-model="dislikeDetail"
      type="textarea"
      :rows="4"
      placeholder="请描述您的原因"
      class="dislike-dialog__textarea"
    />

    <!-- 底部按钮 -->
    <div class="dislike-dialog__footer">
      <button class="dislike-dialog__btn dislike-dialog__btn--cancel" @click="visible = false">取消</button>
      <button class="dislike-dialog__btn dislike-dialog__btn--submit" @click="handleDislikeSubmit">提交</button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { dislikeJob } from '@/api/jobs'

const props = defineProps<{
  modelValue: boolean
  jobId: string | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'disliked'): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (val: boolean) => emit('update:modelValue', val),
})

/** 不感兴趣的原因（单选，0-5） */
const dislikeReason = ref<number | undefined>(undefined)

/** 不感兴趣的补充描述 */
const dislikeDetail = ref('')

/** 不感兴趣原因选项列表（与接口 reason 0-5 对应） */
const dislikeOptions = [
  { value: 0, label: '对公司不感兴趣' },
  { value: 1, label: '对岗位不感兴趣' },
  { value: 2, label: '对行业不感兴趣' },
  // { value: 3, label: '技能不符合' },
  { value: 4, label: '地点不合适' },
  { value: 5, label: '其他' },
]

/** 是否正在提交 */
const submitting = ref(false)

/** 提交不感兴趣反馈 */
async function handleDislikeSubmit() {
  if (dislikeReason.value === undefined) {
    ElMessage.warning('请选择一个原因')
    return
  }
  if (!props.jobId) return
  submitting.value = true
  try {
    const res = await dislikeJob(props.jobId, dislikeReason.value)
    if (res.code === '0') {
      ElMessage.success('反馈已提交，感谢您的反馈')
      visible.value = false
      emit('disliked')
    }
  } catch (e) {
    console.error('提交不感兴趣反馈失败', e)
  } finally {
    submitting.value = false
  }
}

/** 弹窗打开时重置表单 */
function resetForm() {
  dislikeReason.value = undefined
  dislikeDetail.value = ''
}

defineExpose({ resetForm })
</script>
