import { defineStore } from "pinia";
import { ref, computed, reactive, watch } from "vue";

export const useDataStore = defineStore("resign", () => {
  const mainTabs = ref<string>("1");
  const mainTabsEMP = ref<string>("1");
  const baseOptionStatus = ref<any[]>([
    {
      name: "รอดำเนินการ",
      value: "WAITTING",
      group: "1",
    },
    {
      name: "รอออกคำสั่ง",
      value: "APPROVE",
      group: "1",
    },
    {
      name: "ส่งรายชื่อไปออกคำสั่ง",
      value: "REPORT",
      group: "1",
    },
    {
      name: "ออกคำสั่งเสร็จแล้ว",
      value: "DONE",
      group: "1",
    },

    {
      name: "ยกเลิกลาออก",
      value: "CANCEL",
      group: "1",
    },
    {
      name: "รอดำเนินการ",
      value: "WAITTING",
      group: "2",
    },
    {
      name: "รอออกคำสั่ง",
      value: "APPROVE",
      group: "2",
    },
    {
      name: "ส่งไปออกคำสั่ง",
      value: "REPORT",
      group: "2",
    },
    {
      name: "ออกคำสั่งสำเร็จ",
      value: "DONE",
      group: "2",
    },
  ]);

  const formQurey = reactive({
    status: "WAITTING",
    page: 1,
    rowsPerPage: 10,
  });
  const optionStatus = computed(() => {
    return baseOptionStatus.value.filter(
      (option) => option.group === mainTabs.value
    );
  });
  const optionStatusEMP = computed(() => {
    return baseOptionStatus.value.filter(
      (option) => option.group === mainTabsEMP.value
    );
  });

  watch(mainTabs, (val) => {
    formQurey.status = "WAITTING";
  });
  watch(mainTabsEMP, (val) => {
    formQurey.status = "WAITTING";
  });

  return { mainTabs, mainTabsEMP, formQurey, optionStatus, optionStatusEMP };
});