<template>
  <div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
  <q-card flat bordered class="col-12">
    <div class="row col-12">
      <q-tabs
        v-model="tab"
        no-caps
        inline-label
        align="left"
        class="text-primary"
      >
        <q-tab name="audit1" label="บัญชี 1" />
        <q-tab name="audit2" label="บัญชี 2" />
        <q-tab name="audit3" label="บัญชี 3" />
      </q-tabs>
    </div>
    <q-separator />
    <q-tab-panels
      v-model="tab"
      transition-prev="jump-up"
      transition-next="jump-up"
      animated
      swipeable
      class="row col-12 text-dark"
    >
      <q-tab-panel name="audit1">
        <div class="row col-12 items-center q-gutter-md">
          <q-select
            class="col-xs-12 col-sm-6"
            v-model="goverment"
            label="ระบุหน่วยงานที่ต้องการออกรายงาน"
            dense
            :options="govermentOP"
            lazy-rules
            hide-bottom-space
            :readonly="false"
            :borderless="false"
            :outlined="true"
            :hide-dropdown-icon="false"
          />
          <q-btn
            size="md"
            icon="mdi-download"
            round
            flat
            color="primary"
            @click="clickAccount1"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip>
          </q-btn>
        </div>
      </q-tab-panel>
      <q-tab-panel name="audit2">
        <div class="row col-12 items-center q-gutter-md">
          <q-select
            class="col-xs-12 col-sm-6"
            v-model="goverment"
            label="ระบุรหัสส่วนราชการ"
            dense
            :options="govermentOP"
            lazy-rules
            hide-bottom-space
            :readonly="false"
            :borderless="false"
            :outlined="true"
            :hide-dropdown-icon="false"
          />

          <q-btn
            size="md"
            icon="mdi-download"
            flat
            round
            color="primary"
            @click="clickAccount2"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip>
          </q-btn>
        </div>
      </q-tab-panel>
      <q-tab-panel name="audit3">
        <div class="row col-12 items-center q-gutter-md">
          <q-select
            class="col-xs-12 col-sm-6"
            v-model="goverment"
            label="ระบุรหัสส่วนราชการ"
            dense
            :options="govermentOP"
            lazy-rules
            hide-bottom-space
            :readonly="false"
            :borderless="false"
            :outlined="true"
            :hide-dropdown-icon="false"
          />
          <q-btn
            size="md"
            icon="mdi-download"
            flat
            round
            color="primary"
            @click="clickAccount3"
          >
            <q-tooltip>ดาวน์โหลด</q-tooltip>
            <!-- <viewpdf 
                        :src="pdfSrc" 
                        :currentpage="pdfCurrentPage" 
                        :totalpage="pdfTotalPage" /> -->
          </q-btn>
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>
<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRouter, useRoute } from "vue-router";

import TableReport from "@/modules/02_organizational/components/TableReport.vue";
import DialogHeader from "@/modules/02_organizational/components/DialogHeader.vue";
import DialogFooter from "@/modules/02_organizational/components/DialogFooter.vue";
import type { QForm } from "quasar";
import type { DataOption } from "@/modules/02_organizational/interface/index/Main";
import type { ResponseDetail } from "@/modules/02_organizational/interface/response/Mapping";
import type { RequestReport2 } from "@/modules/02_organizational/interface/request/Mapping";
import http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const { messageError, modalError, modalWarning, showLoader, hideLoader } =
  mixin;
const router = useRouter();
const route = useRoute();
const { date2Thai, success, dateToISO } = mixin;

const govermentOP = ref<any[]>([]);
const govermentOPfilter = ref<any[]>([]);
const goverment = ref<any>();
const tab = ref<string>("audit1");

const clickAccount1 = async () => {
  if (goverment.value === null || goverment.value === undefined) {
    modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
    return;
  }
  showLoader();
  await http
    .get(config.API.getReportAccount1(goverment.value?.value as string), {
      responseType: "blob",
    })
    .then((res) => {
      var a = document.createElement("a");
      a.href = URL.createObjectURL(res.data);
      a.download = `รายงานบัญชี1_${goverment.value?.label}.pdf`;
      // start download
      a.click();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });

  // window.open(config.API.getReportAccount1(goverment.value));
};

const clickAccount2 = async () => {
  if (goverment.value === null || goverment.value === undefined) {
    modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
    return;
  }
  showLoader();
  await http
    .get(config.API.getReportAccount2(goverment.value?.value as string), {
      responseType: "blob",
    })
    .then((res) => {
      var a = document.createElement("a");
      a.href = URL.createObjectURL(res.data);
      a.download = `รายงานบัญชี2_${goverment.value?.label}.pdf`;
      // start download
      a.click();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
  //window.open(config.API.getReportAccount2(goverment.value));
};

const clickAccount3 = async () => {
  if (goverment.value === null || goverment.value === undefined) {
    modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
    return;
  }
  showLoader();
  await http
    .get(config.API.getReportAccount3(goverment.value?.value as string), {
      responseType: "blob",
    })
    .then((res) => {
      var a = document.createElement("a");
      a.href = URL.createObjectURL(res.data);
      a.download = `รายงานบัญชี3_${goverment.value?.label}.pdf`;
      // start download
      a.click();
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
  // window.open(config.API.getReportAccount3(goverment.value));
};

const fetchOrganizationAgency = async () => {
  showLoader();
  await http
    // .get(config.API.organizationAgency)
    .get(config.API.getOCType)
    .then((res) => {
      const data = res.data.result;
      let option: any[] = [];
      data.map((r: any) => {
        option.push({
          value: r.organizationId.toString(),
          label: r.organizationName.toString(),
        });
      });
      govermentOP.value = option;
      govermentOPfilter.value = option;
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      hideLoader();
    });
};

onMounted(async () => {
  hideLoader();
  await fetchOrganizationAgency();
  console.log(govermentOP.value);
});
</script>
