<template>
  <div class="device-warning">
    <div class="page-header">
      <h1>设备预警</h1>
      <p>监控和管理银行设备运行状态预警</p>
    </div>

    <div class="content">
      <!-- 预警统计 -->
      <div class="overview-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="总预警数"
                :value="warningStats.total"
                :value-style="{ color: '#ff4d4f' }"
              />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="严重预警"
                :value="warningStats.critical"
                :value-style="{ color: '#ff4d4f' }"
              />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="一般预警"
                :value="warningStats.warning"
                :value-style="{ color: '#faad14' }"
              />
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card>
              <a-statistic
                title="已处理"
                :value="warningStats.resolved"
                :value-style="{ color: '#52c41a' }"
              />
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 搜索和筛选 -->
      <div class="search-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-input-search
              v-model:value="searchText"
              placeholder="搜索设备名称"
              enter-button="搜索"
              @search="handleSearch"
            />
          </a-col>
          <a-col :span="4">
            <a-select
              v-model:value="levelFilter"
              placeholder="预警级别"
              allow-clear
              @change="handleFilter"
            >
              <a-select-option value="critical">严重</a-select-option>
              <a-select-option value="warning">一般</a-select-option>
              <a-select-option value="info">信息</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="4">
            <a-select
              v-model:value="statusFilter"
              placeholder="处理状态"
              allow-clear
              @change="handleFilter"
            >
              <a-select-option value="pending">待处理</a-select-option>
              <a-select-option value="processing">处理中</a-select-option>
              <a-select-option value="resolved">已解决</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="refreshWarnings">
              <reload-outlined /> 刷新
            </a-button>
          </a-col>
        </a-row>
      </div>

      <!-- 预警列表 -->
      <a-table
        :columns="columns"
        :data-source="filteredWarnings"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'level'">
            <a-tag :color="getLevelColor(record.level)">
              {{ getLevelName(record.level) }}
            </a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusName(record.status) }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small" @click="viewWarning(record)">查看</a-button>
              <a-button type="link" size="small" @click="handleWarning(record.id)">处理</a-button>
              <a-button type="link" size="small" @click="resolveWarning(record.id)">解决</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 预警详情对话框 -->
    <a-modal
      v-model:open="detailModalVisible"
      title="预警详情"
      width="800px"
      :footer="null"
    >
      <div v-if="selectedWarning" class="warning-detail">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="设备名称">
            {{ selectedWarning.deviceName }}
          </a-descriptions-item>
          <a-descriptions-item label="预警级别">
            <a-tag :color="getLevelColor(selectedWarning.level)">
              {{ getLevelName(selectedWarning.level) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="预警类型">
            {{ selectedWarning.type }}
          </a-descriptions-item>
          <a-descriptions-item label="处理状态">
            <a-tag :color="getStatusColor(selectedWarning.status)">
              {{ getStatusName(selectedWarning.status) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="发生时间">
            {{ selectedWarning.occurTime }}
          </a-descriptions-item>
          <a-descriptions-item label="处理人员">
            {{ selectedWarning.handler || '未分配' }}
          </a-descriptions-item>
          <a-descriptions-item label="预警描述" :span="2">
            {{ selectedWarning.description }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { ReloadOutlined } from '@ant-design/icons-vue'

// 响应式数据
const loading = ref(false)
const searchText = ref('')
const levelFilter = ref(undefined)
const statusFilter = ref(undefined)
const detailModalVisible = ref(false)
const selectedWarning = ref(null)

// 预警统计
const warningStats = ref({
  total: 23,
  critical: 5,
  warning: 12,
  resolved: 6
})

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
})

// 表格列配置
const columns = [
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    key: 'deviceName',
    sorter: true,
  },
  {
    title: '预警级别',
    dataIndex: 'level',
    key: 'level',
    filters: [
      { text: '严重', value: 'critical' },
      { text: '一般', value: 'warning' },
      { text: '信息', value: 'info' },
    ],
  },
  {
    title: '预警类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '处理状态',
    dataIndex: 'status',
    key: 'status',
    filters: [
      { text: '待处理', value: 'pending' },
      { text: '处理中', value: 'processing' },
      { text: '已解决', value: 'resolved' },
    ],
  },
  {
    title: '发生时间',
    dataIndex: 'occurTime',
    key: 'occurTime',
    sorter: true,
  },
  {
    title: '处理人员',
    dataIndex: 'handler',
    key: 'handler',
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
  },
]

// 模拟预警数据
const warnings = ref([
  {
    id: 1,
    deviceName: 'ATM-001',
    level: 'critical',
    type: '硬件故障',
    status: 'pending',
    occurTime: '2024-01-22 14:30:25',
    handler: null,
    description: 'ATM机读卡器故障，无法正常读取银行卡'
  },
  {
    id: 2,
    deviceName: 'POS-002',
    level: 'warning',
    type: '网络异常',
    status: 'processing',
    occurTime: '2024-01-22 13:15:10',
    handler: '张三',
    description: 'POS机网络连接不稳定，偶尔出现断线'
  },
  {
    id: 3,
    deviceName: 'SERVER-003',
    level: 'critical',
    type: '系统异常',
    status: 'resolved',
    occurTime: '2024-01-22 10:20:30',
    handler: '李四',
    description: '服务器CPU使用率过高，已重启解决'
  }
])

// 计算属性
const filteredWarnings = computed(() => {
  let result = warnings.value

  if (searchText.value) {
    result = result.filter(warning =>
      warning.deviceName.toLowerCase().includes(searchText.value.toLowerCase())
    )
  }

  if (levelFilter.value) {
    result = result.filter(warning => warning.level === levelFilter.value)
  }

  if (statusFilter.value) {
    result = result.filter(warning => warning.status === statusFilter.value)
  }

  return result
})

// 方法
const getLevelColor = (level) => {
  const colors = {
    'critical': 'red',
    'warning': 'orange',
    'info': 'blue'
  }
  return colors[level] || 'default'
}

const getLevelName = (level) => {
  const names = {
    'critical': '严重',
    'warning': '一般',
    'info': '信息'
  }
  return names[level] || level
}

const getStatusColor = (status) => {
  const colors = {
    'pending': 'red',
    'processing': 'orange',
    'resolved': 'green'
  }
  return colors[status] || 'default'
}

const getStatusName = (status) => {
  const names = {
    'pending': '待处理',
    'processing': '处理中',
    'resolved': '已解决'
  }
  return names[status] || status
}

const handleSearch = () => {
  pagination.value.current = 1
}

const handleFilter = () => {
  pagination.value.current = 1
}

const handleTableChange = (pag) => {
  pagination.value = pag
}

const refreshWarnings = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    message.success('预警信息已刷新')
  }, 1000)
}

const viewWarning = (warning) => {
  selectedWarning.value = warning
  detailModalVisible.value = true
}

const handleWarning = (id) => {
  const warning = warnings.value.find(w => w.id === id)
  if (warning) {
    warning.status = 'processing'
    warning.handler = '当前用户'
    message.success('预警已开始处理')
  }
}

const resolveWarning = (id) => {
  const warning = warnings.value.find(w => w.id === id)
  if (warning) {
    warning.status = 'resolved'
    message.success('预警已解决')
  }
}

onMounted(() => {
  pagination.value.total = warnings.value.length
})
</script>

<style scoped>
.device-warning {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.overview-section {
  margin-bottom: 24px;
}

.search-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #fafafa;
  border-radius: 6px;
}

.warning-detail {
  padding: 16px 0;
}
</style>
