<script setup>
import useAlarmStore from "@/stores/useAlarmStore";
import dayjs from "dayjs";
import { ref,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(":"),
//   }))
// );

const alarms = ref([
  {
    uuid: 1,
    timestamp_date: "2020-01-02",
    timestamp_time: "11:02",
    msg: "xx異常",
    status: "處理中",
  },
  {
    uuid: 2,
    timestamp_date: "2020-01-03",
    timestamp_time: "12:02",
    msg: "xx異常",
    status: "已處理",
  },
  {
    uuid: 3,
    timestamp_date: "2020-01-04",
    timestamp_time: "13:02",
    msg: "xx異常",
    status: "已處理",
  },
  {
    uuid: 4,
    timestamp_date: "2020-01-05",
    timestamp_time: "14:02",
    msg: "xx異常",
    status: "處理中",
  },
]);
</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>
          <td colspan="4" class="text-center h-40">
            <!-- <span>無資料</span> -->
          </td>
        </tr>
       
      </tbody>
    </table>
  </div>
</template>

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