<template>
  <div class="alarm-management-container">
    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :model="queryParams" label-width="80px" @submit.prevent="loadAlarmRecords">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报警类型">
              <el-select v-model="queryParams.alarmType" placeholder="请选择报警类型">
                <el-option label="全部" value="" />
                <el-option label="故障报警" value="fault" />
                <el-option label="异常报警" value="abnormal" />
                <el-option label="离线报警" value="offline" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时间范围">
              <el-date-picker
                  v-model="queryParams.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" native-type="submit">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 报警记录表格 -->
    <el-card class="table-card">
      <el-table :data="alarmRecords" border style="width: 100%">
        <el-table-column prop="deviceId" label="设备ID" align="center" />
        <el-table-column prop="deviceName" label="设备名称" align="center" />
        <el-table-column prop="alarmType" label="报警类型" align="center">
          <template #default="{ row }">
            {{ formatAlarmType(row.alarmType) }}
          </template>
        </el-table-column>
        <el-table-column prop="alarmTime" label="报警时间" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ formatStatus(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button size="small" @click="viewDetail(row)">查看详情</el-button>
            <el-button size="small" type="warning" @click="forwardToMaintenance(row)">转发报警</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
        class="pagination"
        background
        layout="total, prev, pager, next, sizes"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
    />

    <!-- 查看详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="报警详情" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备ID">{{ selectedAlarm.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ selectedAlarm.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ formatAlarmType(selectedAlarm.alarmType) }}</el-descriptions-item>
        <el-descriptions-item label="报警时间">{{ selectedAlarm.alarmTime }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ formatStatus(selectedAlarm.status) }}</el-descriptions-item>
        <el-descriptions-item label="描述">{{ selectedAlarm.description || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 转发报警对话框 -->
    <el-dialog v-model="forwardDialogVisible" title="转发报警" width="50%">
      <el-form :model="forwardForm" label-width="120px">
        <el-form-item label="维保商">
          <el-input v-model="forwardForm.maintenanceProvider" placeholder="请输入维保商名称" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="forwardForm.contactInfo" placeholder="请输入维保商联系方式" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="forwardForm.remark" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="forwardDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForward">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

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

// 查询参数
const queryParams = ref({
  deviceName: '',
  alarmType: '',
  dateRange: []
})

// 报警记录数据
const alarmRecords = ref([])
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)

// 模拟报警记录数据
const mockAlarmData = [
  {
    deviceId: 'D1001',
    deviceName: '温度传感器A',
    alarmType: 'fault',
    alarmTime: '2025-04-05 14:30',
    status: 'pending',
    description: '设备故障，请尽快维修。'
  },
  {
    deviceId: 'D1002',
    deviceName: '空调控制器B',
    alarmType: 'abnormal',
    alarmTime: '2025-04-04 09:10',
    status: 'resolved',
    description: '异常报警，已修复。'
  },
  {
    deviceId: 'D2003',
    deviceName: '湿度传感器C',
    alarmType: 'warning',
    alarmTime: '2025-04-06 08:45',
    status: 'pending',
    description: '湿度过高，请检查通风系统。'
  },
  {
    deviceId: 'D3004',
    deviceName: '智能电表D',
    alarmType: 'fault',
    alarmTime: '2025-04-03 16:20',
    status: 'resolved',
    description: '电表通信故障，已恢复。'
  },
  {
    deviceId: 'D4005',
    deviceName: '烟雾探测器E',
    alarmType: 'emergency',
    alarmTime: '2025-04-07 10:15',
    status: 'pending',
    description: '检测到烟雾，请立即处理！'
  },
  {
    deviceId: 'D5006',
    deviceName: '门禁控制器F',
    alarmType: 'abnormal',
    alarmTime: '2025-04-02 13:50',
    status: 'resolved',
    description: '门禁异常，已修复。'
  },
  {
    deviceId: 'D6007',
    deviceName: '摄像头G',
    alarmType: 'fault',
    alarmTime: '2025-04-08 11:30',
    status: 'pending',
    description: '摄像头离线，请检查网络连接。'
  },
  {
    deviceId: 'D7008',
    deviceName: '照明控制器H',
    alarmType: 'warning',
    alarmTime: '2025-04-01 18:05',
    status: 'resolved',
    description: '照明亮度异常，已调整。'
  },
  {
    deviceId: 'D8009',
    deviceName: '通风系统I',
    alarmType: 'fault',
    alarmTime: '2025-04-09 09:25',
    status: 'pending',
    description: '通风系统故障，需维修。'
  },
  {
    deviceId: 'D9010',
    deviceName: '水浸传感器J',
    alarmType: 'emergency',
    alarmTime: '2025-04-10 14:40',
    status: 'pending',
    description: '检测到漏水，请立即处理！'
  },
  {
    deviceId: 'D1011',
    deviceName: 'UPS电源K',
    alarmType: 'abnormal',
    alarmTime: '2025-04-11 07:15',
    status: 'resolved',
    description: '电源异常，已恢复正常。'
  },
  {
    deviceId: 'D2012',
    deviceName: '服务器机柜L',
    alarmType: 'fault',
    alarmTime: '2025-04-12 12:00',
    status: 'pending',
    description: '服务器温度过高，请检查散热。'
  },
  {
    deviceId: 'D3013',
    deviceName: '网络交换机M',
    alarmType: 'warning',
    alarmTime: '2025-04-13 15:35',
    status: 'resolved',
    description: '网络流量异常，已优化。'
  },
  {
    deviceId: 'D4014',
    deviceName: '智能插座N',
    alarmType: 'fault',
    alarmTime: '2025-04-14 10:50',
    status: 'pending',
    description: '插座短路，请维修。'
  },
  {
    deviceId: 'D5015',
    deviceName: '燃气探测器O',
    alarmType: 'emergency',
    alarmTime: '2025-04-15 17:25',
    status: 'pending',
    description: '检测到燃气泄漏，紧急处理！'
  },
  {
    deviceId: 'D6016',
    deviceName: '电梯控制器P',
    alarmType: 'abnormal',
    alarmTime: '2025-04-16 08:10',
    status: 'resolved',
    description: '电梯运行异常，已修复。'
  },
  {
    deviceId: 'D7017',
    deviceName: '消防报警器Q',
    alarmType: 'fault',
    alarmTime: '2025-04-17 11:45',
    status: 'pending',
    description: '报警器故障，需更换。'
  },
  {
    deviceId: 'D8018',
    deviceName: '空调控制器R',
    alarmType: 'warning',
    alarmTime: '2025-04-18 14:20',
    status: 'resolved',
    description: '空调温度异常，已调整。'
  },
  {
    deviceId: 'D9019',
    deviceName: '智能窗帘S',
    alarmType: 'fault',
    alarmTime: '2025-04-19 09:55',
    status: 'pending',
    description: '窗帘电机故障，请维修。'
  },
  {
    deviceId: 'D1020',
    deviceName: '安防摄像头T',
    alarmType: 'emergency',
    alarmTime: '2025-04-20 16:30',
    status: 'pending',
    description: '检测到入侵，请立即查看！'
  },
  {
    deviceId: 'D2021',
    deviceName: '温湿度传感器U',
    alarmType: 'abnormal',
    alarmTime: '2025-04-21 10:05',
    status: 'resolved',
    description: '传感器数据异常，已校准。'
  },
  {
    deviceId: 'D3022',
    deviceName: '智能门锁V',
    alarmType: 'fault',
    alarmTime: '2025-04-22 13:40',
    status: 'pending',
    description: '门锁电池电量低，请更换。'
  },
  {
    deviceId: 'D4023',
    deviceName: '配电箱W',
    alarmType: 'warning',
    alarmTime: '2025-04-23 08:15',
    status: 'resolved',
    description: '电压波动，已稳定。'
  },
  {
    deviceId: 'D5024',
    deviceName: '新风系统X',
    alarmType: 'fault',
    alarmTime: '2025-04-24 11:50',
    status: 'pending',
    description: '风机故障，需维修。'
  }
]

// 加载报警记录
const loadAlarmRecords = () => {
  // 模拟异步请求
  setTimeout(() => {
    const filteredData = mockAlarmData.filter(item => {
      return (
          (!queryParams.value.deviceName || item.deviceName.includes(queryParams.value.deviceName)) &&
          (!queryParams.value.alarmType || item.alarmType === queryParams.value.alarmType)
      )
    })
    alarmRecords.value = filteredData.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
    total.value = filteredData.length
  }, 300)
}

// 重置查询条件
const resetQuery = () => {
  queryParams.value = {
    deviceName: '',
    alarmType: '',
    dateRange: []
  }
  loadAlarmRecords()
}

// 格式化报警类型
const formatAlarmType = (type) => {
  switch (type) {
    case 'fault': return '故障报警'
    case 'abnormal': return '异常报警'
    case 'offline': return '离线报警'
    default: return '未知'
  }
}

// 格式化状态
const formatStatus = (status) => {
  switch (status) {
    case 'pending': return '待处理'
    case 'resolved': return '已解决'
    default: return '未知'
  }
}

// 获取标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case 'pending': return 'warning'
    case 'resolved': return 'success'
    default: return ''
  }
}

// 查看详情
const detailDialogVisible = ref(false)
const selectedAlarm = ref({})
const viewDetail = (row) => {
  selectedAlarm.value = row
  detailDialogVisible.value = true
}

// 转发报警
const forwardDialogVisible = ref(false)
const forwardForm = ref({
  maintenanceProvider: '',
  contactInfo: '',
  remark: ''
})
const currentAlarm = ref(null)
const forwardToMaintenance = (row) => {
  currentAlarm.value = row
  forwardForm.value = {
    maintenanceProvider: '',
    contactInfo: '',
    remark: ''
  }
  forwardDialogVisible.value = true
}

// 提交转发
const submitForward = () => {
  if (!forwardForm.value.maintenanceProvider || !forwardForm.value.contactInfo) {
    ElMessage.warning('请填写维保商和联系方式')
    return
  }

  ElMessage.success(`报警已成功转发给 ${forwardForm.value.maintenanceProvider}`)
  forwardDialogVisible.value = false
}

// 分页事件
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  loadAlarmRecords()
}
const handlePageChange = (newPage) => {
  currentPage.value = newPage
  loadAlarmRecords()
}

// 初始化数据
onMounted(() => {
  loadAlarmRecords()
})
</script>

<style scoped lang="scss">
.alarm-management-container {
  padding: 20px;

  .filter-card {
    margin-bottom: 20px;
  }

  .table-card {
    margin-bottom: 20px;
  }

  .pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
