<script setup>
import { onMounted } from "vue";
import useAlarmStore from "@/stores/useAlarmStore";
import { ackSingleAlarm } from "@/apis/building";

const store = useAlarmStore();

onMounted(() => {
  store.getAlarmDataFromBaja();
});

const ackedAlarm = async (uuid) => {
  const res = await ackSingleAlarm(uuid);
  console.log("ackedAlarm", res);
};
</script>

<template>
  <div>
    <ul class="py-6 pr-4 min-h-full text-base-content">
      <!-- Sidebar content here -->
      <li class="my-3" v-for="alarm in store.alarmData" :key="alarm.uuid">
        <div
          class="w-full shadow-xl border border-success bg-body bg-opacity-80"
        >
          <div class="p-5">
            <p class="text-base flex justify-between">
              <span>
                <font-awesome-icon
                  :icon="['fas', 'exclamation-triangle']"
                  class="text-warning mr-2"
                />
                <span>{{ $t("alarm.notify") }}</span></span
              >
              <small>
                <span class="mr-4"
                  >{{ alarm.timestamp_date }} {{ alarm.timestamp_time }}</span
                >
                <font-awesome-icon
                  :icon="['fas', 'times']"
                  size="lg"
                  class="text-white"
                />
              </small>
            </p>
            <div class="divider my-2"></div>
            <div>
              <p>{{ $t("alarm.number") }}：{{ alarm.uuid }}</p>
              <!-- <p>異常等級：255</p> -->
              <p>{{ $t("alarm.category") }}：{{ alarm.alarmClass }}</p>
              <p>{{ $t("alarm.device_name") }}：{{ alarm.full_name }}</p>
              <p>{{ $t("alarm.message") }}：{{ alarm.msg }}</p>
            </div>
            <div class="card-actions mt-1 justify-end">
              <button
                class="btn btn-sm btn-success"
                @click="() => ackedAlarm(alarm.uuid)"
              >
                {{ $t("alarm.confirm") }}
              </button>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.card::before {
  @apply absolute h-5 w-5 top-1 left-1  bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background01.svg')] bg-center;
  content: "";
}

.card::after {
  @apply absolute bottom-1 right-1 h-5 w-5  bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background05.svg')] bg-center;
  content: "";
}
</style>
