<script setup lang="ts">
import { ref, onMounted } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
import { useReportDataStore } from "@/modules/11_discipline/store/ReportStore";

const date = ref<Date>();
const dateEnd = ref<Date>();
const route = useRoute();
const typeReport = route.params.type.toString();

const store = useReportDataStore();
const mixin = useCounterMixin();
const {  date2Thai } = mixin;
const { filterFnOptionsType } = store;

const $q = useQuasar();
const ocSelect = ref<string>("");
const government = ref<string>("");
const fault = ref<string>();
const pdfSrc = ref<any>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const titleReport = ref<string>("");
const splitterModel = ref(14);

/** กลับหน้าหลัก */
function backHistory(){
  window.history.back();
};

/** แสดงรายงาน */
function showDocument(url: any){
  const pdfData = usePDF(url);

  setTimeout(() => {
    pdfSrc.value = pdfData.pdf.value;
    numOfPages.value = pdfData.pages.value;
  }, 1000);
};

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

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

/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(async () => {
  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
  report && (titleReport.value = report.name);
});
</script>
<template>
  <div class="toptitle">
    <q-btn
      icon="mdi-arrow-left"
      unelevated
      round
      dense
      flat
      color="primary"
      class="q-mr-sm"
      @click="backHistory"
    />
    {{ titleReport }}
  </div>
  <div>
    <q-card flat bordered class="col-12 q-mt-sm">
      <div class="q-pa-md q-gutter-y-sm">
        <q-toolbar style="padding: 0">
          <div class="q-pr-xs">
            <datepicker
              menu-class-name="modalfix"
              v-model="date"
              :locale="'th'"
              autoApply
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  class="full-width inputgreen cursor-pointer"
                  outlined
                  dense
                  lazy-rules
                  borderless
                  :model-value="date ? date2Thai(date) : null"
                  :label="`${'ตั้งเเต่วันที่'}`"
                >
                  <template v-slot:prepend>
                    <q-icon name="event" class="cursor-pointer" color="primary">
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>

          </div>
          <div class="q-pl-xs">
            <datepicker
              menu-class-name="modalfix"
              v-model="dateEnd"
              :locale="'th'"
              autoApply
              :enableTimePicker="false"
              week-start="0"
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  class="full-width inputgreen cursor-pointer"
                  outlined
                  dense
                  lazy-rules
                  borderless
                  :model-value="dateEnd ? date2Thai(dateEnd) : null"
                  :label="`${'ถึงวันที่'}`"
                >
                  <template v-slot:prepend>
                    <q-icon name="event" class="cursor-pointer" color="primary">
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>

          </div>
          <q-space />
          <div class="q-py-xs">
            <q-btn unelevated color="primary">
              <q-icon left size="2em" name="mdi-eye-outline" />
              <div>แสดงรายงาน</div>
            </q-btn>
          </div>
        </q-toolbar>

        <q-toolbar
          v-if="typeReport > '1'"
          class="q-pa-sm bg-grey-2"
          style="border-radius: 5px"
        >
          <div class="q-pr-xs">
            <q-select
              class="bg-white"
              outlined
              dense
              v-model="ocSelect"
              :options="store.ocSelectOp"
              label="เลือกหน่วยงาน/สำนักงานเขต"
              emit-value
              map-options
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'ocSelectOp'
            )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>

          </div>
          <div class="q-pl-xs">
            <q-select
              class="bg-white"
              outlined
              dense
              v-model="government"
              :options="store.governmentOp"
              label="เลือกหน่วยงาน/สำนักงานเขต"
              emit-value
              map-options
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'governmentOp'
            )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>

          </div>
          <div v-if="typeReport > '2'" class="q-pl-xs">
            <q-select
              class="bg-white"
              outlined
              dense
              v-model="fault"
              :options="store.faultOp"
              label="เลือกลักษณะความผิด"
              emit-value
              map-options
              option-label="name"
              option-value="id"
              use-input
              @filter="(inputValue: any,
            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
            )"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>

          </div>
        </q-toolbar>
        <q-splitter
          v-model="splitterModel"
          horizontal
          style="
            height: 70vh;
            border: 1px solid rgb(210, 210, 210);
            border-radius: 5px;
          "
          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">
              <VuePDF 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>
    </q-card>
  </div>
</template>
