<script setup>
import { inject, computed } from "vue";
import { postChgAck } from "@/apis/alert";
import { Button } from "ant-design-vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { dataSource, openModal, search, tableLoading } = inject("alert_table");

const columns = computed(() => [
  {
    key: "building_tag",
    title: t("alert.building_and_floor"),
  },
  {
    key: "uuid",
    title: t("alert.uuid"),
  },
  {
    key: "alarmClass",
    title: t("alert.alarmClass"),
  },
  {
    key: "full_name",
    title: t("alert.device_name"),
  },
  {
    key: "device_number",
    title: t("alert.device_number"),
  },
  {
    key: "timestamp_date",
    title: t("alert.date"),
  },
  {
    key: "timestamp_time",
    title: t("alert.time"),
  },
  {
    key: "msg",
    title: t("alert.error_msg"),
  },
  {
    key: "ackState",
    title: t("alert.ack_state"),
  },
  {
    key: "repairOrder",
    title: t("alert.repair_order_number"),
  },
]);

const chgAck = async (devUuid) => {
  const res = await postChgAck(devUuid);
  if (res.isSuccess) {
    search?.();
  }
};
</script>

<template>
  <Table :loading="tableLoading" :columns="columns" :dataSource="dataSource">
    <template #bodyCell="{ record, column, index }">
      <template v-if="column.key === 'ackState'">
        <template v-if="record.ackState === 'Unacked'">
          <button
            class="btn btn-sm btn-success text-white whitespace-nowrap mr-2"
            @click.stop.prevent="() => chgAck(record.uuid)"
          >
            {{ $t("alert.unacked") }}
          </button>
        </template>
        <template v-else>
          {{ record.ackedTime }}
        </template>
      </template>
      <template v-if="column.key === 'repairOrder'">
        <button
          class="btn btn-sm btn-success text-white whitespace-nowrap mr-2"
          @click.stop.prevent="() => openModal(record)"
        >
          <span v-if="record.formId">{{ record.formId }}</span>
          <span v-else>
            <font-awesome-icon :icon="['fas', 'plus']" />{{
              $t("alert.repair_order_number")
            }}
          </span>
        </button>
      </template>
    </template>
  </Table>
</template>

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