<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 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";
/**
 * importStore
 */
import { useCounterMixin } from "@/stores/mixin";
import { useKpiDataStore } from "@/modules/14_KPI/store";

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

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

/**
 * function fetch รายการประกาศผล
 */
function fetcDataList() {
  showLoader();
  http
    .post(config.API.evaluationUser, {
      status: tab.value,
      page: page.value,
      pageSize: pageSize.value,
      keyword: keyword.value,
      kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
    })
    .then((res) => {
      const data = res.data.result.data;
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        dataList.value.push({
          ...element,
          root: "สำนักงานเขตพระนคร",
          rootId: "e8493cd1-d371-402e-add6-566e68d5d1b3",
          rootShortName: "ขพน.",
          position: "นักวิเคราะห์นโยบายและแผน",
          posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
          posTypeName: "วิชาการ",
          posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08562",
          posLevelName: "ปฏิบัติการ",
          organization: "ฝ่ายทะเบียน สำนักงานเขตพระนคร",
        });
      }
      // dataList.value = data.data;

      total.value = data.total;
      maxPage.value = Math.ceil(total.value / pageSize.value);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ทำงานเมื่อมีการเปลี่ยน Tab
 */
watch(tab, (t) => {
  page.value = 1;
  keyword.value = "";
  t == "KP7" || t == "COMPLETE" ? fetcDataList() : "";
});

/**
 * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
 */
watch(pageSize, () => {
  fetcDataList();
});

/**
 * HooK
 */
onMounted(() => {
  fetcDataList();
});
</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:page="page"
          v-model:pageSize="pageSize"
          v-model:maxPage="maxPage"
          v-model:total="total"
          v-model:keyword="keyword"
          :fetchData="fetcDataList"
        />
      </q-tab-panel>

      <q-tab-panel name="KP7" style="padding: 0px">
        <TableResults
          :tab="tab"
          :row="dataList"
          v-model:page="page"
          v-model:pageSize="pageSize"
          v-model:maxPage="maxPage"
          v-model:total="total"
          v-model:keyword="keyword"
          :fetchData="fetcDataList"
        />
      </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>
