<template>
  <div class="alarm-container">
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="报警类型">
          <el-select v-model="searchForm.warningType" placeholder="请选择" clearable>
            <el-option v-for="d in alarmTypeDict" :key="d.dictValue" :label="d.dictLabel" :value="d.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="searchForm.alarmStatus" placeholder="请选择" clearable>
            <el-option v-for="d in alarmStatusDict" :key="d.dictValue" :label="d.dictLabel" :value="d.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData" border stripe v-loading="loading">
        <el-table-column prop="deviceCode" label="设备编码" min-width="120" />
        <el-table-column prop="warningType" label="报警类型" width="120">
          <template #default="{ row }">{{ getDictLabel(alarmTypeDict, row.warningType) }}</template>
        </el-table-column>
        <el-table-column prop="warningCode" label="预警编码" width="100" />
        <el-table-column prop="minValue" label="最小值" width="90" />
        <el-table-column prop="maxValue" label="最大值" width="90" />
        <el-table-column prop="actualValue" label="实际值" width="90">
          <template #default="{ row }">
            <span :style="{ color: row.actualValue > row.maxValue || row.actualValue < row.minValue ? '#f5222d' : '#52c41a', fontWeight: 'bold' }">{{ row.actualValue }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="alarmStatus" label="状态" width="90">
          <template #default="{ row }">
            <el-tag :type="row.alarmStatus === '0' ? 'danger' : 'success'">{{ getDictLabel(alarmStatusDict, row.alarmStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="alarmTime" label="报警时间" width="160" />
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.alarmStatus === 0" type="warning" size="small" @click="handleOpenHandle(row)">处理</el-button>
            <el-tag v-else type="success" size="small">已处理</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
        layout="total, prev, pager, next, sizes" :page-sizes="[10, 20, 50]"
        @change="loadData" style="margin-top: 16px; justify-content: flex-end"
      />
    </el-card>

    <el-dialog title="处理报警" v-model="handleDialogVisible" width="450px">
      <el-form :model="handleForm" label-width="80px">
        <el-form-item label="处理人">
          <el-input v-model="handleForm.handleUser" placeholder="请输入处理人" />
        </el-form-item>
        <el-form-item label="处理备注">
          <el-input v-model="handleForm.handleRemark" type="textarea" :rows="3" placeholder="请输入处理备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认处理</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getAlarmPage, handleAlarm } from '@/api/pipeNetwork/hazard'
import { getDicts } from '@/api/system/dict/data'

const loading = ref(false)
const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchForm = reactive({ warningType: '', alarmStatus: '' })

const alarmTypeDict = ref([])
const alarmStatusDict = ref([])

function getDictLabel(dict, value) {
  const item = dict.find(d => d.dictValue === String(value))
  return item ? item.dictLabel : value
}

async function loadDicts() {
  const [typeRes, statusRes] = await Promise.all([
    getDicts('alarm_type'),
    getDicts('alarm_status')
  ])
  alarmTypeDict.value = typeRes.data
  alarmStatusDict.value = statusRes.data
}
const handleDialogVisible = ref(false)
const currentAlarmId = ref('')
const handleForm = reactive({ handleUser: '', handleRemark: '' })

async function loadData() {
  loading.value = true
  try {
    const res = await getAlarmPage(pageNum.value, pageSize.value, searchForm)
    tableData.value = res.data.records || []
    total.value = res.data.total || 0
  } catch (e) { console.error(e) } finally { loading.value = false }
}
function handleSearch() { pageNum.value = 1; loadData() }
function handleReset() { Object.assign(searchForm, { warningType: '', alarmStatus: '' }); handleSearch() }
function handleOpenHandle(row) {
  currentAlarmId.value = row.id
  Object.assign(handleForm, { handleUser: '', handleRemark: '' })
  handleDialogVisible.value = true
}
async function handleConfirm() {
  try {
    await handleAlarm(currentAlarmId.value, handleForm.handleUser, handleForm.handleRemark)
    ElMessage.success('处理成功')
    handleDialogVisible.value = false
    loadData()
  } catch (e) { console.error(e) }
}

onMounted(async () => { await loadDicts(); loadData() })
</script>

<style scoped>
.alarm-container { padding: 16px; }
.search-card { margin-bottom: 16px; }
</style>
