<template>
  <el-dialog v-model="visible" title="预警处理" width="500px">
    <el-descriptions border :column="1" class="mb-20">
      <el-descriptions-item label="学生姓名">{{ currentWarning?.studentName }}</el-descriptions-item>
      <el-descriptions-item label="预警类型">{{ getWarningType(currentWarning?.type).label }}</el-descriptions-item>
      <el-descriptions-item label="异常描述">
        <span class="text-danger">{{ currentWarning?.description }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="最近通行记录">
        <div v-if="currentWarning?.lastRecord">
          <vab-icon icon="time-line" class="mr-5 text-gray" />
          {{ currentWarning?.lastRecord }}
          <span class="ml-5 text-xs text-gray">({{ currentWarning?.direction }})</span>
        </div>
        <div v-else class="text-gray">无记录</div>
      </el-descriptions-item>
    </el-descriptions>

    <el-form label-width="80px">
      <el-form-item label="处理方式">
        <el-radio-group v-model="processForm.action">
          <el-radio label="contact"> <vab-icon icon="phone-line" /> 已联系学生确认安全</el-radio>
          <el-radio label="report"> <vab-icon icon="report-line" /> 上报辅导员</el-radio>
          <el-radio label="false_alarm"> <vab-icon icon="warning-line" /> 误报/设备故障</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="处理备注">
        <el-input type="textarea" v-model="processForm.remark" rows="3" placeholder="请记录联系情况..." />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirmProcess">确认处理</el-button>
    </template>
  </el-dialog>
</template>

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

const emit = defineEmits(['success'])

const visible = ref(false)
const currentWarning = ref(null)
const processForm = reactive({
  action: 'contact',
  remark: '',
})

const getWarningType = (type) => {
  const map = {
    late: { label: '晚归', tag: 'warning' },
    absent: { label: '未归', tag: 'danger' },
    inactive: { label: '长期未出', tag: 'info' },
  }
  return map[type] || { label: '未知', tag: '' }
}

const open = (row) => {
  currentWarning.value = row
  processForm.action = 'contact'
  processForm.remark = ''
  visible.value = true
}

const confirmProcess = () => {
  if (!processForm.remark && processForm.action !== 'false_alarm') {
    ElMessage.warning('请填写处理备注')
    return
  }
  ElMessage.success('处理成功')
  visible.value = false
  emit('success', { id: currentWarning.value.id, ...processForm })
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.mb-20 {
  margin-bottom: 20px;
}
.mr-5 {
  margin-right: 5px;
}
.ml-5 {
  margin-left: 5px;
}
.text-gray {
  color: #909399;
}
.text-xs {
  font-size: 12px;
}
.text-danger {
  color: var(--el-color-danger);
}
</style>
