<template>
  <el-dialog v-model="visible" title="用电预警处理" width="500px">
    <el-descriptions border :column="1" class="mb-20">
      <el-descriptions-item label="预警位置">{{ currentWarning?.roomName }}</el-descriptions-item>
      <el-descriptions-item label="预警类型">{{ getWarningTypeLabel(currentWarning?.type) }}</el-descriptions-item>
      <el-descriptions-item label="监测数值">{{ currentWarning?.value }} {{ currentWarning?.unit }}</el-descriptions-item>
    </el-descriptions>
    
    <el-form label-width="80px">
      <el-form-item label="处理方式">
        <el-radio-group v-model="form.action">
          <el-radio label="confiscate">没收违规电器</el-radio>
          <el-radio label="education">批评教育</el-radio>
          <el-radio label="restore">恢复供电</el-radio>
          <el-radio label="false_alarm">误报/设备故障</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="处理备注">
        <el-input type="textarea" v-model="form.remark" rows="3" placeholder="请记录处理详情..." />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> <vab-icon icon="close-line" /> 取消</el-button>
      <el-button type="primary" @click="handleConfirm"> <vab-icon icon="check-line" /> 确认处理</el-button>
    </template>
  </el-dialog>
</template>

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

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

const emit = defineEmits(['success'])

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

const handleConfirm = () => {
  visible.value = false
  ElMessage.success('处理成功')
  emit('success', { 
    id: currentWarning.value.id, 
    action: form.action,
    remark: form.remark
  })
}

const getWarningTypeLabel = (type) => {
  const map = {
    malignant: '恶性负载',
    overload: '功率超限',
    inactive: '长期未用电',
  }
  return map[type] || '未知'
}

defineExpose({
  open
})
</script>

<style scoped>
.mb-20 { margin-bottom: 20px; }
</style>
