<script setup lang="ts">
import { onMounted, ref, computed, nextTick } from "vue";
import { useQuasar } from "quasar";
import config from "@/app.config";
import http from "@/plugins/http";
import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
/** importType*/
import type {
  DataOption,
  DataOptionShort,
} from "@/modules/13_salary/interface/index/Main";
import type {
  DataRound,
  DataAgency,
  DataPeriodLatest,
} from "@/modules/13_salary/interface/response/SalaryList";

/** importComponents*/
import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";

/** importStore*/
import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
import { useCounterMixin } from "@/stores/mixin";

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

/** ตัวแปร*/
const roundFilter = ref<any>();
const roundOptions = ref<DataOptionShort[]>([]);
const agencyFilter = ref<string>("");
const agencyOptions = ref<DataOption[]>();
const snapFilter = ref<string>("");
const snapOptions = ref<DataOption[]>();
const periodLatest = ref<DataPeriodLatest>();

const isLoad = ref<boolean>(false);

/** ตัวแปร select*/
const page = ref<number>(1);
const pageSize = ref<number>(50);
const lastPage = ref<number>(0);
const loading = ref(false);
const nextPage = ref<number>(1);

/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
function getRound() {
  showLoader();
  http
    .get(
      config.API.salaryPeriodActive() +
        `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
    )
    .then(async (res) => {
      const data = res.data.result.data;
      lastPage.value = Math.ceil(res.data.result.total / pageSize.value);

      const optionMain = await data.map((x: DataRound) => ({
        id: x.id,
        revisionId: x.revisionId,
        shortCode: x.period,
        isClose: x.isClose,
        year: x.year,
        name:
          (x.period === "OCT"
            ? "รอบตุลาคม "
            : x.period === "SPECIAL"
            ? "รอบพิเศษ "
            : "รอบเมษายน ") +
          (Number(x.year) + 543),
      }));
      roundOptions.value.push(...optionMain);

      roundFilter.value = await (roundOptions.value
        ? roundOptions.value[0]
        : "");

      store.roundMainCode = roundFilter.value.shortCode;
      store.roundYear = roundFilter.value.year;
      store.isClosedRound = roundFilter.value.isClose;

      await getSnap(roundFilter.value.shortCode);
      await getAgency(roundFilter.value.revisionId);
      await getAgencyPosition(roundFilter.value.revisionId);

      //   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
      //     await fetchSalalyPeriod(
      //       agencyFilter.value,
      //       roundFilter.value.id,
      //       snapFilter.value
      //     );
      //   }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** function เรียกรอบ*/
function getSnap(code: string) {
  snapOptions.value =
    code == "OCT"
      ? [
          {
            id: "SNAP1",
            name: "1 กันยายน",
          },
          {
            id: "SNAP2",
            name: "1 ตุลาคม",
          },
        ]
      : code === "APR"
      ? [
          {
            id: "SNAP1",
            name: "1 มีนาคม",
          },
          {
            id: "SNAP2",
            name: "1 เมษายน",
          },
        ]
      : [
          {
            id: "SNAP1",
            name: "พิเศษ 1",
          },
          {
            id: "SNAP2",
            name: "พิเศษ 2",
          },
        ];
  snapFilter.value = snapOptions.value[0].id;
}

/**
 * function เรียกข้อมูลหน่ยวงาน
 * @param id  revisionId
 */
async function getAgency(id: string) {
  id &&
    (await http
      .get(config.API.activeOrganizationRootById(id))
      .then(async (res) => {
        const data = res.data.result;
        agencyOptions.value = await [
          {
            id: "ALL",
            name: "ทั้งหมด",
          },
        ].concat(
          data.map((x: DataAgency) => ({
            id: x.id,
            name: x.orgRootName,
          }))
        );
        // agencyFilter.value = store.rootId;
      })
      .catch((err) => {
        messageError($q, err);
      }));
}

/**
 * function เรียกข้อมูลหน่ยวงานปจุบัน
 * @param id  revisionId
 */
async function getAgencyPosition(id: string) {
  if (id) {
    await http
      .get(config.API.keycloakPositionByid(id))
      .then(async (res) => {
        const data = await res.data.result;

        store.rootId = data.rootId;
        const position = agencyOptions.value?.find(
          (e: DataOption) => e.id === data.rootId
        );

        agencyFilter.value = position ? position.id : "";

        if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
          fetchSalalyPeriod(
            agencyFilter.value,
            roundFilter.value.id,
            snapFilter.value
          );
        }
      })
      .catch((err) => {
        messageError($q, err);
      });
  } else agencyFilter.value = "";
}

/**
 *
 * @param rootId id หน่วยงาน
 * @param periodId id รอบการขึ้นเงินเดือน
 * @param snap id รอบ
 */
function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
  showLoader();
  isLoad.value = false;
  const body = {
    rootId: rootId,
    salaryPeriodId: periodId,
    snapshot: snap,
  };

  http
    .post(config.API.salaryListPeriodLatest, body)
    .then(async (res) => {
      const data = res.data.result;
      if (roundFilter.value.shortCode !== "SPECIAL") {
        if (Object.values(data).includes(null)) {
          isLoad.value = false;
        } else {
          data && store.fetchPeriodLatest(data, store.tabGroup);
          periodLatest.value = data;
          isLoad.value = true;
        }
      } else {
        data && store.fetchPeriodLatest(data, store.tabGroup);
        periodLatest.value = data;
        isLoad.value = true;
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      setTimeout(() => {
        hideLoader();
      }, 800);
    });
}

/** function เปลี่ยนรอบการขั้นเงินเดือน*/
async function onChangeRound() {
  // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
  store.isClosedRound = roundFilter.value.isClose;
  if (roundFilter.value.shortCode === "SPECIAL") {
    store.tabGroup = "group1";
  }
  await getSnap(roundFilter.value.shortCode);
  await getAgency(roundFilter.value.revisionId);
  await getAgencyPosition(roundFilter.value.revisionId);
  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
    // await fetchSalalyPeriod(
    //   agencyFilter.value,
    //   roundFilter.value.id,
    //   snapFilter.value
    // );
    store.tabType = "PENDING";
    store.roundMainCode = roundFilter.value.shortCode;
    store.roundYear = roundFilter.value.year;
  } else {
    isLoad.value = false;
  }
}

/** function เปลี่ยนรอบ*/
async function onChangeSnap() {
  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
    await fetchSalalyPeriod(
      agencyFilter.value,
      roundFilter.value.id,
      snapFilter.value
    );
  }
}

/** function เปลี่ยนหน่วยงาน*/
async function onChangeAgency() {
  store.rootId = agencyFilter.value;

  if (
    agencyFilter.value !== "ALL" &&
    roundFilter.value.id &&
    snapFilter.value
  ) {
    await fetchSalalyPeriod(
      agencyFilter.value,
      roundFilter.value.id,
      snapFilter.value
    );
  }
}

/** function onScrollSelect รอบการขึ้นเงินเดือน*/
function onScroll({ to, ref }: { to: number; ref: any }) {
  const lastIndex = roundOptions.value.length - 1;

  if (
    loading.value !== true &&
    nextPage.value < lastPage.value &&
    to === lastIndex
  ) {
    loading.value = true;

    setTimeout(() => {
      nextPage.value++;
      page.value = nextPage.value;
      getRound();
      nextTick(() => {
        ref.refresh();
        loading.value = false;
      });
    }, 500);
  }
}

function getQuota() {
  fetchSalalyPeriod(agencyFilter.value, roundFilter.value.id, snapFilter.value);
}
onMounted(async () => {
  await getRound();
});
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">
      รายการเลื่อนเงินเดือนข้าราชการฯ
    </div>
    <q-space />
    <q-select
      v-model="roundFilter"
      label="รอบการขึ้นเงินเดือน"
      dense
      outlined
      map-options
      option-label="name"
      option-value="id"
      :options="roundOptions"
      lazy-rules
      hide-bottom-space
      bg-color="white"
      @update:model-value="onChangeRound"
      :loading="loading"
      @virtual-scroll="onScroll"
    >
      <template v-slot:option="scope">
        <q-item v-bind="scope.itemProps">
          <q-item-section>
            <q-item-label>{{ scope.opt.name }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-select
      v-if="roundFilter ? roundFilter.shortCode !== 'SPECIAL' : false"
      class="q-ml-xs"
      v-model="snapFilter"
      label="รอบ"
      dense
      outlined
      emit-value
      map-options
      option-label="name"
      option-value="id"
      :options="snapOptions"
      lazy-rules
      hide-bottom-space
      bg-color="white"
      @update:model-value="onChangeSnap"
    />
    <q-select
      class="q-ml-xs"
      v-model="agencyFilter"
      label="หน่วยงาน"
      dense
      outlined
      emit-value
      map-options
      option-label="name"
      option-value="id"
      :options="agencyOptions"
      lazy-rules
      hide-bottom-space
      bg-color="white"
      @update:model-value="onChangeAgency"
    />
  </div>

  <!-- <q-card> -->
  <!-- <q-tabs
      v-model="tabMain"
      dense
      class="text-grey"
      active-color="secondary"
      indicator-color="secondary"
      align="justify"
    >
      <q-tab
        name="first_snapshot"
        :label="store.titelPage === 'OCT' ? '1 มีนาคม' : '1 กันยายน'"
      />
      <q-tab
        name="two_snapshot"
        :label="store.titelPage === 'OCT' ? '1 เมษายน' : '1 ตุลาคม'"
      />
    </q-tabs>
    <q-separator /> -->
  <q-card flat bordered>
    <div v-if="agencyFilter !== 'ALL'">
      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
      <q-card v-else class="q-pa-sm">
        <div class="q-pa-sm">
          <q-banner inline-actions rounded class="bg-grey-1 text-center">
            ไม่มีข้อมูล
          </q-banner>
        </div>
      </q-card>
    </div>
    <div v-else>
      <PageDashBoard />
    </div>
  </q-card>

  <q-card
    v-if="isLoad && !store.isClosedRound"
    flat
    bordered
    class="row col-12 q-mt-xs"
  >
    <ProcessStep
      :periodId="roundFilter.id"
      :rootId="agencyFilter"
      :get-data="getQuota"
    />
  </q-card>

  <!-- </q-card> -->
</template>

<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 200px
</style>
