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

// 模拟报警数据
const alarmData = ref([
  { deviceId: '001', alarmType: '井盖位移', alarmLevel: '高', status: '未处理', time: '2023-09-15 14:30:00', location: '上海市浦东新区' },
  { deviceId: '002', alarmType: '水浸', alarmLevel: '中', status: '处理中', time: '2023-09-15 14:35:00', location: '上海市徐汇区' },
  { deviceId: '003', alarmType: '破损', alarmLevel: '低', status: '已处理', time: '2023-09-15 14:40:00', location: '上海市静安区' },
  // 可以添加更多模拟数据
]);

// 控制报警详情模态框的显示与隐藏
const detailVisible = ref(false);

// 当前选中的报警信息
const currentAlarm = ref({});

// 筛选条件
const deviceType = ref('');
const alarmType = ref('');
const alarmStatus = ref('');

// 查询报警
const handleQuery = () => {
  console.log('查询报警');

  // 根据筛选条件过滤数据
  const filteredData = alarmData.value.filter(item => {
    return (
        (!deviceType.value || item.deviceType === deviceType.value) &&
        (!alarmType.value || item.alarmType === alarmType.value) &&
        (!alarmStatus.value || item.status === alarmStatus.value)
    );
  });

  // 更新报警数据
  alarmData.value = filteredData;
};

// 屏蔽报警
const handleBlock = (row) => {
  ElMessageBox.confirm(`确定屏蔽设备 ${row.deviceId} 的报警吗？`)
      .then(() => {
        console.log('屏蔽报警', row);
        // 这里可以添加屏蔽报警的逻辑，例如更新报警状态或调用 API 更新服务器端的数据
        ElMessage.success('报警成功屏蔽！');
      })
      .catch(() => {
        ElMessage.error('取消屏蔽');
      });
};

// 查看报警详情
const handleView = (row) => {
  console.log('查看报警详情', row);
  // 设置当前选中的报警信息
  currentAlarm.value = row;
  // 打开模态框
  detailVisible.value = true;
};
</script>



<template>
  <div class="alarm-management">
    <el-card class="alarm-card">
      <div class="alarm-header">
        <h3>报警管理</h3>
        <el-form :inline="true" class="alarm-query-form">
          <!-- 筛选功能 -->
          <el-form-item label="设备类型">
            <el-select v-model="deviceType" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="井盖" value="井盖"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报警类型">
            <el-select v-model="alarmType" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="井盖位移" value="井盖位移"></el-option>
              <el-option label="水浸" value="水浸"></el-option>
              <el-option label="破损" value="破损"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报警状态">
            <el-select v-model="alarmStatus" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="未处理" value="未处理"></el-option>
              <el-option label="处理中" value="处理中"></el-option>
              <el-option label="已处理" value="已处理"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询报警</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="alarmData" style="width: 100%">
        <el-table-column prop="deviceId" label="设备ID"></el-table-column>
        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
        <el-table-column prop="alarmLevel" label="报警等级"></el-table-column>
        <el-table-column prop="status" label="报警状态"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="handleBlock(scope.row)">屏蔽报警</el-button>
            <el-button type="text" @click="handleView(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 报警详情模态框 -->
    <el-dialog v-model="detailVisible" title="报警详情" width="50%">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="设备ID">{{ currentAlarm.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ currentAlarm.alarmType }}</el-descriptions-item>
        <el-descriptions-item label="报警等级">{{ currentAlarm.alarmLevel }}</el-descriptions-item>
        <el-descriptions-item label="报警状态">{{ currentAlarm.status }}</el-descriptions-item>
        <el-descriptions-item label="报警时间">{{ currentAlarm.time }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{ currentAlarm.location }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>


<style scoped>
.alarm-management {
  padding: 20px;
}
.alarm-card {
  margin-bottom: 20px;
}
.alarm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
