<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";
import axios from "axios";
import { VuePDF, usePDF } from "@tato30/vue-pdf";

import http from "@/plugins/http";
import config from "@/app.config";
import genReportXLSX from "@/plugins/genreportxlsx";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
import { useOrganizational } from "@/modules/02_organization/store/organizational";

import type { DataDocument } from "@/modules/02_organization/interface/index/Main";
import type { DataOption } from "@/modules/21_report/interface/Main";

import LoadView from "@/components/LoadView.vue";
/** use */
const $q = useQuasar();
const store = useOrganizational(); // store โครงสร้างหน่วยงาน
const { showLoader, hideLoader, messageError } = useCounterMixin();

const historyId = defineModel<string>("historyId", {
  required: true,
}); // ID ประวัติโครงสร้างหน่วยงาน
const count = defineModel<number>("count", { required: true });

//หน่วยงาน
const organizationId = ref<string>(""); // ID หน่วยงาน
const organizationOpsMain = ref<DataOption[]>([]); // หน่วยงานทั้งหมด
const organizationOps = ref<DataOption[]>([]); // หน่วยงานที่เลือก

//Report
const isLoadPDF = ref<boolean>(false); // โหลดไฟล์ PDF
const detailReport = ref<any>(undefined); // รายละเอียดรายงาน

//View
const splitterModel = ref<number>(14); // ค่าตัวแบ่ง
const numOfPages = ref<number>(0); // จำนวนหน้าของรายงาน
const page = ref<number>(1); // หน้าเริ่มต้น
const pdfSrc = ref<any>(undefined); // ไฟล์ PDF

const reportVal = ref<string>(""); // ค่ารายงานที่เลือก
const baseDocument = ref<DataDocument[]>([
  {
    name: "บัญชี 2",
    val: "report2",
  },

  {
    name: "รายงานสรุปจำนวนกรอบอัตรากำลังของข้าราชการกรุงเทพมหานครสามัญ",
    val: "report4",
  },
]);
const documentOptions = ref<DataDocument[]>(baseDocument.value);

const summary = reactive({
  totalPosition: 0, // ตำแหน่งทั้งหมด
  totalPositionCurrentUse: 0, // ตำแหน่งที่มีคนครอง
  totalPositionCurrentVacant: 0, // ตำแหน่งว่าง
});

/**
 * ฟังก์ชันดึงข้อมูลโครงสร้างหน่วยงาน
 * @param id id โครงสร้าง
 */
async function fetchDataOrg(id: string) {
  await http
    .get(config.API.orgByid(id))
    .then((res) => {
      const data = res.data.result;
      organizationOpsMain.value = data.data.map((v: any) => {
        return {
          name: v.orgRootName,
          id: v.orgTreeId,
        };
      });
      organizationOps.value = organizationOpsMain.value;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ฟังก์ชันดึงข้อมูลสถิติ
 * @param data ขอมูลโครงสร้าง
 */
async function fetchSummary() {
  await http
    .post(config.API.orgSummary, {
      id: organizationId.value, //*Id node
      type: 0, //*ประเภทnode
      isNode: true, //*นับทั้ง node ไหม
    })
    .then(async (res: any) => {
      const data = await res.data.result;
      summary.totalPosition = data.totalPosition;
      summary.totalPositionCurrentUse = data.totalPositionCurrentUse;
      summary.totalPositionCurrentVacant = data.totalPositionCurrentVacant;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * ฟังก์ชัน DownloadReport
 * @param list รายงานที่ต้องการดาวน์โหลด
 */
async function getReport(valReport: string) {
  pdfSrc.value = undefined;
  page.value = 1;
  isLoadPDF.value = true;
  if (valReport) {
    await http
      .post(config.API.orgReport(valReport), {
        node: 0,
        nodeId: organizationId.value,
      })
      .then(async (res) => {
        const data = res.data.result;
        detailReport.value = data;
        await fetchDocumentTemplate(data);
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        isLoadPDF.value = false;
      });
  }
}

/**
 * ฟังก์ชันเรียกไฟล์ PDF
 * @param data  ข้อมูลบัญชีวันลา
 */
async function fetchDocumentTemplate(data: any) {
  await axios
    .post(`${config.API.reportTemplate}/xlsx`, data, {
      headers: {
        accept: "application/pdf",
        "content-Type": "application/json",
      },
      responseType: "blob",
    })
    .then(async (res) => {
      const blob = new Blob([res.data]);
      const objectUrl = URL.createObjectURL(blob);
      const pdfData = usePDF(`${objectUrl}`);

      setTimeout(() => {
        pdfSrc.value = pdfData.pdf.value;
        numOfPages.value = pdfData.pages.value;
      }, 1500);
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
    });
}

async function onSearchReport() {
  showLoader();
  try {
    fetchSummary();
    getReport(reportVal.value);
  } catch (error) {
    console.error("Error showing loader:", error);
  } finally {
    hideLoader();
  }
  // Implement search functionality here
}

/**
 * ฟังก์ชันค้นหาคำใน select
 * @param val คำค้นหา
 * @param update function
 * @param type ประเภท select
 */
function filterSelector(val: string, update: Function, type: string) {
  switch (type) {
    case "organization":
      update(() => {
        organizationOps.value = organizationOpsMain.value.filter(
          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
        );
      });
      break;

    case "report":
      update(() => {
        documentOptions.value = baseDocument.value.filter(
          (v: DataDocument) => v.name.toLowerCase().indexOf(val) > -1
        );
      });
      break;

    default:
      break;
  }
}

/** ล้างตัวกรอง */
function clearFilter() {
  pdfSrc.value = undefined;
  detailReport.value = undefined;
  numOfPages.value = 0; // จำนวนหน้าของรายงาน
  organizationId.value = "";
  reportVal.value = "";
  summary.totalPosition = 0;
  summary.totalPositionCurrentUse = 0;
  summary.totalPositionCurrentVacant = 0;
}

/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
  if (page.value !== 1) {
    page.value--;
  }
}

/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
  if (page.value < numOfPages.value) {
    page.value++;
  }
}

/** callback function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนแปลง activeId */
watch(
  () => store.activeId,
  () => {
    store.activeId && fetchDataOrg(store.activeId?.toString());
  }
);

/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
watch(
  () => count.value,
  () => {
    clearFilter();
    organizationOpsMain.value = [];
    organizationOps.value = [];
    fetchDataOrg(historyId.value);
  }
);

watch(
  () => store.typeOrganizational,
  () => {
    clearFilter();
    organizationOpsMain.value = [];
    organizationOps.value = [];
    store.activeId && fetchDataOrg(store.activeId?.toString());
  }
);

/**
 * lifecycle Hook ทำเมือ่ Components ถูกเรียกใช้งาน
 * ุ และดึงช้อมูลโครงสร้างตาม ID ของประเภทโครงสร้าง ปัจจุบัน,แบบร่าง
 */
onMounted(async () => {
  const id =
    store.typeOrganizational === "current" ? store.activeId : historyId.value;

  id && (await fetchDataOrg(id));
});
</script>

<template>
  <q-form greedy @submit.prevent @validation-success="onSearchReport">
    <div class="row q-col-gutter-sm">
      <div class="col-12">
        <q-card class="q-pa-sm">
          <div class="row q-col-gutter-sm">
            <div class="col">
              <q-card flat bordered>
                <q-card-section
                  bordered
                  class="bg-primary text-subtitle2 text-white q-pa-sm row items-center"
                >
                  <q-icon name="mdi-filter" class="q-mr-xs" />
                  ตัวกรอง
                  <q-space />
                  <q-btn
                    dense
                    size="12px"
                    class="q-px-sm"
                    rounded
                    flat
                    label="ล้างทั้งหมด"
                    @click.stop.prevent="clearFilter"
                  />
                </q-card-section>
                <q-card-section class="q-pa-none">
                  <div class="col-12 q-pb-xs q-px-sm">
                    <q-select
                      class="bg-white"
                      dense
                      borderless
                      hide-selected
                      fill-input
                      hide-bottom-space
                      option-label="name"
                      option-value="id"
                      emit-value
                      map-options
                      v-model="organizationId"
                      :options="organizationOps"
                      label="หน่วยงาน"
                      use-input
                      @filter="(inputValue: string,
            doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
                    >
                      <template v-slot:no-option>
                        <q-item>
                          <q-item-section class="text-grey">
                            ไม่มีข้อมูล
                          </q-item-section>
                        </q-item>
                      </template>
                    </q-select>
                  </div>
                  <q-separator />
                  <div class="col-12 q-pb-xs q-px-sm">
                    <q-select
                      class="bg-white"
                      dense
                      borderless
                      hide-selected
                      fill-input
                      hide-bottom-space
                      option-label="name"
                      option-value="val"
                      emit-value
                      map-options
                      v-model="reportVal"
                      :options="documentOptions"
                      label="รายงาน"
                      use-input
                      @filter="(inputValue: string,
            doneFn: Function) => filterSelector(inputValue, doneFn,'report' )"
                    >
                      <template v-slot:no-option>
                        <q-item>
                          <q-item-section class="text-grey">
                            ไม่มีข้อมูล
                          </q-item-section>
                        </q-item>
                      </template>
                    </q-select>
                  </div>
                </q-card-section>
                <q-separator />
                <q-card-actions align="right">
                  <q-btn
                    dense
                    class="q-px-md"
                    label="ค้นหา"
                    unelevated
                    color="public"
                    type="submit"
                    :disable="organizationId === ''"
                  />
                </q-card-actions>
              </q-card>
            </div>
            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-12">
              <div class="col-12">
                <div class="col-12">
                  <q-card
                    bordered
                    class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
                  >
                    <div class="row col q-pa-sm item">
                      <div class="ellipsis">ตำแหน่งทั้งหมด</div>
                      <q-space />
                      <q-badge
                        color="secondary"
                        :label="summary.totalPosition"
                      />
                    </div>
                    <div class="row col q-pa-sm item">
                      <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
                      <q-space />
                      <q-badge
                        color="primary"
                        :label="summary.totalPositionCurrentUse"
                      />
                    </div>
                    <div class="row col q-pa-sm item">
                      <div class="ellipsis">ตำแหน่งว่าง</div>
                      <q-space />
                      <q-badge
                        color="red"
                        :label="summary.totalPositionCurrentVacant"
                      />
                    </div>
                    <div class="row col">
                      <div class="row col-12">
                        <q-space />
                        <q-btn
                          v-if="checkPermission($route)?.attrIsGet"
                          :loading="isLoadPDF"
                          :disable="!detailReport"
                          flat
                          round
                          color="primary"
                          icon="download"
                        >
                          <q-tooltip> ดาวน์โหลดรายงาน </q-tooltip>

                          <q-menu>
                            <q-list style="min-width: 150px">
                              <q-item
                                clickable
                                v-close-popup
                                @click.stop.prevent="
                                  genReportXLSX(
                                    detailReport,
                                    `${
                                      baseDocument.find(
                                        (e) => e.val === reportVal
                                      )?.name
                                    }`,
                                    'pdf'
                                  )
                                "
                              >
                                <q-item-section avatar
                                  ><q-icon color="red" name="mdi-file-pdf"
                                /></q-item-section>
                                <q-item-section>ไฟล์ .pdf</q-item-section>
                              </q-item>
                              <q-item
                                clickable
                                v-close-popup
                                @click.stop.prevent="
                                  genReportXLSX(
                                    detailReport,
                                    `${
                                      baseDocument.find(
                                        (e) => e.val === reportVal
                                      )?.name
                                    }`
                                  )
                                "
                              >
                                <q-item-section avatar
                                  ><q-icon color="green" name="mdi-file-excel"
                                /></q-item-section>
                                <q-item-section>ไฟล์ .xlsx</q-item-section>
                              </q-item>
                            </q-list>
                          </q-menu>
                        </q-btn>
                      </div>
                    </div>
                  </q-card>

                  <q-splitter
                    class="q-mt-xs"
                    v-model="splitterModel"
                    disable
                    horizontal
                    style="
                      height: 75vh;
                      border: 1px solid rgb(210, 210, 210);
                      border-radius: 5px;
                      width: 100%;
                    "
                    before-class="overflow-hidden disable"
                    separator-class="bg-white disabled"
                  >
                    <template v-slot:before>
                      <div class="q-px-sm">
                        <div class="row items-start items-center">
                          <div class="col">
                            <q-btn
                              padding="xs"
                              icon="mdi-chevron-left"
                              color="grey-2"
                              text-color="grey-5"
                              size="md"
                              class="my-auto"
                              @click="backPage"
                              :disable="page == 1"
                            />
                          </div>
                          <div class="col-12 col-md-auto">
                            <div class="q-pa-md flex">
                              หน้าที่ {{ page }} จาก {{ numOfPages }}
                            </div>
                          </div>
                          <div class="col text-right">
                            <q-btn
                              padding="xs"
                              icon="mdi-chevron-right"
                              color="grey-2"
                              text-color="grey-5"
                              size="md"
                              @click="nextPage"
                              :disable="page === numOfPages"
                            />
                          </div>
                        </div>
                      </div>
                    </template>
                    <template v-slot:after>
                      <div class="q-pa-md">
                        <LoadView v-if="isLoadPDF" />
                        <VuePDF
                          v-else-if="!isLoadPDF && pdfSrc"
                          ref="vuePDFRef"
                          :pdf="pdfSrc"
                          :page="page"
                          fit-parent
                        />
                      </div>
                    </template>
                    <template v-slot:default>
                      <div class="q-pa-md">
                        <div class="row items-start items-center">
                          <div class="col">
                            <q-btn
                              padding="xs"
                              icon="mdi-chevron-left"
                              color="grey-2"
                              text-color="grey-5"
                              size="md"
                              class="my-auto"
                              @click="backPage"
                              :disable="page == 1"
                            />
                          </div>

                          <div class="col-12 col-md-auto">
                            <div class="q-pa-md flex">
                              หน้าที่ {{ page }} จาก {{ numOfPages }}
                            </div>
                          </div>
                          <div class="col text-right">
                            <q-btn
                              padding="xs"
                              icon="mdi-chevron-right"
                              color="grey-2"
                              text-color="grey-5"
                              size="md"
                              @click="nextPage"
                              :disable="page === numOfPages"
                            />
                          </div>
                        </div>
                      </div>
                    </template>
                  </q-splitter>
                </div>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </div>
  </q-form>
</template>

<style scoped>
.list-summary .item {
  border: 1px solid rgb(231, 231, 231);
  border-radius: 4px;
  background-color: white;
}
</style>
