<script setup>
import { ref, onMounted, defineProps, inject, watch } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const props = defineProps({
  onCancel: Function,
  modalData: Object,
});
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const detailData = ref([]);
onMounted(() => {
  setItems([
    {
      title: t("alert.online"),
      key: "online",
      active: true,
    },
    {
      title: t("alert.offline"),
      key: "offline",
      active: false,
    },
    {
      title: t("alert.alarm"),
      key: "alarm",
      active: false,
    },
  ]);
});

watch(selectedBtn, (newVal, oldVal) => {
  if (newVal) {
    detailData.value = props.modalData[newVal.key];
  }
});

watch(
  () => props.modalData,
  (newVal, oldVal) => {
    if (newVal) {
      changeActiveBtn(items.value[0]);
    }
  },
  { immediate: true }
);
</script>

<template>
  <Modal id="system_status_modal" :onCancel="onCancel" :width="600">
    <template #modalTitle>
      <div class="flex items-center justify-between">
        <ButtonGroup
          :items="items"
          :withLine="true"
          className="btn-sm"
          :onclick="
            (e, item) => {
              changeActiveBtn(item);
            }
          "
        />
        <button
          type="link"
          class="btn-link btn-text-without-border px-2"
          @click="onCancel"
        >
          <font-awesome-icon :icon="['fas', 'times']" class="text-[#a5abb1]" />
        </button>
      </div>
    </template>
    <template #modalContent>
      <div class="overflow-x-auto">
        <table class="table text-base mt-5">
          <thead>
            <tr>
              <th
                class="text-base border text-white text-center bg-cyan-600 bg-opacity-30"
              >
                {{ $t("table.serial_number") }}
              </th>
              <th
                class="text-base border text-white text-center bg-cyan-600 bg-opacity-30"
              >
                {{ $t("history.building_name") }}
              </th>
              <th
                class="text-base border text-white text-center bg-cyan-600 bg-opacity-30"
              >
                {{ $t("table.name") }}
              </th>
              <th
                class="text-base border text-white text-center bg-cyan-600 bg-opacity-30"
              >
                {{ $t("operation.updated_time") }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-if="detailData?.length > 0"
              v-for="(equipment, index) in detailData"
              :key="index"
              class="hover:bg-gray-700"
            >
              <td class="border text-white text-center">
                {{ index + 1 }}
              </td>
              <td class="border text-white text-center">
                {{ equipment.building_name }}
              </td>
              <td class="border text-white text-center">
                {{ equipment.name }}
              </td>
              <td class="border text-white text-center">
                {{ equipment.time || "-" }}
              </td>
            </tr>
            <tr v-else>
              <td colspan="4" class="border text-white text-center">
                {{ $t("table.no_data") }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
  </Modal>
</template>

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