<script setup lang="ts">
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

import genReport from "@/plugins/genreport";
import genReportXLSX from "@/plugins/genreportxlsx";

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

/** props*/
const props = defineProps({
  rowId: {
    type: String,
  },
});

/**
 * function ดาวน์โหลดไฟล์
 * @param type ประเภท file
 */
async function downloadDocument(type: string) {
  if (!props.rowId) return;
  showLoader();
  try {
    const res = await http.post(
      config.API.reportInsigniaNew + `/report8/${props.rowId}`
    );

    const reportTitle = "ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา";

    if (type === "xlsx") {
      await genReportXLSX(res.data.result, reportTitle, type);
    } else {
      await genReport(res.data.result, reportTitle, type);
    }
  } catch (error) {
    messageError($q, error);
  } finally {
    hideLoader();
  }
}
</script>

<template>
  <q-btn
    dense
    size="12px"
    flat
    round
    color="primary"
    icon="mdi-download"
    @click.stop
  >
    <q-menu>
      <q-list style="min-width: 150px">
        <q-item clickable v-close-popup @click="downloadDocument('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="downloadDocument('docx')">
          <q-item-section avatar
            ><q-icon color="blue" name="mdi-file-word"
          /></q-item-section>
          <q-item-section>ไฟล์ .docx</q-item-section>
        </q-item>
        <q-item clickable v-close-popup @click="downloadDocument('xlsx')">
          <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-tooltip>
      ดาวน์โหลดไฟล์ประวัติสำหรับการเสนอขอพระราชทานเหรียญจักรพรรดิมาลา
    </q-tooltip>
  </q-btn>
</template>
