<script setup>
import { ref, inject, onMounted } from "vue";
import { deleteAlarmSchedule } from "@/apis/alert";
import AlertTimeTableAddModal from "./AlertTimeTableAddModal.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const tableData = ref([]);
const editRecord = ref(null);
const { timesList,timesListData } = inject("notify_table");
const weekDate = ref({
  1: t("alert.sunday"),
  2: t("alert.monday"),
  3: t("alert.tuesday"),
  4: t("alert.wednesday"),
  5: t("alert.thursday"),
  6: t("alert.friday"),
  7: t("alert.saturday"),
});

onMounted(() => {
  timesListData();
});

const columns = [
  {
    title: t("alert.schedule_name"),
    key: "schedule_name",
  },
  {
    title: t("alert.schedule_content"),
    key: "schedule_content",
  },
  {
    title: t("alert.operation"),
    key: "operation",
    width: 200,
  },
];

const openModal = (record) => {
  if (record) {
    editRecord.value = record;
  } else {
    editRecord.value = null;
  }
  outliers_time_item.showModal();
};

const onCancel = () => {
  editRecord.value = null;
  outliers_time_item.close();
};

const remove = async (id) => {
  openToast("warning", t("msg.sure_to_delete"), "body", async () => {
    await cancelToastOpen();
    const res = await deleteAlarmSchedule(id);
    if (res.isSuccess) {
      timesListData();
      openToast("success", t("msg.delete_success"));
    } else {
      openToast("error", res.msg);
    }
  });
};
</script>

<template>
  <div class="flex justify-start items-center mt-10">
    <h3 class="text-xl mr-5">{{$t("alert.warning_time")}}</h3>
    <AlertTimeTableAddModal :openModal="openModal" :onCancel="onCancel" :editRecord="editRecord" :weekDate="weekDate" />
  </div>
  <Table :columns="columns" :dataSource="timesList" class="w-3/4 mt-3">
    <template #bodyCell="{ record, column, index }">
      <template v-if="column.key === 'schedule_content'">
        <ul class="text-left">
          <li v-for="(item, index) in record.schedule_array" :key="index">
            <strong v-if="item.time.length">
              <span>{{ weekDate[item.day] }}: </span>
              <span v-for="(time, timeIndex) in item.time" :key="timeIndex">
                {{ time }}
                <span v-if="timeIndex < item.time.length - 1">, </span>
              </span>
            </strong>
          </li>
        </ul>
      </template>
      <template v-else-if="column.key === 'operation'">
        <button
          class="btn btn-sm btn-success text-white mr-2"
          @click.stop.prevent="() => openModal(record)"
        >
          {{$("button.edit")}}
        </button>
        <button
          class="btn btn-sm btn-error text-white"
          @click.stop.prevent="() => remove(record.id)"
        >
        {{$("button.delete")}}
        </button>
      </template>
      <template v-else>
        <pre>{{ record[column.key] }}</pre>
      </template>
    </template>
  </Table>
</template>

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