<template>
  <div class="alarm-list page-container">
    <div class="toolbar" style="margin-bottom: 20px; display: flex; justify-content: space-between;">
      <a-radio-group v-model="filterStatus" type="button" @change="fetchAlarms as any">
        <a-radio value="">全部</a-radio>
        <a-radio value="ACTIVE">未处理</a-radio>
        <a-radio value="ACKED">已确认</a-radio>
        <a-radio value="RESOLVED">已解决</a-radio>
      </a-radio-group>
      <a-button @click="fetchAlarms">
        <template #icon><icon-refresh /></template> 刷新
      </a-button>
    </div>

    <a-card :bordered="false">
      <a-table :data="alarms" :loading="loading" :pagination="{ pageSize: 10 }">
        <template #columns>
          <a-table-column title="时间" data-index="StartTime" :width="200">
            <template #cell="{ record }">
              {{ new Date(record.StartTime).toLocaleString() }}
            </template>
          </a-table-column>
          <a-table-column title="告警类型" data-index="Type" :width="150">
            <template #cell="{ record }">
              <a-tag color="red" bordered>{{ record.Type }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="内容" data-index="Content" />
          <a-table-column title="状态" data-index="Status" :width="100">
            <template #cell="{ record }">
              <a-tag :color="getStatusType(record.Status)">
                {{ getStatusText(record.Status) }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="操作" :width="120">
            <template #cell="{ record }">
              <a-button 
                v-if="record.Status === 'ACTIVE'"
                type="primary" 
                size="small" 
                @click="handleAck(record)"
              >确认</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getAlarms, acknowledgeAlarm, type Alarm } from '../api/monitor';
import { Message } from '@arco-design/web-vue';
import { IconRefresh } from '@arco-design/web-vue/es/icon';

const alarms = ref<Alarm[]>([]);
const loading = ref(false);
const filterStatus = ref('ACTIVE');

const fetchAlarms = async () => {
  loading.value = true;
  try {
    alarms.value = await getAlarms(filterStatus.value === '' ? undefined : filterStatus.value);
  } catch (error) {
    Message.error('获取告警列表失败');
  } finally {
    loading.value = false;
  }
};

const handleAck = async (row: Alarm) => {
  try {
    await acknowledgeAlarm(row.ID);
    Message.success('告警已确认');
    fetchAlarms();
  } catch (error) {
    Message.error('操作失败');
  }
};

const getStatusType = (status: string) => {
  switch (status) {
    case 'ACTIVE': return 'red';
    case 'ACKED': return 'orange';
    case 'RESOLVED': return 'green';
    default: return 'gray';
  }
};

const getStatusText = (status: string) => {
  switch (status) {
    case 'ACTIVE': return '未处理';
    case 'ACKED': return '已确认';
    case 'RESOLVED': return '已解决';
    default: return status;
  }
};

onMounted(() => {
  fetchAlarms();
});
</script>

<style scoped>
.page-container {
  padding: 20px;
}
</style>
