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

import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/14_KPI/store";
import { usePagination } from "@/composables/usePagination";
import http from "@/plugins/http";
import config from "@/app.config";

/** import type*/
import type { ItemsTab } from "@/modules/14_KPI/interface/index/Main";
import type { ResResults } from "@/modules/14_KPI/interface/response/Main";

/** import components*/
import TableResults from "@/modules/14_KPI/components/results/tableResults.vue";
import TableIndividual from "@/modules/14_KPI/components/results/tableIndividual.vue";

/** use*/
const store = useKpiDataStore();
const $q = useQuasar();
const { messageError, showLoader, hideLoader } = useCounterMixin();
const { pagination, params, onRequest } = usePagination("", fetcDataList);

const tab = ref<string>("COMPLETE");
const tabItems = ref<ItemsTab[]>([
  { name: "COMPLETE", label: " รอประกาศผล" },
  { name: "KP7", label: "ประกาศผลแล้ว" },
  { name: "IDP", label: "แผนพัฒนาการปฏิบัติราชการรายบุคคล" },
]);
const dataList = ref<ResResults[]>([]); // ข่อมูลรายการ
const keyword = ref<string>("");
const result = ref<string>("");

/** function fetch รายการประกาศผล*/
async function fetcDataList() {
  showLoader();
  await http
    .post(config.API.evaluationUser, {
      status: tab.value,
      ...params.value,
      keyword: keyword.value.trim(),
      kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
      results: result.value === "" ? undefined : result.value,
    })
    .then(async (res) => {
      const result = await res.data.result;
      pagination.value.rowsNumber = result.total;
      dataList.value = result.data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ทำงานเมื่อมีการเปลี่ยน Tab */
watch(tab, () => {
  pagination.value.page = 1;
  result.value = "";
  keyword.value = "";
  dataList.value = [];
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">ประกาศผล</div>

  <q-card flast bordered>
    <q-tabs
      v-model="tab"
      dense
      align="left"
      inline-label
      class="bg-white text-grey"
      active-color="primary"
      indicator-color="primary"
    >
      <div v-for="item in tabItems">
        <q-tab :name="item.name" :label="item.label" />
      </div>
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
      <q-tab-panel name="COMPLETE" style="padding: 0px">
        <TableResults
          :tab="tab"
          :row="dataList"
          v-model:keyword="keyword"
          v-model:result="result"
          v-model:pagination="pagination"
          :fetchData="fetcDataList"
          :onRequest="onRequest"
        />
      </q-tab-panel>

      <q-tab-panel name="KP7" style="padding: 0px">
        <TableResults
          :tab="tab"
          :row="dataList"
          v-model:keyword="keyword"
          v-model:result="result"
          v-model:pagination="pagination"
          :fetchData="fetcDataList"
          :onRequest="onRequest"
        />
      </q-tab-panel>
      <q-tab-panel name="IDP" style="padding: 0px">
        <TableIndividual :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
