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

const props = defineProps({
  alarms: {
    type: Array,
    required: true,
  },
});

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 alarms" :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>異常通知</span></span
              >
              <small>
                <span class="mr-4"
                  >{{ alarm.timestamp_date }} {{ alarm.timestamp_time }}</span
                >
              </small>
            </p>
            <div class="divider my-2"></div>
            <div>
              <p>異常編號：{{ alarm.uuid }}</p>
              <!-- <p>異常等級：255</p> -->
              <p>異常類別：{{ alarm.alarmClass }}</p>
              <p>設備名稱：{{ alarm.full_name }}</p>
              <p>異常訊息：{{ alarm.msg }}</p>
            </div>
            <div class="card-actions mt-1 justify-end">
              <button
                class="btn btn-sm btn-success"
                @click="() => ackedAlarm(alarm.uuid)"
              >
                確認
              </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>
