<script setup>
import dayjs from "dayjs";
import { ref, computed, inject } from "vue";
const alerts = inject("app_alerts");
const alarms = computed(() =>
  (alerts.value || []).slice(0, 5).map((d) => ({
    ...d,
    timestamp_date: dayjs(d.created_at).format("YYYY.MM.DD"),
    timestamp_time: dayjs(d.created_at).format("HH:mm:ss"),
  })).sort((a, b) => (dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? 1 : -1))
);
</script>

<template>
  <div class="flex items-center justify-between mb-3">
    <h3 class="text-info font-bold text-xl text-center">告警訊息</h3>
  </div>
  <div className="h-72 overflow-x-auto">
    <table class="table table-sm table-pin-rows">
      <thead>
        <tr class="">
          <th>日期</th>
          <th>時間</th>
          <th>設備名稱</th>
          <th>異常原因</th>
        </tr>
      </thead>
      <tbody class="text-base">
        <tr v-if="alarms.length === 0">
          <td colspan="4" class="text-center h-40">
            <div class="text-gray-400">目前無告警訊息</div>
          </td>
        </tr>
        <tr v-else v-for="alarm in alarms" :key="alarm.alarm_guid">
          <td>{{ alarm.timestamp_date }}</td>
          <td>{{ alarm.timestamp_time }}</td>
          <td>{{ alarm.device_number }}</td>
          <td>{{ alarm.reason }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style lang="scss" scoped></style>
