RevistasPage.vue

<template>
  <q-page class="q-pa-md flex flex-center column">
    <!-- Filtros -->
    <div class="row q-gutter-md q-mb-md justify-center">
      <q-input
        v-model="filters.revista"
        label="Revista"
        dense
        outlined
        clearable
        @clear="filters.revista = ''"
        class="col-md-3 col-11"
      />
      <q-select
        v-model="filters.area_conocimiento"
        label="Área de Conocimiento"
        :options="filteredAreasConocimiento"
        dense
        outlined
        clearable
        emit-value
        map-options
        use-input
        multiple
        @filter="filterAreasConocimiento"
        @clear="filters.area_conocimiento = []"
        class="col-md-3 col-11"
      />
      <q-select
        v-model="filters.indice"
        label="Indice"
        :options="filteredRevistasIndices"
        dense
        outlined
        clearable
        emit-value
        map-options
        use-input
        multiple
        @filter="filterRevistasIndices"
        @clear="filters.indice = []"
        class="col-md-3 col-11"
      />
      <q-select
        v-model="filters.idioma"
        label="Idiomas"
        :options="filteredRevistasIdiomas"
        dense
        outlined
        clearable
        emit-value
        map-options
        use-input
        multiple
        @filter="filterRevistasIdiomas"
        @clear="filters.idioma = []"
        class="col-md-3 col-11"
      />
      <q-select
        v-model="filters.editorial"
        label="Editoriales"
        :options="filteredRevistasEditorial"
        dense
        outlined
        clearable
        emit-value
        map-options
        use-input
        multiple
        @filter="filterRevistasEditorial"
        @clear="filters.editorial = []"
        class="col-md-3 col-11"
      />
      <q-select
        v-model="filters.periodicidad"
        label="Periodicidad"
        :options="filteredRevistasPeriodicidad"
        dense
        outlined
        clearable
        emit-value
        map-options
        use-input
        multiple
        @filter="filterRevistasPeriodicidad"
        @clear="filters.periodicidad = []"
        class="col-md-3 col-11"
      />
      <q-select
        v-model="filters.estado"
        label="Estado"
        :options="filteredRevistasEstado"
        dense
        outlined
        clearable
        emit-value
        map-options
        use-input
        multiple
        @filter="filterRevistasEstado"
        @clear="filters.estado = []"
        class="col-md-3 col-11"
      />
    </div>
    <!-- Tarjetas de Revistas -->
    <div class="row q-gutter-md justify-center">
      <q-card
        v-for="revista in paginatedRevistas"
        :key="revista.id"
        class="my-card col-md-3 col-sm-6 col-xs-12"
        @click="openDialog(revista)"
      >
        <q-img
          :src="`${imageBaseUrl}${revista.portada}`"
          :alt="revista.portada"
        />
        <q-card-section>
          <div class="text-h6">{{ revista.revista }}</div>
          <div class="text-subtitle2">{{ revista.area_conocimiento }}</div>
        </q-card-section>
      </q-card>
    </div>
    <!-- Paginación -->
    <div class="q-mt-md flex flex-center">
      <q-pagination
        v-model="pagination.page"
        :max="totalPages"
        :max-pages="10"
        direction-links
        boundary-links
        class="q-mt-md flex flex-center"
      />
    </div>
    <!-- Diálogo para mostrar detalles -->
    <q-dialog
      v-model="dialogVisible"
      :maximized="isMaximized"
      transition-show="scale"
      transition-hide="fade"
    >
      <!-- Fondo con blur -->
      <!-- <div class="dialog-background"  v-if="dialogVisible"></div> -->
      <q-card class="custom-dialog">
        <!-- Toolbar -->
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title class="text-center text-responsive">
            Directorio de Revistas Científicas - ONCTI
          </q-toolbar-title>
          <q-btn
            :icon="isMaximized ? 'fullscreen_exit' : 'fullscreen'"
            flat
            round
            dense
            @click="toggleMaximized"
            :title="
              isMaximized ? 'Salir de pantalla completa' : 'Pantalla completa'
            "
          />
          <q-btn
            icon="picture_as_pdf"
            :loading="loading"
            :disable="loading"
            flat
            round
            dense
            @click="exportToPdf"
            title="Exportar a PDF"
          >
            <template v-slot:loading>
              <q-spinner-hourglass class="on-left" />
              Generando...
            </template>
          </q-btn>
          <q-btn icon="close" flat round dense @click="dialogVisible = false" />
        </q-toolbar>
        <!-- Contenido del diálogo con scroll -->
        <q-card-section class="scrollable-content" ref="dialogContent">
          <div>
            <div>
              <q-img src="img/cintillo.jpg" srcset="img/cintillo.jpg 100w" />
            </div>
            <div class="flex justify-between">
              <img
                alt="Logo"
                src="img/logo-nobg1.png"
                style="
                  width: 150px;
                  height: 125px;
                  margin-left: 20px;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              />
              <img
                alt="Observatorio Nacional de Ciencia, Tecnología e Innovación"
                src="img/oncti-nobg.png"
                style="
                  width: 150px;
                  height: 100px;
                  margin-right: 20px;
                  margin-top: 10px;
                  margin-bottom: 10px;
                "
              />
            </div>
          </div>
          <div
            v-if="selectedRevista"
            class="row q-col-gutter-md"
            id="contenidoRevista"
          >
            <div class="col-xs-12 col-sm-4 col-md-2">
              <q-img
                :src="`${imageBaseUrl}${selectedRevista.portada}`"
                :alt="selectedRevista.portada"
                class="portada-img"
              />
            </div>
            <!-- Detalles de la revista -->
            <div class="col-xs-12 col-sm-8 col-md-10">
              <div class="row q-col-gutter-md">
                <!-- <div class="col-6"> -->
                <div class="col-2">
                  <q-input
                    v-model="selectedRevista.id"
                    label="ID"
                    readonly
                    outlined
                    dense
                  />
                </div>
                <div class="col-10">
                  <q-input
                    v-model="selectedRevista.revista"
                    label="REVISTA"
                    readonly
                    outlined
                    dense
                  />
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    v-model="selectedRevista.area_conocimiento"
                    label="ÁREA CONOCIMIENTO"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.resumen"
                    label="RESÚMEN"
                    type="textarea"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.deposito_legal_impreso"
                    label="DEPÓSITO LEGAL IMPRESO"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.deposito_legal_digital"
                    label="DEPÓSITO LEGAL DIGITAL"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.issn_impreso"
                    label="ISSN IMPRESO"
                    readonly
                    outlined
                    dense
                  />
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    v-model="selectedRevista.issn_digital"
                    label="ISSN DIGITAL"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.url"
                    label="URL"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.correo_revista"
                    label="CORREO REVISTA"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.indice"
                    label="ÍNDICE"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.editorial"
                    label="EDITORIAL"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.periodicidad"
                    label="PERIODICIDAD"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.formato"
                    label="FORMATO"
                    readonly
                    outlined
                    dense
                  />
                </div>
                <div class="col-12 col-md-4">
                  <q-input
                    v-model="selectedRevista.estado"
                    label="CIUDAD"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.nombres_editor"
                    label="NOMBRE EDITOR"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.apellidos_editor"
                    label="APELLIDOS EDITOR"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.correo_editor"
                    label="CORREO EDITOR"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.anio_inicial"
                    label="AÑO INICIAL"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.direccion"
                    label="DIRECCIÓN"
                    readonly
                    outlined
                    dense
                  />
                  <q-input
                    v-model="selectedRevista.telefono"
                    label="TELÉFONO"
                    readonly
                    outlined
                    dense
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-page>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import axios from "axios";
import { PDFDocument, rgb } from "pdf-lib";
import { Notify } from "quasar";

const imageBaseUrl = ref("");
const revistas = ref([]);
const dialogContent = ref(null); // Referencia al contenido del diálogo
const isMaximized = ref(false);
const toggleMaximized = () => {
  isMaximized.value = !isMaximized.value;
};
const filters = ref({
  revista: "",
  area_conocimiento: [],
  indice: [],
  idioma: [],
  editorial: [],
  periodicidad: [],
  formato: [],
  estado: [],
});
const pagination = ref({
  page: 1,
  rowsPerPage: 10,
});
const dialogVisible = ref(false);
const selectedRevista = ref(null);
const areasConocimiento = ref([]);
const revistasIndices = ref([]);
const revistasIdiomas = ref([]);
const revistasEditorial = ref([]);
const revistasPeriodicidad = ref([]);
const revistasFormato = ref([]);
const revistasEstado = ref([]);

// Referencias para las opciones filtradas
const filteredAreasConocimiento = ref([]);
const filteredRevistasIndices = ref([]);
const filteredRevistasIdiomas = ref([]);
const filteredRevistasEditorial = ref([]);
const filteredRevistasPeriodicidad = ref([]);
const filteredRevistasEstado = ref([]);

// Funciones de filtrado
const filterAreasConocimiento = (val, update) => {
  update(() => {
    const needle = val.toLowerCase();
    filteredAreasConocimiento.value = areasConocimiento.value.filter(
      (v) => v.label.toLowerCase().indexOf(needle) > -1
    );
  });
};

const filterRevistasIndices = (val, update) => {
  update(() => {
    const needle = val.toLowerCase();
    filteredRevistasIndices.value = revistasIndices.value.filter(
      (v) => v.label.toLowerCase().indexOf(needle) > -1
    );
  });
};

const filterRevistasIdiomas = (val, update) => {
  update(() => {
    const needle = val.toLowerCase();
    filteredRevistasIdiomas.value = revistasIdiomas.value.filter(
      (v) => v.label.toLowerCase().indexOf(needle) > -1
    );
  });
};

const filterRevistasEditorial = (val, update) => {
  update(() => {
    const needle = val.toLowerCase();
    filteredRevistasEditorial.value = revistasEditorial.value.filter(
      (v) => v.label.toLowerCase().indexOf(needle) > -1
    );
  });
};

const filterRevistasPeriodicidad = (val, update) => {
  update(() => {
    const needle = val.toLowerCase();
    filteredRevistasPeriodicidad.value = revistasPeriodicidad.value.filter(
      (v) => v.label.toLowerCase().indexOf(needle) > -1
    );
  });
};

const filterRevistasEstado = (val, update) => {
  update(() => {
    const needle = val.toLowerCase();
    filteredRevistasEstado.value = revistasEstado.value.filter(
      (v) => v.label.toLowerCase().indexOf(needle) > -1
    );
  });
};

// Obtener datos de la API
onMounted(async () => {
  try {
    const apiUrl = import.meta.env.VITE_API_URL;
    const response = await axios.get(apiUrl);
    revistas.value = response.data;
    imageBaseUrl.value = import.meta.env.VITE_IMAGE_BASE_URL;
    console.log(revistas.value);
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  try {
    const areasUrl = import.meta.env.VITE_AREASR_BASE_URL;
    const areasResponse = await axios.get(areasUrl);
    areasConocimiento.value = areasResponse.data.map((area) => ({
      label: area.area_conocimiento,
      value: area.area_conocimiento,
    }));
    filteredAreasConocimiento.value = areasConocimiento.value;
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  try {
    const indicesUrl = import.meta.env.VITE_INDICESR_BASE_URL;
    const indicesResponse = await axios.get(indicesUrl);
    revistasIndices.value = indicesResponse.data.map((indice) => ({
      label: indice.indice,
      value: indice.indice,
    }));
    filteredRevistasIndices.value = revistasIndices.value;
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  try {
    const idiomasUrl = import.meta.env.VITE_IDIOMASR_BASE_URL;
    const idiomasResponse = await axios.get(idiomasUrl);
    revistasIdiomas.value = idiomasResponse.data.map((idioma) => ({
      label: idioma.idioma,
      value: idioma.idioma,
    }));
    filteredRevistasIdiomas.value = revistasIdiomas.value;
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  try {
    const editorialUrl = import.meta.env.VITE_EDITORIALR_BASE_URL;
    const editorialResponse = await axios.get(editorialUrl);
    revistasEditorial.value = editorialResponse.data.map((editorial) => ({
      label: editorial.editorial,
      value: editorial.editorial,
    }));
    filteredRevistasEditorial.value = revistasEditorial.value;
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  try {
    const periodicidadUrl = import.meta.env.VITE_PERIODICIDADR_BASE_URL;
    const periodicidadResponse = await axios.get(periodicidadUrl);
    revistasPeriodicidad.value = periodicidadResponse.data.map(
      (periodicidad) => ({
        label: periodicidad.periodicidad,
        value: periodicidad.periodicidad,
      })
    );
    filteredRevistasPeriodicidad.value = revistasPeriodicidad.value;
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  try {
    const formatoUrl = import.meta.env.VITE_FORMATOR_BASE_URL;
    const formatoResponse = await axios.get(formatoUrl);
    revistasFormato.value = formatoResponse.data.map((formato) => ({
      label: formato.formato,
      value: formato.formato,
    }));
  } catch (error) {
    console.error("Error fetching data:", error);
  }

  try {
    const estadoUrl = import.meta.env.VITE_ESTADOR_BASE_URL;
    const estadoResponse = await axios.get(estadoUrl);
    revistasEstado.value = estadoResponse.data.map((estado) => ({
      label: estado.estado,
      value: estado.estado,
    }));
    filteredRevistasEstado.value = revistasEstado.value;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
});

// Filtrar revistas
const filteredRevistas = computed(() => {
  return revistas.value.filter((revista) => {
    return (
      revista.revista
        .toLowerCase()
        .includes(filters.value.revista.toLowerCase()) &&
      (filters.value.area_conocimiento.length === 0 ||
        filters.value.area_conocimiento.includes(revista.area_conocimiento)) &&
      (filters.value.indice.length === 0 ||
        filters.value.indice.includes(revista.indice)) &&
      (filters.value.idioma.length === 0 ||
        filters.value.idioma.includes(revista.idioma)) &&
      (filters.value.editorial.length === 0 ||
        filters.value.editorial.includes(revista.editorial)) &&
      (filters.value.periodicidad.length === 0 ||
        filters.value.periodicidad.includes(revista.periodicidad)) &&
      (filters.value.formato.length === 0 ||
        filters.value.formato.includes(revista.formato)) &&
      (filters.value.estado.length === 0 ||
        filters.value.estado.includes(revista.estado))
    );
  });
});

// Paginación
const paginatedRevistas = computed(() => {
  const start = (pagination.value.page - 1) * pagination.value.rowsPerPage;
  const end = start + pagination.value.rowsPerPage;
  return filteredRevistas.value.slice(start, end);
});

const totalPages = computed(() => {
  return Math.ceil(
    filteredRevistas.value.length / pagination.value.rowsPerPage
  );
});

// Abrir diálogo con los detalles de la revista
const openDialog = (revista) => {
  selectedRevista.value = revista;
  dialogVisible.value = true;
};

// Método para convertir una imagen a base64
const imageToBase64 = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "Anonymous"; // Permitir CORS
    img.src = url;
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
      resolve(canvas.toDataURL("image/png")); // Convertir a base64
    };
    img.onerror = (error) => reject(error);
  });
};

const exportToPdf = async () => {
  const loading = ref(false);
  if (!selectedRevista.value) return;

  loading.value = true;

  try {
    // Importar fontkit dinámicamente
    const fontkitModule = await import("fontkit");
    const fontkit = fontkitModule.default;

    // Crear un nuevo documento PDF
    const pdfDoc = await PDFDocument.create();
    const page = pdfDoc.addPage([595, 842]); // Tamaño A4 en puntos (595 x 842)

    // Configurar márgenes y estilos
    const margin = 50;
    const { width, height } = page.getSize();
    const lineHeight = 20;
    const fontSizeTitle = 18;
    const fontSizeNormal = 12;
    const fontSizeMedium = 10;
    const fontSizeSmall = 8;

    // Función para agregar texto al PDF
    const addText = (
      text,
      x,
      y,
      size = fontSizeNormal,
      color = rgb(0, 0, 0)
    ) => {
      page.drawText(text.toString(), {
        x,
        y: height - y,
        size,
        color,
        //font: customFont, // Usar la fuente personalizada
      });
    };

    // Cargar la imagen de la portada
    const encabezadoUrl = "/public/img/cintillo.jpg"; // Ruta corregida
    const encabezadoBytes = await fetch(encabezadoUrl).then((res) =>
      res.arrayBuffer()
    );
    const encabezado = await pdfDoc.embedJpg(encabezadoBytes); // Usar embedJpg si es una imagen JPG
    page.drawImage(encabezado, {
      x: margin,
      y: 775, // Ajustar la posición Y
      width: 900,
      height: 60,
    });

    const logo1Url = "/public/img/logo-nobg1.png"; // Ruta corregida
    const logo1Bytes = await fetch(logo1Url).then((res) => res.arrayBuffer());
    const logo1 = await pdfDoc.embedPng(logo1Bytes); // Usar embedPng si es una imagen PNG
    page.drawImage(logo1, {
      x: margin,
      y: 715, // Ajustar la posición Y
      width: 60,
      height: 60,
    });

    addText("DIRECTORIO DE", 220, margin + 50, fontSizeTitle);
    addText("REVISTAS CIENTÍFICAS", 190, margin + 70, fontSizeTitle);

    const onctiUrl = "/public/img/oncti-nobg.png"; // Ruta corregida
    const onctiBytes = await fetch(onctiUrl).then((res) => res.arrayBuffer());
    const oncti = await pdfDoc.embedPng(onctiBytes); // Usar embedPng si es una imagen PNG
    page.drawImage(oncti, {
      x: 500,
      y: 720, // Ajustar la posición Y
      width: 70,
      height: 60,
    });

    page.drawLine({
      start: { x: margin, y: 700 },
      end: { x: width - margin, y: 700 },
      thickness: 1,
      color: rgb(0.7, 0.7, 0.7),
    });

    const imageUrl = `${imageBaseUrl.value}${selectedRevista.value.portada}`;
    const imageBytes = await fetch(imageUrl).then((res) => res.arrayBuffer());
    const image = await pdfDoc.embedJpg(imageBytes); // Usar embedJpg si es una imagen JPG
    const imageWidth = 100; // Ancho de la imagen
    const imageHeight = (image.height * imageWidth) / image.width; // Mantener la proporción
    page.drawImage(image, {
      x: margin,
      y: height - margin - 100 - imageHeight, // Ajustar la posición Y
      width: imageWidth,
      height: imageHeight,
    });

    let yOffset = margin + 250;
    addText("REVISTA: ", margin, yOffset, fontSizeNormal);
    addText(
      selectedRevista.value.revista.toUpperCase(),
      imageWidth + 10,
      yOffset,
      fontSizeNormal
    );

    yOffset += 20;
    addText(
      `AÑO DE INICIO: ${selectedRevista.value.anio_inicial.toString()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `ÁREA DE CONOCIMIENTO: ${selectedRevista.value.area_conocimiento.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    addText("RESUMEN", margin, yOffset + lineHeight, fontSizeNormal);
    addText(
      selectedRevista.value.resumen,
      margin + 20,
      yOffset + 2 * lineHeight,
      fontSizeNormal
    );

    // Sección 3: DEPÓSITO LEGAL
    yOffset += 80;
    addText(
      `DEPÓSITO LEGAL IMPRESO: ${selectedRevista.value.deposito_legal_impreso.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `DEPÓSITO LEGAL DIGITAL: ${selectedRevista.value.deposito_legal_digital.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `ISSN IMPRESO: ${selectedRevista.value.issn_impreso.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `ISSN DIGITAL: ${selectedRevista.value.issn_digital.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `PÁGINA WEB: ${selectedRevista.value.url}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `CORREO REVISTA: ${selectedRevista.value.correo_revista}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `PERIODICIDAD: ${selectedRevista.value.periodicidad.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `FORMATO: ${selectedRevista.value.formato.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `CIUDAD: ${selectedRevista.value.ciudad.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `ESTADO: ${selectedRevista.value.estado.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `DIRECCIÓN: ${selectedRevista.value.direccion.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `TELÉFONO: ${selectedRevista.value.telefono.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `EDITORIAL: ${selectedRevista.value.editorial.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `NOMBRE EDITOR: ${selectedRevista.value.apellidos_editor.toUpperCase()}, ${selectedRevista.value.nombres_editor.toUpperCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );
    yOffset += 20;
    addText(
      `CORREO EDITOR: ${selectedRevista.value.correo_editor.toLowerCase()}`,
      margin,
      yOffset,
      fontSizeNormal
    );

    page.drawLine({
      start: { x: margin, y: 50 },
      end: { x: width - margin, y: 50 },
      thickness: 1,
      color: rgb(0, 0, 0),
    });

    addText(
      `República Bolivariana de Venezuela. Ministerio del Poder Popular de Ciencia, Tecnología e Innovación.`,
      margin + 75,
      810,
      fontSizeSmall
    );
    addText(
      `Observatorio Nacional de Ciencia, Tecnología e Innovación. Directorio de Revistas Científicas`,
      margin + 90,
      820,
      fontSizeSmall
    );

    // Guardar el PDF
    const pdfBytes = await pdfDoc.save();
    const blob = new Blob([pdfBytes], { type: "application/pdf" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    Notify.create({
      message: "El PDF ha sido generado exitosamente.",
      color: "positive",
      position: "top",
      timeout: 3000,
    });
    const nombreArchivo = selectedRevista.value.revista.toLowerCase() + ".pdf";
    link.download = nombreArchivo;
    link.click();
  } catch (error) {
    Notify.create({
      message: "Ha ocurrido un error al generar el PDF.",
      color: "negative",
      position: "top",
      timeout: 3000,
    });
    console.error("Error al generar el PDF:", error);
  } finally {
    // Desactivar el spinner
    loading.value = false;
  }
};
</script>
<style scoped>
.my-card {
  width: 100%;
  max-width: 300px;
  cursor: pointer; /* Cambia el cursor a una mano */
}
.dialog-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  backdrop-filter: blur(5px); /* Efecto de blur */
  z-index: 6000; /* Asegura que el fondo esté detrás del diálogo */
}
.custom-dialog {
  width: 100%; /* Ancho del diálogo cuando no está maximizado */
  max-width: 1200px; /* Ancho máximo cuando no está maximizado */
  margin: auto; /* Centrar el diálogo */
  position: relative;
  z-index: 7000; /* Asegura que el diálogo esté por encima del backdrop */
  border-radius: 10px !important; /* Bordes curvos */
  overflow: hidden; /* Evita desbordamientos */
  display: flex;
  flex-direction: column;
}
.q-dialog__inner--maximized .custom-dialog {
  width: 100% !important; /* Ocupa todo el ancho */
  height: 100% !important; /* Ocupa todo el alto */
  max-width: none !important; /* Sin límite de ancho */
  border-radius: 0 !important; /* Sin bordes redondeados */
  margin: 0 !important; /* Sin margen */
}
.scrollable-content {
  height: 100%;
  flex: 1;
  overflow-y: auto; /* Habilita el scroll vertical */
}
.q-dialog__inner--maximized .scrollable-content {
  max-height: 100vh;
  height: calc(
    100vh - 64px
  ); /* Altura de la ventana menos la altura del toolbar */
}
@media (max-width: 599px) and (orientation: portrait) {
  .custom-dialog {
    max-height: 45%; /* Pantalla pequeña vertical */
    border-radius: 5px !important; /* Bordes más pequeños en pantallas pequeñas */
  }
}
@media (min-width: 600px) {
  .custom-dialog {
    max-height: 100%; /* Pantalla mediana o superior */
    border-radius: 15px !important; /* Bordes más grandes en pantallas grandes */
  }
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}
.portada-img {
  height: 200px; /* Altura fija para la imagen */
  object-fit: cover; /* Ajusta la imagen sin distorsionar */
}
/* Texto responsive en el toolbar */
.text-responsive {
  font-size: 1.2rem; /* Tamaño base */
}
/* MEDIA QUERYS */
@media (max-width: 599px) {
  .text-responsive {
    font-size: 1rem; /* Tamaño más pequeño en pantallas pequeñas */
  }
}
@media (max-width: 399px) {
  .text-responsive {
    font-size: 0.9rem; /* Tamaño aún más pequeño en pantallas muy pequeñas */
  }
}
/* Estilos para el contenido desplazable */
@media (max-width: 599px) and (orientation: portrait) {
  .scrollable-content {
    max-height: 70vh; /* Altura máxima en pantallas pequeñas verticales */
  }
}
@media (min-width: 600px) {
  .scrollable-content {
    max-height: 65vh; /*Altura máxima en pantallas medianas o superiores*/
  }
}
</style>