<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 dislike-dialog__title--center">问题反馈</div>

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

    <!-- 底部按钮 -->
    <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="handleFeedbackSubmit">提交</button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

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

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

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

/** 问题反馈的原因（单选） */
const feedbackReason = ref('')

/** 问题反馈原因选项列表 */
const feedbackOptions = [
  { value: 'fraud', label: '怀疑是诈骗或虚假岗位' },
  { value: 'inaccurate', label: '公司信息或职位描述有误' },
  { value: 'expired', label: '该职位已停止招聘/职位已失效' },
]

/** 提交问题反馈 */
function handleFeedbackSubmit() {
  if (!feedbackReason.value) {
    ElMessage.warning('请选择一个反馈原因')
    return
  }
  // TODO: 调用接口提交问题反馈，参数：props.jobId, feedbackReason.value
  console.log('提交问题反馈', {
    jobId: props.jobId,
    reason: feedbackReason.value,
  })
  ElMessage.success('问题反馈已提交，感谢您的反馈')
  visible.value = false
}

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

defineExpose({ resetForm })
</script>
