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

const columns = [
  {
    key: "building_tag",
    title: "棟別-樓層",
  },
  {
    key: "uuid",
    title: "異常ID",
  },
  {
    key: "alarmClass",
    title: "異常類別",
  },
  {
    key: "full_name",
    title: "維修項目",
  },
  {
    key: "device_number",
    title: "設備編號",
  },
  {
    key: "timestamp_date",
    title: "發生日期",
  },
  {
    key: "timestamp_time",
    title: "發生時間",
  },
  {
    key: "msg",
    title: "異常原因",
  },
  {
    key: "ackState",
    title: "Ack 確認",
  },
  {
    key: "repairOrder",
    title: "派工 / 維運單號",
  },
];

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)">
            未確認
          </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']" />維修單
          </span>
        </button>
      </template>
    </template>
  </Table>
</template>

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