<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

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

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

/**
 * importStore
 */
import { useCounterMixin } from "@/stores/mixin";

/**
 *  use
 */
const $q = useQuasar();
const { dialogRemove, messageError, showLoader, hideLoader, success } =
  useCounterMixin();

/**
 * ตัวแปร
 */
const tab = ref<string>("COMPLETE");
const tabItems = ref<ItemsTab[]>([
  { name: "COMPLETE", label: " รอประกาศผล" },
  { name: "KP7", label: "ประกาศผลแล้ว" },
]);

const page = ref<number>(1);
const pageSize = ref<number>(10);

function fetcDatahList() {
  showLoader();
  http
    .post(config.API.evaluationUser, {
      status: tab.value,
      page: page.value,
      pageSize: pageSize.value,
    })
    .then((res) => {})
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

watch(tab, () => {
  page.value = 1;
  pageSize.value = 10;
  fetcDatahList();
});

onMounted(() => {
  fetcDatahList();
});
</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">
        <TableResults :tab="tab" />
      </q-tab-panel>

      <q-tab-panel name="KP7">
        <TableResults :tab="tab" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
