zengzy / hhrcs_web · Files

<script setup lang="ts">
import { computed, onMounted, ref, shallowRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { useToast } from 'vuestic-ui'
import { ColDef, GridReadyEvent, ITooltipParams, RowDoubleClickedEvent, SelectionChangedEvent } from 'ag-grid-community'
import alarmLogsApi, {
  AlarmLogItem,
  AlarmLogListQuery,
  AlarmLogSeverity,
  AlarmLogSource,
  AlarmLogStatus,
} from '../../services/alarmLogs'
import { downloadAsCSV } from '../../services/toCSV'

type AlarmLogListResult = {
  items: AlarmLogItem[]
  totalPages: number
  pageNumber: number
  totalCount: number
}

type AlarmFilterForm = {
  startTime: string
  endTime: string
  severity: '' | AlarmLogSeverity
  status: '' | AlarmLogStatus
  source: '' | AlarmLogSource
  keyword: string
}

const { t } = useI18n()
const { init: notify } = useToast()

const pageSize = 20
const gridApi = ref<any>(null)
const rowData = ref<AlarmLogItem[]>([])
const selectedRows = ref<AlarmLogItem[]>([])
const isLoading = ref(false)
const isExporting = ref(false)
const isUsingMockData = ref(false)
const currentPage = ref(1)
const totalPages = ref(1)
const detailModalOpen = ref(false)
const detailRecord = ref<AlarmLogItem | null>(null)

const formatDateTimeLocal = (date: Date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day}T${hour}:${minute}`
}

const now = new Date()
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000)

const createDefaultFilters = (): AlarmFilterForm => ({
  startTime: formatDateTimeLocal(oneDayAgo),
  endTime: formatDateTimeLocal(now),
  severity: '',
  status: '',
  source: '',
  keyword: '',
})

const filters = ref<AlarmFilterForm>(createDefaultFilters())

const severityOptions = computed(() => [
  { text: t('alarmLogs.options.severity.all'), value: '' },
  { text: t('alarmLogs.options.severity.critical'), value: 'critical' },
  { text: t('alarmLogs.options.severity.warning'), value: 'warning' },
  { text: t('alarmLogs.options.severity.info'), value: 'info' },
])

const statusOptions = computed(() => [
  { text: t('alarmLogs.options.status.all'), value: '' },
  { text: t('alarmLogs.options.status.active'), value: 'active' },
  { text: t('alarmLogs.options.status.acknowledged'), value: 'acknowledged' },
  { text: t('alarmLogs.options.status.resolved'), value: 'resolved' },
])

const sourceOptions = computed(() => [
  { text: t('alarmLogs.options.source.all'), value: '' },
  { text: t('alarmLogs.options.source.robot'), value: 'robot' },
  { text: t('alarmLogs.options.source.system'), value: 'system' },
  { text: t('alarmLogs.options.source.charging'), value: 'charging' },
  { text: t('alarmLogs.options.source.storage'), value: 'storage' },
])

const getOptionText = (options: { text: string; value: string }[], value: string) =>
  options.find((item) => item.value === value)?.text || value

const getSeverityText = (value?: string) =>
  getOptionText(severityOptions.value as { text: string; value: string }[], value || '')
const getStatusText = (value?: string) =>
  getOptionText(statusOptions.value as { text: string; value: string }[], value || '')
const getSourceText = (value?: string) =>
  getOptionText(sourceOptions.value as { text: string; value: string }[], value || '')

const formatDisplayTime = (value?: string) => {
  if (!value) return ''
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return value
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  const second = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

const getDurationText = (record: AlarmLogItem) => {
  const start = new Date(record.occurredAt)
  const end = record.recoveredAt ? new Date(record.recoveredAt) : new Date()

  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
    return ''
  }

  const diffMs = Math.max(end.getTime() - start.getTime(), 0)
  const totalMinutes = Math.floor(diffMs / (1000 * 60))
  const days = Math.floor(totalMinutes / (60 * 24))
  const hours = Math.floor((totalMinutes % (60 * 24)) / 60)
  const minutes = totalMinutes % 60

  const parts: string[] = []
  if (days > 0) parts.push(`${days}d`)
  if (hours > 0 || days > 0) parts.push(`${hours}h`)
  parts.push(`${minutes}m`)

  return parts.join(' ')
}

const mockAlarmLogs = ref<AlarmLogItem[]>([
  {
    id: 'alarm-001',
    alarmCode: 'ALM-20260521-001',
    title: '机器人急停触发',
    content: 'RBT-01 在入库线边站触发急停，需人工复位后恢复运行。',
    severity: 'critical',
    status: 'active',
    source: 'robot',
    targetCode: 'RBT-01',
    targetName: '搬运机器人 01',
    occurredAt: '2026-05-21 08:35:00',
    acknowledged: false,
  },
  {
    id: 'alarm-002',
    alarmCode: 'ALM-20260521-002',
    title: '充电桩通信中断',
    content: 'CHG-02 与平台心跳丢失，已自动切换为离线状态。',
    severity: 'warning',
    status: 'acknowledged',
    source: 'charging',
    targetCode: 'CHG-02',
    targetName: '充电桩 02',
    occurredAt: '2026-05-21 07:48:00',
    acknowledged: true,
    acknowledgedBy: '王工',
    acknowledgedAt: '2026-05-21 07:55:30',
  },
  {
    id: 'alarm-003',
    alarmCode: 'ALM-20260521-003',
    title: '库位占用冲突',
    content: 'LOC-A-01 与任务下发状态不一致，建议核查库位状态同步。',
    severity: 'warning',
    status: 'resolved',
    source: 'storage',
    targetCode: 'LOC-A-01',
    targetName: 'A区 01库位',
    occurredAt: '2026-05-21 06:20:00',
    acknowledged: true,
    acknowledgedBy: '李倩',
    acknowledgedAt: '2026-05-21 06:23:10',
    recoveredAt: '2026-05-21 06:41:00',
    recoveryNote: '库位状态已重新同步。',
  },
  {
    id: 'alarm-004',
    alarmCode: 'ALM-20260520-014',
    title: '系统接口调用超时',
    content: 'WCS 请求 ERP 回写超时，重试 3 次后仍未成功。',
    severity: 'critical',
    status: 'acknowledged',
    source: 'system',
    targetCode: 'WCS-ERP',
    targetName: 'WCS 接口服务',
    occurredAt: '2026-05-20 22:15:00',
    acknowledged: true,
    acknowledgedBy: '张磊',
    acknowledgedAt: '2026-05-20 22:16:42',
  },
  {
    id: 'alarm-005',
    alarmCode: 'ALM-20260520-015',
    title: '机器人低电量预警',
    content: 'RBT-07 电量低于 20%，已加入充电队列。',
    severity: 'info',
    status: 'resolved',
    source: 'robot',
    targetCode: 'RBT-07',
    targetName: '叉车机器人 07',
    occurredAt: '2026-05-20 19:30:00',
    acknowledged: true,
    acknowledgedBy: '系统自动',
    acknowledgedAt: '2026-05-20 19:30:00',
    recoveredAt: '2026-05-20 20:05:00',
    recoveryNote: '机器人已接入充电桩并恢复至安全电量。',
  },
  {
    id: 'alarm-006',
    alarmCode: 'ALM-20260520-016',
    title: '地图节点资源异常',
    content: 'NODE-B-12 绑定资源缺失，相关任务已暂停派发。',
    severity: 'warning',
    status: 'active',
    source: 'system',
    targetCode: 'NODE-B-12',
    targetName: 'B12 节点',
    occurredAt: '2026-05-20 17:12:00',
    acknowledged: false,
  },
])

const selectedRecord = computed(() => selectedRows.value[0] || null)
const hasSelection = computed(() => Boolean(selectedRecord.value))
const canAcknowledge = computed(() => Boolean(selectedRecord.value && !selectedRecord.value.acknowledged))

const columnDefs = shallowRef<ColDef[]>([
  {
    headerName: t('alarmLogs.table.serialNumber'),
    width: 80,
    filter: false,
    sortable: false,
    valueGetter: (params: any) => (currentPage.value - 1) * pageSize + (params.node?.rowIndex ?? 0) + 1,
    cellStyle: { textAlign: 'center' },
  },
  {
    field: 'occurredAt',
    headerName: t('alarmLogs.table.occurredAt'),
    minWidth: 180,
    valueFormatter: (params: any) => formatDisplayTime(params.value),
  },
  {
    field: 'severity',
    headerName: t('alarmLogs.table.severity'),
    width: 110,
    valueGetter: (params: any) => getSeverityText(params.data?.severity),
  },
  {
    field: 'source',
    headerName: t('alarmLogs.table.source'),
    width: 120,
    valueGetter: (params: any) => getSourceText(params.data?.source),
  },
  { field: 'targetCode', headerName: t('alarmLogs.table.targetCode'), width: 140 },
  { field: 'targetName', headerName: t('alarmLogs.table.targetName'), minWidth: 180 },
  { field: 'alarmCode', headerName: t('alarmLogs.table.alarmCode'), width: 180 },
  { field: 'title', headerName: t('alarmLogs.table.title'), minWidth: 180 },
  { field: 'content', headerName: t('alarmLogs.table.content'), minWidth: 260, flex: 1 },
  {
    field: 'status',
    headerName: t('alarmLogs.table.status'),
    width: 120,
    valueGetter: (params: any) => getStatusText(params.data?.status),
  },
  { field: 'acknowledgedBy', headerName: t('alarmLogs.table.acknowledgedBy'), width: 120 },
  {
    field: 'acknowledgedAt',
    headerName: t('alarmLogs.table.acknowledgedAt'),
    minWidth: 180,
    valueFormatter: (params: any) => formatDisplayTime(params.value),
  },
  {
    field: 'recoveredAt',
    headerName: t('alarmLogs.table.recoveredAt'),
    minWidth: 180,
    valueFormatter: (params: any) => formatDisplayTime(params.value),
  },
  {
    field: 'duration',
    headerName: t('alarmLogs.table.duration'),
    width: 110,
    valueGetter: (params: any) => getDurationText(params.data),
  },
])

const defaultColDef = ref<ColDef>({
  resizable: true,
  sortable: true,
  filter: false,
  cellStyle: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  tooltipValueGetter: (params: ITooltipParams) => String(params.value ?? ''),
})

const normalizeListResult = (response: any): AlarmLogListResult => {
  const data = Array.isArray(response)
    ? response
    : (response?.Data ?? response?.data ?? response?.items ?? response?.Items ?? [])
  const pageInfo = response?.pageInfo ?? response?.PageInfo
  const normalizedPageNumber = Number(pageInfo?.pageNumber ?? pageInfo?.PageNumber ?? currentPage.value) || 1
  const normalizedPageSize = Number(pageInfo?.pageSize ?? pageInfo?.PageSize ?? pageSize) || pageSize
  const normalizedTotalCount = Number(pageInfo?.totalCount ?? pageInfo?.TotalCount ?? 0) || 0
  const normalizedTotalPages =
    Number(pageInfo?.totalPages ?? pageInfo?.TotalPages ?? 0) ||
    (normalizedTotalCount > 0 ? Math.ceil(normalizedTotalCount / normalizedPageSize) : 1)

  return {
    items: Array.isArray(data) ? data : [],
    totalPages: normalizedTotalPages,
    pageNumber: normalizedPageNumber,
    totalCount: normalizedTotalCount,
  }
}

const normalizeKeyword = (value: string) => value.trim().toLowerCase()

const getFilteredMockData = () => {
  const keyword = normalizeKeyword(filters.value.keyword)
  const start = filters.value.startTime ? new Date(filters.value.startTime) : null
  const end = filters.value.endTime ? new Date(filters.value.endTime) : null

  return mockAlarmLogs.value.filter((item) => {
    const occurredAt = new Date(item.occurredAt)
    const keywordMatched =
      !keyword ||
      [item.alarmCode, item.title, item.content, item.targetCode, item.targetName]
        .join(' ')
        .toLowerCase()
        .includes(keyword)

    const severityMatched = !filters.value.severity || item.severity === filters.value.severity
    const statusMatched = !filters.value.status || item.status === filters.value.status
    const sourceMatched = !filters.value.source || item.source === filters.value.source
    const startMatched = !start || Number.isNaN(start.getTime()) || occurredAt >= start
    const endMatched = !end || Number.isNaN(end.getTime()) || occurredAt <= end

    return keywordMatched && severityMatched && statusMatched && sourceMatched && startMatched && endMatched
  })
}

const applyMockData = () => {
  const filtered = getFilteredMockData()

  totalPages.value = Math.max(1, Math.ceil(filtered.length / pageSize))
  if (currentPage.value > totalPages.value) {
    currentPage.value = totalPages.value
  }

  const startIndex = (currentPage.value - 1) * pageSize
  rowData.value = filtered.slice(startIndex, startIndex + pageSize)
  selectedRows.value = []
  gridApi.value?.deselectAll()
}

const fetchRowData = async () => {
  isLoading.value = true
  try {
    const query: AlarmLogListQuery = {
      pageNumber: currentPage.value,
      pageSize,
      startTime: filters.value.startTime,
      endTime: filters.value.endTime,
      severity: filters.value.severity,
      status: filters.value.status,
      source: filters.value.source,
      keyword: filters.value.keyword.trim(),
    }

    const response = await alarmLogsApi.list(query)
    const result = normalizeListResult(response)

    rowData.value = result.items
    totalPages.value = Math.max(result.totalPages || 1, 1)
    currentPage.value = Math.min(result.pageNumber || currentPage.value, totalPages.value)
    selectedRows.value = []
    gridApi.value?.deselectAll()
    isUsingMockData.value = false
  } catch {
    applyMockData()
    if (!isUsingMockData.value) {
      notify({ message: t('alarmLogs.messages.mockFallback'), color: 'warning' })
    }
    isUsingMockData.value = true
  } finally {
    isLoading.value = false
  }
}

const createListQuery = (pageNumber: number, size = pageSize): AlarmLogListQuery => ({
  pageNumber,
  pageSize: size,
  startTime: filters.value.startTime,
  endTime: filters.value.endTime,
  severity: filters.value.severity,
  status: filters.value.status,
  source: filters.value.source,
  keyword: filters.value.keyword.trim(),
})

const onGridReady = (params: GridReadyEvent) => {
  gridApi.value = params.api
}

const onSelectionChanged = (event: SelectionChangedEvent) => {
  selectedRows.value = event.api.getSelectedRows() as AlarmLogItem[]
}

const openDetail = (record?: AlarmLogItem | null) => {
  const target = record || selectedRecord.value
  if (!target) {
    notify({ message: t('alarmLogs.messages.selectRecord'), color: 'warning' })
    return
  }

  detailRecord.value = target
  detailModalOpen.value = true
}

const onRowDoubleClicked = (event: RowDoubleClickedEvent) => {
  openDetail(event.data as AlarmLogItem)
}

const refreshData = async () => {
  await fetchRowData()
  notify({ message: t('alarmLogs.messages.refreshed'), color: 'success' })
}

const searchData = async () => {
  currentPage.value = 1
  await fetchRowData()
}

const resetFilters = async () => {
  filters.value = createDefaultFilters()
  currentPage.value = 1
  selectedRows.value = []
  await fetchRowData()
  notify({ message: t('alarmLogs.messages.resetSuccess'), color: 'success' })
}

const updateMockRecord = (id: string) => {
  const nowValue = new Date().toISOString()
  mockAlarmLogs.value = mockAlarmLogs.value.map((item) =>
    item.id === id
      ? {
          ...item,
          acknowledged: true,
          status: item.status === 'active' ? 'acknowledged' : item.status,
          acknowledgedBy: item.acknowledgedBy || '当前用户',
          acknowledgedAt: item.acknowledgedAt || nowValue,
        }
      : item,
  )
}

const acknowledgeSelected = async () => {
  if (!selectedRecord.value) {
    notify({ message: t('alarmLogs.messages.selectRecord'), color: 'warning' })
    return
  }

  if (selectedRecord.value.acknowledged) {
    notify({ message: t('alarmLogs.messages.alreadyAcknowledged'), color: 'warning' })
    return
  }

  try {
    if (isUsingMockData.value) {
      updateMockRecord(selectedRecord.value.id)
      await fetchRowData()
    } else {
      await alarmLogsApi.acknowledge(selectedRecord.value.id)
      await fetchRowData()
    }
    notify({ message: t('alarmLogs.messages.acknowledgeSuccess'), color: 'success' })
  } catch {
    notify({ message: t('alarmLogs.messages.acknowledgeFailed'), color: 'danger' })
  }
}

const mapExportRows = (items: AlarmLogItem[]) =>
  items.map((item) => ({
    [t('alarmLogs.table.occurredAt')]: formatDisplayTime(item.occurredAt),
    [t('alarmLogs.table.severity')]: getSeverityText(item.severity),
    [t('alarmLogs.table.source')]: getSourceText(item.source),
    [t('alarmLogs.table.targetCode')]: item.targetCode,
    [t('alarmLogs.table.targetName')]: item.targetName,
    [t('alarmLogs.table.alarmCode')]: item.alarmCode,
    [t('alarmLogs.table.title')]: item.title,
    [t('alarmLogs.table.content')]: item.content,
    [t('alarmLogs.table.status')]: getStatusText(item.status),
    [t('alarmLogs.table.acknowledgedBy')]: item.acknowledgedBy || '',
    [t('alarmLogs.table.acknowledgedAt')]: formatDisplayTime(item.acknowledgedAt),
    [t('alarmLogs.table.recoveredAt')]: formatDisplayTime(item.recoveredAt),
    [t('alarmLogs.table.duration')]: getDurationText(item),
  }))

const getAllRowsForExport = async () => {
  if (isUsingMockData.value) {
    return getFilteredMockData()
  }

  const firstResponse = await alarmLogsApi.list(createListQuery(1))
  const firstResult = normalizeListResult(firstResponse)
  const pageCount = Math.max(firstResult.totalPages || 1, 1)
  const allRows = [...firstResult.items]

  for (let page = 2; page <= pageCount; page += 1) {
    const response = await alarmLogsApi.list(createListQuery(page))
    const result = normalizeListResult(response)
    allRows.push(...result.items)
  }

  return allRows
}

const exportAllPages = async () => {
  if (isExporting.value) return

  isExporting.value = true
  try {
    const rows = await getAllRowsForExport()
    if (!rows.length) {
      notify({ message: t('alarmLogs.messages.noDataToExport'), color: 'warning' })
      return
    }

    const exportRows = mapExportRows(rows)
    const fileStamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')
    downloadAsCSV(exportRows, `alarm-logs-${fileStamp}.csv`)
    notify({ message: t('alarmLogs.messages.exportSuccess'), color: 'success' })
  } catch {
    notify({ message: t('alarmLogs.messages.exportFailed'), color: 'danger' })
  } finally {
    isExporting.value = false
  }
}

const onPaginationChange = async (page: number) => {
  if (isLoading.value || page < 1 || page > totalPages.value || page === currentPage.value) return
  currentPage.value = page
  await fetchRowData()
}

onMounted(async () => {
  await fetchRowData()
})
</script>

<template>
  <VaCard>
    <VaCardTitle>{{ t('alarmLogs.title') }}</VaCardTitle>
    <VaCardContent>
      <div v-if="isUsingMockData" class="mock-banner">
        {{ t('alarmLogs.messages.mockFallback') }}
      </div>

      <div class="filter-grid">
        <VaInput v-model="filters.startTime" type="datetime-local" :label="t('alarmLogs.filters.startTime')" />
        <VaInput v-model="filters.endTime" type="datetime-local" :label="t('alarmLogs.filters.endTime')" />
        <VaSelect
          v-model="filters.severity"
          :label="t('alarmLogs.filters.severity')"
          :options="severityOptions"
          text-by="text"
          value-by="value"
        />
        <VaSelect
          v-model="filters.status"
          :label="t('alarmLogs.filters.status')"
          :options="statusOptions"
          text-by="text"
          value-by="value"
        />
        <VaSelect
          v-model="filters.source"
          :label="t('alarmLogs.filters.source')"
          :options="sourceOptions"
          text-by="text"
          value-by="value"
        />
        <VaInput
          v-model="filters.keyword"
          :label="t('alarmLogs.filters.keyword')"
          :placeholder="t('alarmLogs.filters.keywordPlaceholder')"
          @keydown.enter="searchData"
        />
      </div>

      <div class="toolbar-row">
        <div class="toolbar-actions">
          <VaButton color="primary" :loading="isLoading" icon="search" @click="searchData">
            {{ t('alarmLogs.actions.search') }}
          </VaButton>
          <VaButton preset="secondary" icon="refresh" :loading="isLoading" @click="refreshData">
            {{ t('alarmLogs.actions.refresh') }}
          </VaButton>
          <VaButton preset="secondary" icon="clear_all" :disabled="isLoading" @click="resetFilters">
            {{ t('alarmLogs.actions.reset') }}
          </VaButton>
          <VaButton preset="secondary" icon="visibility" :disabled="!hasSelection" @click="openDetail()">
            {{ t('alarmLogs.actions.viewDetail') }}
          </VaButton>
          <VaButton color="warning" icon="task_alt" :disabled="!canAcknowledge" @click="acknowledgeSelected">
            {{ t('alarmLogs.actions.acknowledge') }}
          </VaButton>
          <VaButton color="success" icon="download" :loading="isExporting" :disabled="isLoading" @click="exportAllPages">
            {{ t('alarmLogs.actions.export') }}
          </VaButton>
        </div>

        <VaPagination
          :model-value="currentPage"
          class="justify-end alarm-pagination"
          style="height: 24px; min-height: 24px"
          :pages="totalPages"
          input
          @update:modelValue="onPaginationChange"
        />
      </div>

      <div class="table-container">
        <AgGridVue
          style="width: 100%; height: 100%"
          :column-defs="columnDefs"
          :default-col-def="defaultColDef"
          :row-data="rowData"
          :loading="isLoading"
          :row-selection="'single'"
          @gridReady="onGridReady"
          @selectionChanged="onSelectionChanged"
          @rowDoubleClicked="onRowDoubleClicked"
        ></AgGridVue>
      </div>
    </VaCardContent>
  </VaCard>

  <VaModal v-model="detailModalOpen" size="large" close-button hide-default-actions>
    <template #header>
      <h3 class="modal-title">{{ t('alarmLogs.detail.title') }}</h3>
    </template>

    <div v-if="detailRecord" class="detail-layout">
      <div class="detail-row">
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.alarmCode') }}</span>
          <span class="detail-value">{{ detailRecord.alarmCode }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.severity') }}</span>
          <span class="detail-value">{{ getSeverityText(detailRecord.severity) }}</span>
        </div>
      </div>

      <div class="detail-row">
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.source') }}</span>
          <span class="detail-value">{{ getSourceText(detailRecord.source) }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.status') }}</span>
          <span class="detail-value">{{ getStatusText(detailRecord.status) }}</span>
        </div>
      </div>

      <div class="detail-row">
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.targetCode') }}</span>
          <span class="detail-value">{{ detailRecord.targetCode }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.targetName') }}</span>
          <span class="detail-value">{{ detailRecord.targetName }}</span>
        </div>
      </div>

      <div class="detail-row">
        <div class="detail-item full-width">
          <span class="detail-label">{{ t('alarmLogs.detail.titleField') }}</span>
          <span class="detail-value">{{ detailRecord.title }}</span>
        </div>
      </div>

      <div class="detail-row">
        <div class="detail-item full-width">
          <span class="detail-label">{{ t('alarmLogs.detail.content') }}</span>
          <span class="detail-value multiline">{{ detailRecord.content }}</span>
        </div>
      </div>

      <div class="detail-row">
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.occurredAt') }}</span>
          <span class="detail-value">{{ formatDisplayTime(detailRecord.occurredAt) }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.duration') }}</span>
          <span class="detail-value">{{ getDurationText(detailRecord) }}</span>
        </div>
      </div>

      <div class="detail-row">
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.acknowledgedBy') }}</span>
          <span class="detail-value">{{ detailRecord.acknowledgedBy || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.acknowledgedAt') }}</span>
          <span class="detail-value">{{ formatDisplayTime(detailRecord.acknowledgedAt) || '-' }}</span>
        </div>
      </div>

      <div class="detail-row">
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.recoveredAt') }}</span>
          <span class="detail-value">{{ formatDisplayTime(detailRecord.recoveredAt) || '-' }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">{{ t('alarmLogs.detail.recoveryNote') }}</span>
          <span class="detail-value">{{ detailRecord.recoveryNote || '-' }}</span>
        </div>
      </div>
    </div>

    <template #footer>
      <VaButton preset="secondary" @click="detailModalOpen = false">{{ t('common.close') }}</VaButton>
    </template>
  </VaModal>
</template>

<style scoped lang="scss">
.mock-banner {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  background: rgba(255, 193, 7, 0.15);
  color: #8a6200;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.toolbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.toolbar-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.table-container {
  width: 100%;
  height: calc(100vh - 290px);
  min-height: 420px;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--va-text-primary);
}

.detail-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem 0;
}

.detail-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.detail-item {
  display: flex;
  gap: 0.5rem;
  min-width: 0;

  &.full-width {
    grid-column: 1 / -1;
  }
}

.detail-label {
  min-width: 84px;
  font-weight: 600;
  color: var(--va-text-secondary);
}

.detail-value {
  color: var(--va-text-primary);
  word-break: break-word;

  &.multiline {
    white-space: pre-wrap;
  }
}

:deep(.va-pagination) {
  height: 24px;
  min-height: 24px;
}

:deep(.va-pagination .va-button) {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
}

:deep(.alarm-pagination .va-input) {
  height: 24px;
  min-height: 24px;
  width: 80px !important;
  max-width: 80px !important;
}

:deep(.alarm-pagination .va-input__input) {
  height: 24px;
  min-height: 24px;
  padding: 0 4px;
  width: 80px !important;
  max-width: 80px !important;
}

:deep(.alarm-pagination .va-input-wrapper) {
  width: 80px !important;
  max-width: 80px !important;
}

:deep(.alarm-pagination input) {
  width: 80px !important;
  max-width: 80px !important;
}

@media (max-width: 960px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }

  .table-container {
    height: calc(100vh - 360px);
  }
}
</style>