<script setup>
import { inject, computed } from "vue";
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: "id",
    title: t("alert.uuid"),
  },
  {
    key: "factor",
    title: t("alert.alarmClass"),
  },
  {
    key: "device_number",
    title: t("alert.device_name"),
  },
  {
    key: "points",
    title: t("alert.device_point_name"),
  },
  {
    key: "created_at",
    title: t("alert.time"),
  },
  {
    key: "reason",
    title: t("alert.error_msg"),
  },
  {
    key: "repairOrder",
    title: t("alert.repair_order_number"),
  },
]);
</script>

<template>
  <Table :loading="tableLoading" :columns="columns" :dataSource="dataSource">
    <template #bodyCell="{ record, column, index }">
      <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>
