<script setup>
import { inject, defineProps, watch, ref, provide } from "vue";

const props = defineProps({
  openModal: Function,
  onCancel: Function,
});

const closeModal = () => {
  props.onCancel();
};

const columns = [
  {
    title: "排程名稱",
    key: "schedule_name",
  },
  {
    title: "時段",
    key: "schedule_time",
  },
  {
    title: "狀態",
    key: "enable",
  },
  {
    title: "功能",
    key: "operation",
    width: 150,
  },
];
</script>

<template>
  <Modal
    id="outliers_time_item"
    :open="open"
    :onCancel="closeModal"
    width="800"
  >
    <template #modalTitle>
      <p>警示時間設定</p>
      <button class="fixed right-10 top-5" @click.prevent="closeModal">
        <font-awesome-icon
          :icon="['fas', 'times']"
          size="1x"
          class="text-[#a5abb1]"
        />
      </button>
    </template>
    <template #modalContent>
      <Table
        :columns="columns"
        :dataSource="tableData"
        class="mt-3"
        :withStyle="false"
      >
        <template #bodyCell="{ record, column, index }">
          <template v-if="column.key === 'operation'">
            <button
              class="btn btn-sm btn-success text-white mr-2"
              @click.stop.prevent="() => openModal(record)"
            >
              修改
            </button>
            <button
              class="btn btn-sm btn-error text-white"
              @click.stop.prevent="() => remove(record.userinfo_guid)"
            >
              刪除
            </button>
          </template>
          <template v-else>
            {{ record[column.key] }}
          </template>
        </template>
      </Table>
    </template>
  </Modal>
</template>

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