<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

/**importType*/
import type { QuerySting } from "@/modules/09_leave/interface/request/leave";

import TableList from "@/modules/09_leave/components/05_Leave/TableList.vue";
import ToolBar from "@/modules/09_leave/components/05_Leave/ToolBarLeave.vue";
import CalendarView from "@/modules/09_leave/components/05_Leave/Calendar.vue";

const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const leaveStore = useLeavelistDataStore();

const { showLoader, hideLoader, messageError } = mixin;

const total = ref<number>(0);
const totalList = ref<number>(1);

const querySting = ref<QuerySting>({
  year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
  type: leaveStore.filter.type, //*Id ประเภทการลา
  status: leaveStore.filter.status, //*สถานะการของลา
  page: 1, //*สถานะการของลา
  rowsPerPage: 10,
  keyword: leaveStore.filter.keyword, //keyword ค้นหา
  profileType: "ALL", //profileType
});

//** เรียกข้อมูลจาก API*/
async function fecthLeaveList() {
  leaveStore.rows = [];
  querySting.value.keyword = querySting.value.keyword.trim();
  querySting.value.status = await (querySting.value.status == null
    ? "ALL"
    : querySting.value.status);
  querySting.value.type = await (querySting.value.type == null
    ? "00000000-0000-0000-0000-000000000000"
    : querySting.value.type);

  if (querySting.value.status != null && querySting.value.type != null) {
    // เอาฟิลrowsPerPage ออก
    const { rowsPerPage, ...queryStingData } = querySting.value;
    showLoader();
    await http
      .post(config.API.leaveList(), {
        ...queryStingData,
        pageSize: querySting.value.rowsPerPage,
      })
      .then(async (res) => {
        const data = await res.data.result;
        totalList.value = Math.ceil(
          res.data.result.total / querySting.value.rowsPerPage
        );
        total.value = res.data.result.total;
        await leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/** function เรียกข้อมูลสถานะ*/
async function fetchOption() {
  if (leaveStore.dataToobar.length == 0) {
    leaveStore.leaveTypeList();
    // await http
    //   .get(config.API.leaveType())
    //   .then((res) => {
    //     leaveStore.leaveTypeOption(res.data.result);
    //   })
    //   .catch((err) => {
    //     messageError($q, err);
    //   });
  }
}

function getSearch() {
  querySting.value.page = 1;
  fecthLeaveList();
}

watch(
  () => querySting.value.rowsPerPage,
  async () => {
    getSearch();
  }
);

watch(
  () => leaveStore.tabView,
  async () => {
    leaveStore.tabView === "list" &&
      (await Promise.all([fetchOption(), fecthLeaveList()]));
  }
);

onMounted(async () => {
  await Promise.all([fetchOption(), fecthLeaveList()]);
});
</script>
<template>
  <q-toolbar class="text-primary" style="padding: 0">
    <q-space />
    <q-btn
      name="list"
      round
      size="12px"
      flat
      icon="mdi-format-list-bulleted"
      @click="leaveStore.tabView = 'list'"
      :color="leaveStore.tabView == 'list' ? 'primary' : 'grey-6'"
      class="q-ml-sm"
    >
      <q-tooltip>รายการ</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <q-tabs
      v-model="leaveStore.tabView"
      indicator-color="transparent"
      align="left"
      active-color="activetab"
      class="text-nativetab"
      inline-label
      dense
    >
      <q-btn
        name="calendar"
        round
        size="12px"
        flat
        icon="mdi-calendar-month"
        @click="leaveStore.tabView = 'calendar'"
        :color="leaveStore.tabView == 'calendar' ? 'primary' : 'grey-6'"
        class="q-mr-sm"
      >
        <q-tooltip>ปฏิทิน</q-tooltip>
      </q-btn>
    </q-tabs>
  </q-toolbar>
  <div v-if="leaveStore.tabView === 'list'">
    <ToolBar
      :dataToobar="leaveStore.dataToobar"
      v-model:query-sting="querySting"
      :get-list="fecthLeaveList"
      :get-search="getSearch"
    />
    <TableList
      v-model:total="total"
      v-model:total-list="totalList"
      v-model:pagination="querySting"
      :dataToobar="leaveStore.dataToobar"
      :getList="fecthLeaveList"
    />
  </div>
  <div v-if="leaveStore.tabView === 'calendar'"><CalendarView /></div>
</template>

<style scoped></style>
