<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 year = ref<number>(new Date().getFullYear());
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);
const isDisable = 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() {
  roundOptions.value = [];
  showLoader();
  isDisable.value = false;
  http
    .get(
      config.API.salaryPeriodActive(year.value.toString()) +
        `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
    )
    .then(async (res) => {
      const data = res.data.result.data;
      if (data.length !== 0) {
        isDisable.value = true;
        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"
              ? "รอบพิเศษ "
              : "รอบเมษายน ",
        }));
        roundOptions.value.push(...optionMain);

        roundFilter.value = await [];
        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);
      } else {
        isLoad.value = false;
        roundFilter.value = "ไม่มีข้อมูล";
        snapFilter.value = "ไม่มีข้อมูล";
        agencyFilter.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 : "ALL";

        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) {
  if (rootId !== "ALL") {
    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);
        // isLoad.value = true;
      })
      .finally(() => {
        setTimeout(() => {
          hideLoader();
        }, 800);
      });
  }
}

/** function เปลี่ยนรอบการขั้นเงินเดือน*/
async function onChangeRound() {
  // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
  store.isClosedRound = roundFilter.value.isClose;
  if (roundFilter.value.shortCode === "SPECIAL") {
    store.tabGroup = "group1";
  }
  getSnap(roundFilter.value.shortCode);
  await getAgency(roundFilter.value.revisionId);
  // await getAgencyPosition(roundFilter.value.revisionId);
  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
    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() {
  http
    .get(config.API.salaryListPeriodQuota(store.groupId))
    .then((res) => {
      console.log("q", res);
      const data = res.data.result;
      store.statusQuota = data.status;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {});
}
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 />
    <datepicker
      menu-class-name="modalfix"
      v-model="year"
      :locale="'th'"
      autoApply
      year-picker
      :enableTimePicker="false"
      style="width: 150px"
      @update:model-value="getRound"
    >
      <template #year="{ year }">{{ year + 543 }}</template>
      <template #year-overlay-value="{ value }">{{
        parseInt(value + 543)
      }}</template>
      <template #trigger>
        <q-input
          dense
          lazy-rules
          outlined
          :model-value="Number(year) + 543"
          :label="`${'ปีงบประมาณ'}`"
          bg-color="white"
        >
          <template v-slot:prepend>
            <q-icon
              name="event"
              class="cursor-pointer"
              style="color: var(--q-primary)"
            >
            </q-icon>
          </template>
        </q-input>
      </template>
    </datepicker>
    <q-select
      class="q-ml-xs"
      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"
      :disable="!isDisable"
    >
      <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"
      :disable="!isDisable"
    />
    <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"
      :disable="!isDisable"
    />
  </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"
        :periodId="roundFilter.id"
        :rootId="agencyFilter"
        :roundFilter="roundFilter"
      />
      <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
        :year="year"
        :snapShot="snapFilter"
        :roundFilter="roundFilter"
      />
    </div>
  </q-card>

  <q-card
    v-if="isLoad && !store.isClosedRound"
    flat
    bordered
    class="row col-12 q-mt-xs"
  >
    <ProcessStep
      v-if="agencyFilter !== 'ALL'"
      :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>
