<template>
  <el-dialog v-model="visible" title="新增行为记录" width="500px">
    <el-form ref="formRef" :model="form" label-width="80px">
      <el-form-item label="学生学号">
        <el-input v-model="form.studentId" placeholder="请输入学号" @blur="handleSearchStudent">
          <template #append>
            <el-button icon="search-line" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="学生姓名">
        <el-input v-model="form.studentName" disabled />
      </el-form-item>
      <el-form-item label="记录类型">
        <el-radio-group v-model="form.type" @change="handleTypeChange">
          <el-radio label="violation">违规</el-radio>
          <el-radio label="reward">奖励</el-radio>
          <el-radio label="inspection">日常检查</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="具体事项">
        <el-select v-model="form.title" placeholder="请选择或输入" allow-create filterable style="width: 100%" @change="handleItemChange">
          <el-option v-for="item in currentOptions" :key="item.label" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="分值">
        <el-input-number v-model="form.score" :step="0.5" />
      </el-form-item>
      <el-form-item label="详情描述">
        <el-input v-model="form.description" type="textarea" rows="3" />
      </el-form-item>
      <el-form-item label="附件证据">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon><plus /></el-icon>
        </el-upload>
      </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'
import { Plus } from '@element-plus/icons-vue'

const emit = defineEmits(['success'])

const visible = ref(false)

const form = reactive({
  studentId: '',
  studentName: '',
  type: 'violation',
  title: '',
  score: 0,
  description: ''
})

const violationOptions = [
  { label: '宿舍卫生不合格', score: -2 },
  { label: '使用违规电器', score: -10 },
  { label: '晚归', score: -5 },
  { label: '未归', score: -10 },
]

const rewardOptions = [
  { label: '文明寝室', score: 5 },
  { label: '志愿服务', score: 2 },
  { label: '好人好事', score: 2 },
]

const currentOptions = computed(() => {
  return form.type === 'violation' ? violationOptions : rewardOptions
})

const open = () => {
  Object.assign(form, {
    studentId: '', studentName: '', type: 'violation', title: '', score: 0, description: ''
  })
  visible.value = true
}

const handleSearchStudent = () => {
  if (form.studentId === '31901001') {
    form.studentName = '梁健'
    ElMessage.success('已找到学生：梁健')
  } else {
    form.studentName = '未知学生'
  }
}

const handleTypeChange = () => {
  form.title = ''
  form.score = 0
}

const handleItemChange = (val) => {
  const item = currentOptions.value.find(i => i.label === val)
  if (item) {
    form.score = item.score
  }
}

const handleSubmit = () => {
  visible.value = false
  ElMessage.success('记录添加成功，分值已更新')
  emit('success')
}

defineExpose({
  open
})
</script>
