<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="500px"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="学生姓名">
        <el-input v-model="form.studentName" disabled />
      </el-form-item>
      <el-form-item label="调整类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="add">加分 (奖励/活动)</el-radio>
          <el-radio label="deduct">减分 (违规/扣除)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="积分分类" prop="category">
        <el-select v-model="form.category" style="width: 100%">
          <el-option label="行为规范 (信用分)" value="credit" />
          <el-option label="综合素质 (素质分)" value="quality" />
        </el-select>
      </el-form-item>
      <el-form-item label="分值" prop="score">
        <el-input-number v-model="form.score" :min="0.5" :step="0.5" :precision="1" />
      </el-form-item>
      <el-form-item label="原因/事由" prop="reason">
        <el-input
          v-model="form.reason"
          type="textarea"
          rows="3"
          placeholder="请输入调整原因，如：寝室卫生不合格、参加志愿活动..."
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认调整</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const formRef = ref()

const form = reactive({
  studentId: '',
  studentName: '',
  type: 'deduct',
  category: 'credit',
  score: 0,
  reason: ''
})

const title = computed(() => form.type === 'add' ? '积分奖励' : '违规/扣分处理')

const rules = {
  type: [{ required: true, message: '请选择调整类型', trigger: 'change' }],
  category: [{ required: true, message: '请选择积分分类', trigger: 'change' }],
  score: [{ required: true, message: '请输入分值', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入原因', trigger: 'blur' }],
}

const open = (row) => {
  form.studentId = row.studentId
  form.studentName = row.name
  form.type = 'deduct'
  form.category = 'credit'
  form.score = 2
  form.reason = ''
  visible.value = true
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // Mock API
      ElMessage.success('积分调整成功')
      emit('success')
      visible.value = false
    }
  })
}

defineExpose({
  open
})
</script>
