<script lang="ts" setup>
import { computed, ref } from "vue";

interface AlarmRecord {
  id: string;
  type: string;
  robot: string;
  photo: string;
  video: string;
  status: "待研判" | "待处理" | "处置完成" | "误判";
  time: string;
}

const alarms: AlarmRecord[] = [
  {
    id: "AL-001",
    type: "线缆破损",
    robot: "巡检机器人 R1",
    photo: "破损抓拍_001.jpg",
    video: "线缆破损_001.mp4",
    status: "待研判",
    time: "2026-06-23 10:24:18",
  },
  {
    id: "AL-002",
    type: "局部高温",
    robot: "巡检机器人 Q1",
    photo: "高温抓拍_017.jpg",
    video: "局部高温_017.mp4",
    status: "待处理",
    time: "2026-06-23 10:18:42",
  },
  {
    id: "AL-003",
    type: "墙体裂缝",
    robot: "巡检机器人 N3",
    photo: "裂缝取证_006.jpg",
    video: "墙体裂缝_006.mp4",
    status: "处置完成",
    time: "2026-06-23 09:56:11",
  },
  {
    id: "AL-004",
    type: "水渍渗漏",
    robot: "巡检机器人 R2",
    photo: "渗漏抓拍_012.jpg",
    video: "水渍渗漏_012.mp4",
    status: "误判",
    time: "2026-06-23 09:20:36",
  },
  {
    id: "AL-005",
    type: "应急门开启异常",
    robot: "巡检机器人 N1",
    photo: "门禁取证_031.jpg",
    video: "门禁异常_031.mp4",
    status: "待处理",
    time: "2026-06-23 08:42:57",
  },
];

const keyword = ref("");
const pageSize = 4;
const currentPage = ref(1);

const filteredAlarms = computed(() => {
  const search = keyword.value.trim().toLowerCase();

  if (!search) {
    return alarms;
  }

  return alarms.filter((alarm) =>
    [alarm.id, alarm.type, alarm.robot, alarm.status]
      .join(" ")
      .toLowerCase()
      .includes(search),
  );
});

const totalPages = computed(() =>
  Math.max(1, Math.ceil(filteredAlarms.value.length / pageSize)),
);

const pagedAlarms = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return filteredAlarms.value.slice(start, start + pageSize);
});

const visiblePages = computed(() => {
  const pages: number[] = [];
  const start = Math.max(1, currentPage.value - 2);
  const end = Math.min(totalPages.value, start + 4);

  for (let page = start; page <= end; page += 1) {
    pages.push(page);
  }

  return pages;
});

function getAlarmStatusClass(status: AlarmRecord["status"]) {
  const classMap = {
    待研判: "alarm-status-pending",
    待处理: "alarm-status-handling",
    处置完成: "alarm-status-finished",
    误判: "alarm-status-false",
  };

  return classMap[status];
}

function setPage(page: number) {
  currentPage.value = page;
}

function handleSearch() {
  currentPage.value = 1;
}
</script>

<template>
  <div class="page-shell alarm-page">
    <div class="page-grid management-layout">
      <section class="page-card management-table-card">
        <div class="management-toolbar">
          <div class="toolbar-left">
            <button class="page-action-btn primary" type="button">批量通知</button>
            <button class="page-action-btn ghost" type="button">导出告警</button>
            <input
              v-model="keyword"
              class="toolbar-input"
              placeholder="搜索告警编号 / 告警类型 / 报警机器人"
              type="text"
              @input="handleSearch"
            />
          </div>
          <div class="toolbar-right">共 {{ filteredAlarms.length }} 条告警记录</div>
        </div>

        <div class="table-shell">
          <table class="device-table alarm-device-table">
            <thead>
              <tr>
                <th>告警编号</th>
                <th>告警类型</th>
                <th>报警机器人</th>
                <th>取证照片</th>
                <th>取证视频</th>
                <th>案件状态</th>
                <th>告警时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="alarm in pagedAlarms" :key="alarm.id">
                <td>{{ alarm.id }}</td>
                <td>{{ alarm.type }}</td>
                <td>{{ alarm.robot }}</td>
                <td>
                  <div class="evidence-chip photo">{{ alarm.photo }}</div>
                </td>
                <td>
                  <div class="evidence-chip video">{{ alarm.video }}</div>
                </td>
                <td>
                  <span :class="['table-status', getAlarmStatusClass(alarm.status)]">
                    {{ alarm.status }}
                  </span>
                </td>
                <td>{{ alarm.time }}</td>
                <td>
                  <div class="table-actions">
                    <button type="button">研判</button>
                    <button type="button">通知</button>
                    <button class="danger" type="button">删除</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="pagination-bar">
          <button
            class="pagination-btn"
            :disabled="currentPage === 1"
            type="button"
            @click="setPage(currentPage - 1)"
          >
            上一页
          </button>
          <button
            v-for="page in visiblePages"
            :key="page"
            :class="['pagination-btn', { active: currentPage === page }]"
            type="button"
            @click="setPage(page)"
          >
            {{ page }}
          </button>
          <button
            class="pagination-btn"
            :disabled="currentPage === totalPages"
            type="button"
            @click="setPage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </section>
    </div>
  </div>
</template>
