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

interface PatrolAlarmRecord {
  id: string;
  type: string;
  reportTime: string;
}

interface PatrolRecord {
  id: string;
  robot: string;
  startTime: string;
  endTime: string;
  mileage: string;
  alarms: PatrolAlarmRecord[];
}

const patrolRecords: PatrolRecord[] = [
  {
    id: "PR-20260623-001",
    robot: "巡检机器人 R1",
    startTime: "2026-06-23 08:10:22",
    endTime: "2026-06-23 09:02:15",
    mileage: "3.8 km",
    alarms: [
      { id: "AL-001", type: "线缆破损", reportTime: "2026-06-23 08:36:12" },
      { id: "AL-002", type: "局部高温", reportTime: "2026-06-23 08:42:09" },
    ],
  },
  {
    id: "PR-20260623-002",
    robot: "巡检机器人 Q1",
    startTime: "2026-06-23 09:20:08",
    endTime: "2026-06-23 10:01:46",
    mileage: "2.9 km",
    alarms: [
      { id: "AL-005", type: "应急门开启异常", reportTime: "2026-06-23 09:48:57" },
    ],
  },
  {
    id: "PR-20260623-003",
    robot: "巡检机器人 N3",
    startTime: "2026-06-23 10:08:34",
    endTime: "2026-06-23 11:12:25",
    mileage: "4.6 km",
    alarms: [
      { id: "AL-003", type: "墙体裂缝", reportTime: "2026-06-23 10:36:41" },
      { id: "AL-006", type: "水渍渗漏", reportTime: "2026-06-23 10:54:18" },
      { id: "AL-007", type: "局部高温", reportTime: "2026-06-23 11:02:33" },
    ],
  },
  {
    id: "PR-20260623-004",
    robot: "巡检机器人 R2",
    startTime: "2026-06-23 13:15:17",
    endTime: "2026-06-23 14:05:52",
    mileage: "3.2 km",
    alarms: [],
  },
];

const dialogVisible = ref(false);
const activePatrolRecord = ref<PatrolRecord | null>(null);

function openAlarmDialog(record: PatrolRecord) {
  activePatrolRecord.value = record;
  dialogVisible.value = true;
}

function closeDialog() {
  dialogVisible.value = false;
  activePatrolRecord.value = null;
}
</script>

<template>
  <div class="page-shell plan-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>
          </div>
          <div class="toolbar-right">共 {{ patrolRecords.length }} 条巡检记录</div>
        </div>

        <div class="table-shell">
          <table class="device-table patrol-record-table">
            <thead>
              <tr>
                <th>巡检记录号</th>
                <th>巡检机器人</th>
                <th>开始巡检时间</th>
                <th>结束巡检时间</th>
                <th>巡检里程</th>
                <th>告警触发次数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="record in patrolRecords" :key="record.id">
                <td>{{ record.id }}</td>
                <td>{{ record.robot }}</td>
                <td>{{ record.startTime }}</td>
                <td>{{ record.endTime }}</td>
                <td>{{ record.mileage }}</td>
                <td>
                  <button
                    class="alarm-link-btn"
                    type="button"
                    @click="openAlarmDialog(record)"
                  >
                    {{ record.alarms.length }} 次
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>

    <div v-if="dialogVisible" class="crud-dialog-mask" @click.self="closeDialog">
      <div class="crud-dialog patrol-alarm-dialog">
        <div class="crud-dialog-header">
          <div class="crud-dialog-title">关联告警列表</div>
          <button class="dialog-close" type="button" @click="closeDialog">×</button>
        </div>

        <div class="patrol-dialog-meta">
          {{ activePatrolRecord?.id }} / {{ activePatrolRecord?.robot }}
        </div>

        <div class="table-shell patrol-dialog-table-shell">
          <table class="device-table">
            <thead>
              <tr>
                <th>告警编号</th>
                <th>告警类型</th>
                <th>上报时间</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="alarm in activePatrolRecord?.alarms ?? []"
                :key="alarm.id"
              >
                <td>{{ alarm.id }}</td>
                <td>{{ alarm.type }}</td>
                <td>{{ alarm.reportTime }}</td>
              </tr>
              <tr v-if="!(activePatrolRecord?.alarms.length)">
                <td class="table-empty" colspan="3">本次巡检未触发告警</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
