<script setup>
import useAlarmStore from "@/stores/useAlarmStore";
import dayjs from "dayjs";
import { computed } from "vue";

const store = useAlarmStore();
const alarms = computed(() =>
  store.alarmData.slice(0, 5).map((d) => ({
    ...d,
    timestamp_date: dayjs(d.timestamp_date).format("YYYY.MM.DD"),
    timestamp_time: d.timestamp_time.split(":").slice(0, 2).join(":"),
  }))
);
</script>

<template>
  <div class="overflow-x-auto">
    <h3 class="text-info font-bold text-xl text-center">異常資料 Top 5</h3>
    <table class="table">
      <thead>
        <tr class="border-b-2 border-info text-base">
          <th>日期</th>
          <th>時間</th>
          <th>設備名稱</th>
          <th>備註</th>
        </tr>
      </thead>
      <tbody class="text-base">
        <tr v-for="alarm in alarms" :key="alarm.uuid">
          <td>{{ alarm.timestamp_date }}</td>
          <td>{{ alarm.timestamp_time }}</td>
          <td>{{ alarm.full_name }}</td>
          <td>{{ alarm.msg }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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