<template>
  <view class="alarm-record-page">
    <!-- 固定头部 -->
    <view class="fixed-header">
      <text class="header-title">移动式检修车间</text>
    </view>
    
    <!-- 内容区域 -->
    <view class="tabbar-content">
      <AlarmRecord ref="alarmRecord" />
    </view>
  </view>
</template>

<script>
import AlarmRecord from '@/components/AlarmRecord.vue'
export default {
  components: {
    AlarmRecord
  },
  onShow() {
    console.log('📱 报警记录页面显示，触发页面更新')
    // 触发子组件重新初始化
    this.$refs.alarmRecord?.refreshData?.()
  },
  data() {
    return {
      totalAlarms: 28,
      pendingAlarms: 5,
      resolvedAlarms: 20,
      urgentAlarms: 3,
      levelIndex: 0,
      levelOptions: ['全部级别', '紧急', '高', '中', '低'],
      statusIndex: 0,
      statusOptions: ['全部状态', '未处理', '已处理', '已忽略'],
      alarmDate: '2025-09-29',
      alarms: [
        {
          level: 'urgent',
          levelText: '紧急',
          status: 'pending',
          statusText: '未处理',
          time: '2025-09-29 15:45:33',
          title: '温度超限报警',
          description: '温度传感器读数超过安全阈值，存在设备损坏风险',
          source: '温度传感器01',
          currentValue: '85.2°C',
          threshold: '80.0°C',
          resolver: '',
          resolveTime: ''
        },
        {
          level: 'high',
          levelText: '高',
          status: 'pending',
          statusText: '未处理',
          time: '2025-09-29 15:42:15',
          title: '湿度异常报警',
          description: '湿度传感器读数异常，可能影响设备正常运行',
          source: '湿度传感器02',
          currentValue: '95%',
          threshold: '90%',
          resolver: '',
          resolveTime: ''
        },
        {
          level: 'medium',
          levelText: '中',
          status: 'resolved',
          statusText: '已处理',
          time: '2025-09-29 15:38:22',
          title: '网络连接异常',
          description: 'MQTT连接中断，数据同步失败',
          source: '网络模块',
          currentValue: '离线',
          threshold: '在线',
          resolver: '系统管理员',
          resolveTime: '2025-09-29 15:40:15'
        },
        {
          level: 'low',
          levelText: '低',
          status: 'resolved',
          statusText: '已处理',
          time: '2025-09-29 15:35:10',
          title: '存储空间不足',
          description: '系统存储空间使用率超过80%',
          source: '存储模块',
          currentValue: '85%',
          threshold: '80%',
          resolver: '系统管理员',
          resolveTime: '2025-09-29 15:36:45'
        },
        {
          level: 'urgent',
          levelText: '紧急',
          status: 'pending',
          statusText: '未处理',
          time: '2025-09-29 15:30:55',
          title: '设备离线报警',
          description: '关键设备离线，可能影响生产安全',
          source: '设备监控',
          currentValue: '离线',
          threshold: '在线',
          resolver: '',
          resolveTime: ''
        }
      ]
    }
  },
  onLoad() {
    console.log('报警记录页面加载')
  },
  methods: {
    onLevelChange(e) {
      this.levelIndex = e.detail.value
    },
    onStatusChange(e) {
      this.statusIndex = e.detail.value
    },
    onDateChange(e) {
      this.alarmDate = e.detail.value
    },
    searchAlarms() {
      console.log('搜索报警', {
        level: this.levelOptions[this.levelIndex],
        status: this.statusOptions[this.statusIndex],
        date: this.alarmDate
      })
      uni.showToast({
        title: '搜索中...',
        icon: 'loading'
      })
    },
    refreshAlarms() {
      uni.showToast({
        title: '刷新报警记录',
        icon: 'success'
      })
    },
    exportAlarms() {
      uni.showToast({
        title: '导出功能开发中',
        icon: 'none'
      })
    },
    clearAlarms() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有报警记录吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            this.alarms = []
            this.totalAlarms = 0
            this.pendingAlarms = 0
            this.resolvedAlarms = 0
            this.urgentAlarms = 0
            uni.showToast({
              title: '清空成功',
              icon: 'success'
            })
          }
        }
      })
    },
    resolveAlarm(alarm) {
      uni.showModal({
        title: '处理报警',
        content: `确定要处理 "${alarm.title}" 吗？`,
        success: (res) => {
          if (res.confirm) {
            alarm.status = 'resolved'
            alarm.statusText = '已处理'
            alarm.resolver = '当前用户'
            alarm.resolveTime = new Date().toLocaleString()
            this.pendingAlarms--
            this.resolvedAlarms++
            uni.showToast({
              title: '处理成功',
              icon: 'success'
            })
          }
        }
      })
    },
    ignoreAlarm(alarm) {
      uni.showModal({
        title: '忽略报警',
        content: `确定要忽略 "${alarm.title}" 吗？`,
        success: (res) => {
          if (res.confirm) {
            alarm.status = 'ignored'
            alarm.statusText = '已忽略'
            this.pendingAlarms--
            uni.showToast({
              title: '已忽略',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.alarm-record-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.alarm-statistics {
  background: white;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  
  &.total {
    color: #333;
  }
  
  &.pending {
    color: #ff4444;
  }
  
  &.resolved {
    color: #4caf50;
  }
  
  &.urgent {
    color: #ff9800;
  }
}

.filter-section {
  background: white;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.filter-row {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.filter-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.filter-label {
  font-size: 24rpx;
  color: #666;
}

.picker-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  border: 2rpx solid #e0e0e0;
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
}

.search-button {
  background-color: #3f51b5;
  color: white;
  padding: 20rpx 30rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  align-self: flex-end;
}

.alarms-container {
  background: white;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
  overflow: hidden;
}

.alarms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.alarms-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 15rpx;
}

.action-button {
  background-color: #3f51b5;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  
  &.clear {
    background-color: #ff4444;
  }
  
  &.resolve {
    background-color: #4caf50;
  }
  
  &.ignore {
    background-color: #ff9800;
  }
}

.alarms-list {
  height: 600rpx;
}

.alarm-item {
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.urgent {
    border-left: 8rpx solid #ff4444;
  }
  
  &.high {
    border-left: 8rpx solid #ff9800;
  }
  
  &.medium {
    border-left: 8rpx solid #2196f3;
  }
  
  &.low {
    border-left: 8rpx solid #4caf50;
  }
}

.alarm-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 15rpx;
}

.alarm-level {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: bold;
  
  &.urgent {
    background-color: #ffebee;
    color: #ff4444;
  }
  
  &.high {
    background-color: #fff3e0;
    color: #ff9800;
  }
  
  &.medium {
    background-color: #e3f2fd;
    color: #2196f3;
  }
  
  &.low {
    background-color: #e8f5e8;
    color: #4caf50;
  }
}

.alarm-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: bold;
  
  &.pending {
    background-color: #fff3cd;
    color: #ff9800;
  }
  
  &.resolved {
    background-color: #d4edda;
    color: #4caf50;
  }
  
  &.ignored {
    background-color: #f8d7da;
    color: #dc3545;
  }
}

.alarm-time {
  font-size: 24rpx;
  color: #666;
  margin-left: auto;
}

.alarm-content {
  margin-bottom: 20rpx;
}

.alarm-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.alarm-description {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.alarm-details {
  background-color: #f8f8f8;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.detail-label {
  font-size: 24rpx;
  color: #666;
}

.detail-value {
  font-size: 24rpx;
  color: #333;
  font-weight: bold;
}

.alarm-actions {
  display: flex;
  gap: 20rpx;
  justify-content: flex-end;
}

.alarm-resolution {
  background-color: #e8f5e8;
  padding: 20rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.resolution-text {
  font-size: 24rpx;
  color: #4caf50;
}

.resolution-time {
  font-size: 24rpx;
  color: #666;
}
</style>