import type { PropType } from 'vue';
import {
  defineComponent,
  onMounted,
  ref,
  watch,
  computed,
  onBeforeUnmount,
  nextTick,
} from 'vue';
import { tools } from '@tools';
import { useUserStore } from '@store/UserStore';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { useGlobalStore } from '@store/globalStore';
import { useProducts } from '@store/Products';
import { useI18n } from 'vue-i18n';
import { toolsext } from '@store/Modules/toolsext';
import { useQuasar } from 'quasar';
import { costanti } from '@costanti';

import { shared_consts } from '@src/common/shared_vuejs';
import { CProductCard } from '@src/components/CProductCard';

import { CMyDialog } from '@src/components/CMyDialog';
import { CTitleBanner } from '@src/components/CTitleBanner';
import { CMySelect } from '@src/components/CMySelect';
import { CBorders } from '@src/components/CBorders';
import { CMyValueDb } from '@src/components/CMyValueDb';
import { CProductTable } from '@src/components/CProductTable';
import { CSearchProduct } from '@src/components/CSearchProduct';
import { CContainerCatalogoCard } from '@src/components/CContainerCatalogoCard';
import { CSelectUserActive } from '@src/components/CSelectUserActive';

import html2pdf from 'html2pdf.js';
import { saveAs } from 'file-saver';

import type {
  IOptCatalogo,
  IDimensioni,
  IFilterCatalogo,
  IMyScheda,
  IProdView,
  IProduct,
  ISchedaSingola,
  ISearchList,
  ICatalog,
  IImg,
  IText,
  ICollana,
  IOptRigenera,
  IOpAndOr,
} from 'model';
import { IMyPage } from 'model';

import { fieldsTable } from '@store/Modules/fieldsTable';
import { useCatalogStore } from '@src/store/CatalogStore';

export default defineComponent({
  name: 'Catalogo',
  components: {
    CContainerCatalogoCard,
    CProductCard,
    CSelectUserActive,
    CMySelect,
    CProductTable,
    CSearchProduct,
    CMyDialog,
    CMyValueDb,
    CTitleBanner,
    CBorders,
  },
  emits: ['update:modelValue', 'updateCatalogo'],
  props: {
    modelValue: {
      type: Object as PropType<IOptCatalogo>,
      required: true,
    },
    idPage: {
      type: String,
      required: false,
      default: '',
    },
  },
  setup(props, { emit }) {
    const userStore = useUserStore();
    const globalStore = useGlobalStore();
    const productStore = useProducts();
    const router = useRouter();
    const $route = useRoute();
    const $q = useQuasar();
    const { t } = useI18n();

    const myCatalog = ref<ICatalog | null>(null as ICatalog);

    const rigeneraLibri = ref(false);

    const search = ref('');

    const showColorPicker = ref(false);
    const optauthors = ref(<any>[]);

    const strout = ref('');

    const pdfContent = ref(null);
    const addnewProd = ref(false);

    const widthpdf = ref('8.88');
    const heightpdf = ref('12.31');
    const compressionepdf = ref('printer');

    const ismounting = ref(false);
    const ratioconvert = ref(0.927);
    const nascondi = ref(false);

    const pdfColumns = [
      { name: 'name', label: 'Nome', field: 'name', align: 'left' },
      {
        name: 'size',
        label: 'Dimensione del file',
        field: 'size',
        align: 'right',
      },
      { name: 'data', label: 'Data', field: 'data', align: 'left' },
      { name: 'azioni', label: 'Azioni', field: 'azioni', align: 'center' },
    ];

    const pdfRows = computed(() => {
      return pdfRowsall.value.filter((row) => row.visible);
    });

    const pdfRowsall = computed(() => [
      {
        visible: true,
        name: 'PDF Generato',
        pdf: myCatalog.value.pdf_generato,
        data: myCatalog.value.data_generato,
        showButton: true,
        buttonLabel: 'Pubblica PDF',
        size: myCatalog.value.pdf_generato_size,
        action: () => pubblicaPDF(false),
      },
      {
        visible: true,
        name: 'PDF Generato (Compresso)',
        pdf: myCatalog.value.pdf_generato_compressed,
        data: myCatalog.value.data_generato,
        showButton: true,
        buttonLabel: 'Pubblica PDF Compresso',
        size: myCatalog.value.pdf_generato_compr_size,
        action: () => pubblicaPDF(true),
      },
      {
        visible: tools.isCollStampa(),
        name: 'PDF Generato Stampa',
        pdf: myCatalog.value.pdf_generato_stampa,
        data: myCatalog.value.data_generato_stampa,
        showButton: true,
        buttonLabel: 'Pubblica PDF Stampa',
        size: myCatalog.value.pdf_generato_stampa_size,
        action: () => pubblicaPDFStampa(false),
      },
      {
        visible: tools.isCollStampa(),
        name: 'PDF Generato Stampa (Compresso)',
        pdf: myCatalog.value.pdf_generato_stampa_compressed,
        data: myCatalog.value.data_generato_stampa,
        showButton: true,
        buttonLabel: 'Pubblica PDF Stampa (Compresso)',
        size: myCatalog.value.pdf_generato_stampa_compr_size,
        action: () => pubblicaPDFStampa(true),
      },
    ]);

    const optDisp = ref([
      { label: 'Tutti', value: costanti.DISP.TUTTI },
      { label: 'Disponibili', value: costanti.DISP.DISPONIBILI },
      { label: 'Esauriti', value: costanti.DISP.ESAURITI },
    ]);

    const optRigeneraModalita = ref([
      { label: 'Sovrascrivi', value: costanti.RIGENERAMOD.SOVRASCRIVI },
      { label: 'Aggiungi solo', value: costanti.RIGENERAMOD.AGGIUNGI_SOLO },
    ]);

    const optStato = ref([
      { label: 'Tutti', value: costanti.STATO.TUTTI },
      { label: 'In Commercio', value: costanti.STATO.IN_COMMERCIO },
      { label: 'Prossima Uscita', value: costanti.STATO.SOLO_PROSSIMA_USCITA },
      { label: 'Prevendita', value: costanti.STATO.PREVENDITA },
      { label: 'Non Vendibile', value: costanti.STATO.NON_VENDIBILE },
    ]);

    const generatinglist = ref(false);

    const optrigenera = ref<IOptRigenera>({
      visibilitaDisp: costanti.DISP.DISPONIBILI,
      stato: costanti.STATO.IN_COMMERCIO,
      rig_mod: costanti.RIGENERAMOD.SOVRASCRIVI,
    });

    const optcatalogo = ref(<IOptCatalogo>{ ...props.modelValue });
    const ispageCatalogata = computed(() => {
      return !!myCatalog.value;
    });

    const filtroStrApplicato = computed(() => {
      return optcatalogo.value.showListaArgomenti
        ? 'un Argomento'
        : optcatalogo.value.showListaCollane
          ? 'una Collana'
          : false;
    });

    const onlyCatalogoPDF = computed(() => {
      return optcatalogo.value.showOnlyCatalogoPDF || $route.query?.hideHeader;
    });

    const mostraTuttiITab = computed(() => {
      return !onlyCatalogoPDF.value;
    });

    const showListaFiltrata = computed(() => {
      return optcatalogo.value.showListaArgomenti
        ? true
        : optcatalogo.value.showListaCollane
          ? true
          : false;
    });

    const getPdfFilename = () => {
      let myfilename = optcatalogo.value.pdf_filename ?? 'catalogo_completo';

      const catalog = myCatalog.value;
      if (catalog) {
        myfilename = productStore.getPathByPage(catalog.idPageAssigned);
      }

      return myfilename;
    };

    function updateCatalogoPadre() {
      // console.log('catalogo.ts PADRE');
      emit('update:modelValue', optcatalogo.value);
      //emit('updateCatalogo', optcatalogo.value);
    }

    // Metodo per aggiornare optcatalogo
    const updateOptCatalogo = <K extends keyof IOptCatalogo>(
      key: K,
      value: IOptCatalogo[K]
    ) => {
      optcatalogo.value[key] = value;
      updateCatalogoPadre();
    };
    // Utile anche per sincronizzare con le modifiche ricevute da props
    watch(
      () => props.modelValue,
      (newVal) => {
        optcatalogo.value = { ...newVal };
      },
      { deep: false }
    );

    watch(
      () => props.modelValue.selectedVersionStampabile,
      async () => {
        if (loadpage.value) {

          //nascondi.value = true;
          arrProducts.value = [];
          console.log('aggiorna... ');
          //await new Promise((resolve) => setTimeout(resolve, 1000));
          //await nextTick();
          calcArrProducts(false);
          updateCatalogoPadre();
          //nascondi.value = false;
        }
      }
    );

    watch(
      optrigenera.value,
      (newVal) => {
        tools.setCookie(
          (showListaFiltrata.value ? 'INC_ES_' : '') + 'VIS_DISP',
          newVal.visibilitaDisp
        );
        tools.setCookie(
          (showListaFiltrata.value ? 'INC_ES_' : '') + 'VIS_STATO',
          newVal.stato
        );
        tools.setCookie(
          (showListaFiltrata.value ? 'INC_ES_' : '') + 'RIG_MOD',
          newVal.rig_mod
        );
        if (showListaFiltrata.value) calcArrProducts();
      },
      { deep: true }
    );

    /*watch(optcatalogo, (newValue) => {
      emit('update:modelValue', newValue);
    }, { deep: true });*/

    const filter = ref(<IFilterCatalogo>{
      author: '',
      publisher: '',
      type: '',
      ageGroup: '',
    });

    const cosa = ref(0);
    const cat = ref('');
    const collana = ref('');
    const idGasSel = ref('');
    const loadpage = ref(false);
    const show_hide = ref(false);

    const mycolumns = ref([]);

    const catalogStore = useCatalogStore();

    const tabvisu = ref('categorie');
    const tabcatalogo = ref('');
    const tabgen = ref('condizioni');

    const searchList = ref([] as ISearchList[]);

    const arrProducts = ref<IProduct[]>([]);
    const arrListaTemporanea = ref<IProduct[]>([]);
    const arrProdToView = ref<IProdView[]>([]);

    const numRecLoaded = ref(0);

    // Create a ref for the component to fix
    const componentToFixRef = ref(<any>null);

    const isFixed = ref(false);

    watch(
      () => tabcatalogo.value,
      () => {
        if (!onlyCatalogoPDF.value) {
          if (tabcatalogo.value === 'lista' || tabcatalogo.value === 'visu')
            tools.setCookie('TAB_CAT', tabcatalogo.value);
        }
      }
    );

    const labelcombo = computed(() => (item: any) => {
      let lab = item.label;
      if (item.showcount) lab += ' (' + valoriopt.value(item, false, false).length + ')';
      return lab;
    });

    const arrLoaded = computed(() => {
      if (arrProducts.value && numRecLoaded.value)
        return arrProducts.value.slice(0, numRecLoaded.value);
      else {
        return [];
      }
    });

    const getTestoIntroduttivo = computed(() => (recscheda: ISchedaSingola) => {
      let testo = recscheda.scheda!.dimensioni.pagina?.testo_up?.contenuto;

      if (recscheda.scheda!.isPagIntro) {
        const catalog = myCatalog.value;
        if (catalog && catalog.descr_introduttiva) {
          // Cerca se la descrizione introduttiva è stata impostata
          testo = catalog.descr_introduttiva;
          let clcol = '';
          let mystyle = '';
          if (catalog?.pagina_introduttiva_sfondo_nero) {
            clcol = `text-white`;
          }
          if (catalog?.backcolor) {
            mystyle = `background-color: ${catalog?.backcolor};`;
          }
          testo =
            `<span class="book-text-up ${clcol}" style="${mystyle}">` + testo + `</span>`;
        }
      }

      return testo;
    });

    function getTextSostituito(testo: IText) {
      const replacements = {
        '{titolo_catalogo}': getTitoloCatalogo() || '',
      };

      // Esegue le sostituzioni
      let result = testo?.contenuto;
      if (result) {
        for (const [key, value] of Object.entries(replacements)) {
          result = result.replace(new RegExp(key, 'g'), value);
        }
      }

      return result;
    }

    const getTitoloPagina = computed(
      () => (product: IProduct, recscheda: ISchedaSingola, fondo?: boolean) => {
        let testo = getTextSostituito(recscheda.scheda!.dimensioni.pagina?.testo_title);

        const catalog = myCatalog.value;

        let clcol = '';

        if (catalog?.pagina_introduttiva_sfondo_nero) {
          clcol = `text-white`;
        }

        let myclass = '';

        if (fondo) myclass = 'book-pagina-title-footer';
        else myclass = 'book-pagina-title';

        testo = `<span class="${myclass} ${clcol}">` + testo + `</span>`;

        return testo;
      }
    );
    // Register the scroll event on component mount
    const handleScroll = () => {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;

      // Set a threshold value based on how much scroll is needed to fix the components
      const threshold = 300;

      // Update the isFixed ref based on the scroll position
      isFixed.value = scrollTop > threshold;
    };

    watch(
      () => cat.value,
      (newval, oldval) => {
        if (showListaFiltrata.value) {
          if (loadpage.value) {
            tools.setCookie(getKeyCatAtLoad(), cat.value.toString());
            filter.value.author = ''; // disattivo il filtro autore
            resetSearch();

            calcArrProducts();
          }
        }
      }
    );
    watch(
      () => collana.value,
      (newval, oldval) => {
        if (showListaFiltrata.value) {
          if (loadpage.value) {
            tools.setCookie(getKeyCollanaAtLoad(), collana.value.toString());
            filter.value.author = ''; // disattivo il filtro autore
            resetSearch();

            calcArrProducts();
          }
        }
      }
    );

    watch(
      () => idGasSel.value,
      (newval, oldval) => {
        calcArrProducts();
      }
    );

    watch(
      () => getSearchText(),
      (newval, oldval) => {
        calcArrProducts();
        if (tools.scrollTop() > 300) {
          tools.scrollToTopValue(300);
        }
      }
    );
    watch(
      () => filter.value.author,
      (newval, oldval) => {
        // Se filtroAuthor attivato, allora evito il filtro per Categoria
        if (filter.value.author) {
          cat.value = ''; // disattivo il filtro categoria
          collana.value = '';
          if (loadpage.value) tools.setCookie(getKeyCatAtLoad(), '');
          resetSearch();
        }

        calcArrProducts();
        if (tools.scrollTop() > 300) {
          tools.scrollToTopValue(300);
        }
      }
    );

    watch(
      () => filter.value.sort_field,
      (newval, oldval) => {
        calcArrProducts();
        if (tools.scrollTop() > 300) {
          tools.scrollToTopValue(300);
        }
      }
    );
    watch(
      () => filter.value.sort_dir,
      (newval, oldval) => {
        calcArrProducts();
        if (tools.scrollTop() > 300) {
          tools.scrollToTopValue(300);
        }
      }
    );

    watch(
      () => cosa.value,
      (newval, oldval) => {
        if (oldval !== 0) {
          tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString());
          if (cosa.value !== shared_consts.PROD.TUTTI) {
            cat.value = '';
            collana.value = '';
            if (loadpage.value) tools.setCookie(getKeyCatAtLoad(), '');
          }
          calcArrProducts();
        }
      }
    );

    watch(
      () => optcatalogo.value.aggiorna,
      (newval, oldval) => {
        // console.log('Aggiorna array...');
        generatearrProdToViewSorted();
      }
    );

    function resetSearch() {
      const mialista = getSearchList();
      if (mialista && mialista.value && tools.existProp(mialista.value, 'name')) {
        mialista.value = null;
      }
      search.value = '';
    }

    function getSearchList() {
      const mylist = searchList.value.find(
        (rec: any) => rec.table === 'products' && rec.key === 'titolo'
      );

      return mylist;
    }

    function getSearchText(): string {
      const lista = getSearchList();
      return lista && lista.value && tools.existProp(lista.value, 'name')
        ? lista.value.name
        : '';
    }

    function getTitoloCatalogo(): string {
      const trovatocatalogo = myCatalog.value;

      return trovatocatalogo ? trovatocatalogo.title : 'Catalogo';
    }
    function getReferentiCatalogo(): string {
      const trovatocatalogo = myCatalog.value;

      if (
        trovatocatalogo &&
        trovatocatalogo.referenti &&
        trovatocatalogo.referenti.length > 0
      ) {
        return trovatocatalogo.referenti.join(', ');
      } else {
        return '[Nessun Referente]';
      }
    }

    function esistePagIntroduttiva(): boolean {
      for (const recscheda of optcatalogo.value.arrSchede!) {
        if (recscheda.scheda?.isPagIntro) {
          return true;
        }
      }
      return false;
    }

    const getImgIntroCatalogo = (scheda: IMyScheda): IImg => {
      const trovatocatalogo = myCatalog.value;

      let imagefile = '';
      let fit = 'cover';

      if (trovatocatalogo && scheda.isPagIntro) {
        const recimg = isStampa.value
          ? trovatocatalogo.img_intro_stampa
          : trovatocatalogo.img_intro;
        if (recimg) {
          imagefile = recimg.imagefile!;
          fit = recimg.fit! || 'cover';
        }
      }

      return { imagefile, fit };
    };

    const getSfondoImgCatalogo = (
      scheda?: IMyScheda | null,
      mypage?: IDimensioni
    ): IImg => {
      const trovatocatalogo = myCatalog.value;

      let imagefile = '';
      let fit = 'cover';

      if (trovatocatalogo) {
        // Cerca prima se c'è un Immagine Introduttiva
        const recimgintro = getImgIntroCatalogo(scheda);
        if (recimgintro.imagefile) {
          imagefile = recimgintro.imagefile!
            ? `url("${tools.getDirUpload() + shared_consts.getDirectoryByTable(shared_consts.TABLES_CATALOG) + '/' + trovatocatalogo._id + '/' + recimgintro.imagefile}")`
            : '';
          fit = recimgintro.fit! || 'cover';
        }

        // Poi cerca se c'è l'immagine di sfondo
        const recimg = isStampa.value
          ? trovatocatalogo.img_bordata_stampa
          : trovatocatalogo.img_bordata!;
        if (!imagefile && recimg) {
          imagefile = recimg.imagefile!;
          fit = recimg.fit! || 'cover';
          imagefile = imagefile
            ? `url("${tools.getDirUpload() + shared_consts.getDirectoryByTable(shared_consts.TABLES_CATALOG) + '/' + trovatocatalogo._id + '/' + imagefile}")`
            : '';
        }
      } else {
      }

      if (!imagefile && scheda) {
        imagefile = scheda.dimensioni?.pagina?.dimensioni?.imgsfondo!.imagefile;
        imagefile = imagefile
          ? `url("${tools.getDirUpload() + costanti.DIR_SCHEDA + imagefile}")`
          : '';
        fit = scheda.dimensioni?.pagina?.dimensioni?.imgsfondo!.fit;
      }
      if (!imagefile && mypage) {
        imagefile = mypage.imgsfondo!.imagefile!;
        imagefile = imagefile
          ? `url("${tools.getDirUpload() + costanti.DIR_CATALOGO + imagefile}")`
          : '';
        fit = mypage.imgsfondo!.fit!;
      }

      if (!imagefile && optcatalogo.value.dimensioni_def.pagina) {
        imagefile = optcatalogo.value.dimensioni_def.pagina.imgsfondo!.imagefile!;
        imagefile = imagefile
          ? `url("${tools.getDirUpload() + costanti.DIR_CATALOGO + imagefile}")`
          : '';
        fit = optcatalogo.value.dimensioni_def.pagina.imgsfondo!.fit!;
      }

      // Se non è stato impostato nessun immagine, allora metto quelli di default
      if (!imagefile) {
        let myimg = costanti.CATALOGHI.PAG_SFONDO_DEFAULT;
        if (scheda.isPagIntro) {
          myimg = costanti.CATALOGHI.PAG_INTRO_DEFAULT;
        }
        // Se non c'è un immagine di sfondo, allora prende quella di default
        imagefile = `url("${tools.getDirUpload() + shared_consts.getDirectoryByTable(shared_consts.TABLES_CATALOG) + '/' + myimg}")`;
      }

      return { imagefile, fit };
    };

    function getIdCollaneDaFiltrare(def_idCollane?: string[]) {
      let idCollane: string[] = [];

      // Cerca se nella lista cataloghi c'è la Collana di questa Pagina !
      const trovatocatalogo = myCatalog.value;

      if (trovatocatalogo) {
        idCollane = trovatocatalogo.idCollane! || [];
      } else {
        idCollane = def_idCollane || [];
      }

      return idCollane;
    }

    function getArgomentiDaFiltrare(def_argomenti?: string[]) {
      let argomenti: string[] = [];

      // Cerca se nella lista cataloghi c'è la Collana di questa Pagina !
      const trovatocatalogo = myCatalog.value;

      if (trovatocatalogo) {
        argomenti = trovatocatalogo.argomenti! || [];
      } else {
        if (def_argomenti && def_argomenti.length > 0) {
          argomenti = def_argomenti;
        } else {
          argomenti = [];
        }
      }

      return argomenti;
    }

    function getidTipoFormatoDaFiltrare(def_idTipoFormato?: number[]) {
      let idTipoFormato: number[] = [];

      // Cerca se nella lista cataloghi c'è la Collana di questa Pagina !
      const trovatocatalogo = myCatalog.value;

      if (trovatocatalogo) {
        idTipoFormato = trovatocatalogo.idTipoFormato! || [];
      } else {
        if (def_idTipoFormato && def_idTipoFormato.length > 0) {
          idTipoFormato = def_idTipoFormato;
        } else {
          idTipoFormato = [];
        }
      }

      return idTipoFormato;
    }

    function getEditoreDaFiltrare(def_editori?: string[]) {
      let editore: string[] = [];

      // Cerca se nella lista cataloghi c'è la Collana di questa Pagina !
      const trovatocatalogo = myCatalog.value;

      if (trovatocatalogo) {
        editore = trovatocatalogo.editore! || [];
      } else {
        editore = def_editori || [];
      }

      return editore;
    }

    function getEditore_escludiDaFiltrare(def_editori?: string[]) {
      let editore: string[] = [];

      // Cerca se nella lista cataloghi c'è la Collana di questa Pagina !
      const trovatocatalogo = myCatalog.value;

      if (trovatocatalogo) {
        editore = trovatocatalogo.editore_escludi! || [];
      } else {
        editore = def_editori || [];
      }

      return editore;
    }

    function filterProducts(
      products: IProduct[],
      searchtext: string | string[],
      filtroAuthor: string,
      filtroProductTypes: number[],
      filtroExcludeProductTypes: number[],
      filtroidTipologie: number[],
      filtroidTipoFormato: number[],
      editore: string[],
      editore_escludi: string[],
      idCollane: string[],
      arrargomstr: any[],
      op_andor: IOpAndOr,
      catstr: string,
      collanastr: string,
      gasselstr: string,
      cosaValue: any,
      sortField?: string,
      sortDir?: number
    ): IProduct[] {
      const lowerSearchTexts = Array.isArray(searchtext)
        ? searchtext.map((text: string) =>
            text
              .toLowerCase()
              .trim()
              .replace(/[-@:=]/g, '')
          )
        : [
            searchtext
              .toLowerCase()
              .trim()
              .replace(/[-@:=]/g, ''),
          ];

      const boolfiltroVuotoProductTypes =
        filtroProductTypes.length === 0 ||
        (filtroProductTypes.length === 1 && filtroProductTypes[0] === 0);
      const boolfiltroVuotoExcludeProductTypes = filtroExcludeProductTypes.length === 0;
      const boolfiltroVuotoidTipologie = filtroidTipologie.length === 0;
      const boolfiltroVuotoidTipoFormato = filtroidTipoFormato.length === 0;
      const boolfiltroVuotoEditore = editore.length === 0;
      const boolfiltroVuotoEditore_escludi = editore_escludi.length === 0;
      const boolfiltroVuotoCollane = idCollane.length === 0;
      const boolfiltroVuotoArgomenti = arrargomstr.length === 0;

      const se_tutti_veri = op_andor.condition_andor === costanti.OP_ANDOR.OP_AND;

      const trovatocatalogo = myCatalog.value;

      if (
        boolfiltroVuotoProductTypes &&
        boolfiltroVuotoExcludeProductTypes &&
        boolfiltroVuotoidTipologie &&
        boolfiltroVuotoidTipoFormato &&
        boolfiltroVuotoEditore &&
        boolfiltroVuotoEditore_escludi &&
        boolfiltroVuotoCollane &&
        boolfiltroVuotoArgomenti &&
        catstr === '' &&
        collanastr === ''
      ) {
        // Nessun filtro selezionato, pertanto non mostrare niente!
        return [];
      }

      const arrris = products
        .filter((product: IProduct) => {
          if (!product || !product.productInfo) {
            console.error('product or product.productInfo is null');
            return false;
          }

          // il prodotto dev'essere disponibile
          //if (!productStore.isPubblicato(product.productInfo))
          //  return false

          if (
            !(
              optrigenera.value.visibilitaDisp === costanti.DISP.TUTTI ||
              (optrigenera.value.visibilitaDisp === costanti.DISP.ESAURITI &&
                productStore.isEsaurito(product)) ||
              (optrigenera.value.visibilitaDisp === costanti.DISP.DISPONIBILI &&
                (productStore.isDisponibile(product) ||
                  productStore.isPrevendita(product.productInfo)))
            )
          ) {
            return false;
          }
          if (
            !(
              optrigenera.value.stato === costanti.STATO.TUTTI ||
              (optrigenera.value.stato === costanti.STATO.IN_COMMERCIO &&
                productStore.isPubblicato(product.productInfo)) ||
              (optrigenera.value.stato === costanti.STATO.SOLO_PROSSIMA_USCITA &&
                productStore.isProssimaUscita(product.productInfo)) ||
              (optrigenera.value.stato === costanti.STATO.PREVENDITA &&
                productStore.isPrevendita(product.productInfo)) ||
              (optrigenera.value.stato === costanti.STATO.NON_VENDIBILE &&
                productStore.isNonVendibile(product.productInfo))
            )
          ) {
            return false;
          }

          const lowerName = (product.productInfo.name || '').toLowerCase();
          const lowerCode = (product.productInfo.code || '').toLowerCase();

          const boolfiltroVuotoCat = product.productInfo.idCatProds?.length === 0;

          // Filtri per argomenti e categorie
          let hasCategoria = se_tutti_veri;
          let hasArgomentiCat = se_tutti_veri;
          if (arrargomstr && arrargomstr.length > 0) {
            hasArgomentiCat = (product.productInfo.idCatProds || []).some((idCat: any) =>
              arrargomstr.includes(idCat)
            );
            hasCategoria = se_tutti_veri;
          } else {
            if (optcatalogo.value.showListaArgomenti) {
              const isCatVuoto =
                boolfiltroVuotoCat || (product.productInfo.idCatProds || []).length === 0;
              const isCatSenzaArgomento = catstr === costanti.NO_CATEGORY;
              const isCatCorretto =
                !catstr || (product.productInfo.idCatProds || []).includes(catstr);
              hasCategoria = isCatSenzaArgomento && isCatVuoto ? true : isCatCorretto;

              hasArgomentiCat = boolfiltroVuotoArgomenti
                ? se_tutti_veri
                : hasArgomentiCat;
            }
          }

          let hasCollana = se_tutti_veri;
          let hasCollanaStr = se_tutti_veri;
          if (idCollane && idCollane.length > 0) {
            hasCollanaStr = idCollane.includes(product.productInfo.idCollana);
            hasCollana = se_tutti_veri;
          } else {
            if (optcatalogo.value.showListaCollane) {
              const isCollanaVuoto =
                boolfiltroVuotoCollane ||
                (product.productInfo.idCollana || []).length === 0;
              const isCollanaSenzaColl = collanastr === costanti.NO_CATEGORY;
              const isCollanaCorretto =
                !collanastr || product.productInfo.idCollana === collanastr;
              hasCollana =
                isCollanaSenzaColl && isCollanaVuoto ? true : isCollanaCorretto;

              hasCollanaStr = boolfiltroVuotoCollane ? se_tutti_veri : hasCollanaStr;
            }
          }
          // Filtri per collana
          /*
          const hasCollana = boolfiltroVuotoCollane
            ? se_tutti_veri
            : (idCollane || []).includes(product.productInfo.idCollana);
*/

          // Filtri per autore
          const hasAuthor =
            !filtroAuthor || (product.productInfo.idAuthors || []).includes(filtroAuthor);

          // Filtri per tipi di prodotto
          const hasProductTypes = boolfiltroVuotoProductTypes
            ? true
            : (product.productInfo.productTypes || []).some((item: any) =>
                filtroProductTypes.includes(item)
              );

          // Filtri per esclusione di tipi di prodotto
          const hasExcludeProductTypes = boolfiltroVuotoExcludeProductTypes
            ? false
            : (product.productInfo.productTypes || []).every((item: any) =>
                filtroExcludeProductTypes.includes(item)
              );

          const hasidTipologie = boolfiltroVuotoidTipologie
            ? true
            : filtroidTipologie.includes(product.arrvariazioni?.[0].idTipologia);

          const hasidTipoFormato = boolfiltroVuotoidTipoFormato
            ? true
            : filtroidTipoFormato.includes(product.arrvariazioni?.[0].idTipoFormato);

          // Filtri per editore
          const hasPublished = boolfiltroVuotoEditore
            ? se_tutti_veri
            : editore.includes(product.productInfo.idPublisher);

          // Filtri per editore_escludi
          const hasPublished_escludi = boolfiltroVuotoEditore_escludi
            ? se_tutti_veri
            : !editore_escludi.includes(product.productInfo.idPublisher);

          // Filtri per GAS
          const productgassel =
            !gasselstr ||
            (cosaValue === shared_consts.PROD.GAS && product.idGasordine === gasselstr);

          // Filtri per testo di ricerca
          const searchMatch =
            lowerSearchTexts.length === 0 ||
            lowerSearchTexts.some((searchTerm: string) => {
              const codeMatch = new RegExp(`\\b${searchTerm}\\b`, 'i').test(lowerCode);
              const allWordsPresent = searchTerm
                .split(/\s+/)
                .every((word: string) =>
                  new RegExp(`\\b${word}\\b`, 'i').test(lowerName)
                );
              return codeMatch || allWordsPresent;
            });

          // Funzione che valuta un gruppo in base a OP_AND o OP_OR

          // Raccolgo tutti i gruppi attivi
          const filtri = [
            hasArgomentiCat,
            hasCategoria,
            hasCollana,
            hasCollanaStr,
            hasPublished,
            hasPublished_escludi,
          ];

          // Decido se combinare in AND o OR sulla base della scelta globale
          let risult =
            searchMatch &&
            hasAuthor &&
            productgassel &&
            hasidTipologie &&
            hasidTipoFormato;

          if (op_andor.condition_andor === costanti.OP_ANDOR.OP_AND) {
            risult = risult && filtri.every(Boolean); // Tutti i gruppi devono essere veri
          } else {
            risult = risult && filtri.some(Boolean);
          }

          return risult;

          // && !hasExcludeProductTypes
        })
        .sort((a, b) =>
          getProductsSorted([a, b], sortField, sortDir)[0] === a ? -1 : 1
        );

      // console.log('   sortField=' + sortField);
      // console.log('   sortDir=' + sortDir);
      // console.log('   Filtro=' + arrargomstr);
      // console.log('   idCollane=' + idCollane);
      // console.log('PRODOTTI FILTRATI:', arrris.length);

      return arrris;
    }

    async function calcArrProducts(generalista?: boolean, salva_listatemp?: boolean) {
      // console.log('calcArrProducts (generalista=' + generalista + ')');

      if (generalista) {
        // Devono esistere tutti i prodotti
        await productStore.loadProducts(true);
      }

      if (!loadpage.value) return;

      generatinglist.value = true;

      const searchtext = getSearchText();
      let arrprod = [];
      const filtroAuthor = filter.value.author || '';
      const filtroProductTypes = optcatalogo.value.productTypes || [0];
      const filtroExcludeProductTypes = optcatalogo.value.excludeproductTypes || [0];
      const filtroidTipologie = optcatalogo.value.idTipologie || [];
      const filtroidTipoFormato = getidTipoFormatoDaFiltrare(
        optcatalogo.value.idTipoFormato
      );
      const editore = getEditoreDaFiltrare(optcatalogo.value.editore);
      const editore_escludi = getEditore_escludiDaFiltrare(
        optcatalogo.value.editore_escludi
      );
      const filtroPublishers = editore || [];
      const filtroPublishers_escludi = editore_escludi || [];
      const idCollane = getIdCollaneDaFiltrare(optcatalogo.value.idCollane);
      const filtroCollane = idCollane || [];

      const arrargomstr =
        optcatalogo.value.argomenti && optcatalogo.value.argomenti.length > 0
          ? getArgomentiDaFiltrare(optcatalogo.value.argomenti)
          : getArgomentiDaFiltrare(cat.value ? [cat.value] : []);

      const catstr = cat.value || '';
      const collanastr = collana.value || '';

      const gasselstr = cosa.value === shared_consts.PROD.GAS ? idGasSel.value || '' : '';

      let salva = false;
      // Se nel catalogo è stato già generato, allora gli passo quello.
      const trovatocatalogo = myCatalog.value;

      // if (editore) console.log('FILTRO editore', editore);

      if (showListaFiltrata.value) {
        generalista = true;
      }

      /*if (myCatalog.value.lista_prodotti.length === 0) {
        generalista = true
      }*/

      let op_andor: IOpAndOr = {
        condition_andor:
          trovatocatalogo?.condition_andor !== undefined
            ? trovatocatalogo.condition_andor
            : costanti.OP_ANDOR.OP_AND,
      };

      if (!generalista && myCatalog.value?.lista_prodotti?.length > 0) {
        arrprod = myCatalog.value.lista_prodotti;
      } else {
        arrprod = productStore.getProducts(cosa.value);
        arrprod = filterProducts(
          arrprod,
          searchtext,
          filtroAuthor,
          filtroProductTypes,
          filtroExcludeProductTypes,
          filtroidTipologie,
          filtroidTipoFormato,
          filtroPublishers,
          filtroPublishers_escludi,
          filtroCollane,
          arrargomstr,
          op_andor,
          catstr,
          collanastr,
          gasselstr,
          cosa.value,
          filter.value.sort_field,
          filter.value.sort_dir
        );

        salva = true;
      }

      if (salva_listatemp) {
        arrListaTemporanea.value = arrprod;
      } else {
        arrProducts.value = arrprod;

        optcatalogo.value = productStore.populateDataWithlinkIdTemplate(
          optcatalogo.value
        );

        // Ordina la lista
        generatearrProdToViewSorted(!generalista, salva, !showListaFiltrata.value);
        loaddata();

        if (generalista) {
          const catalog = myCatalog.value;
          if (catalog && !showListaFiltrata.value) {
            catalog.data_lista_generata = tools.getDateNow();
            catalog.username_lista_generata = userStore.my.username;
            await saveCatalog();
          }
        }
      }

      generatinglist.value = false;
      if (!salva_listatemp) {
        rigeneraLibri.value = false;
      } else {
        tabgen.value = 'generato';
      }
    }

    async function lista_Aggiornata() {
      myCatalog.value.data_lista_updated = tools.getDateNow();
      myCatalog.value.username_lista_updated = userStore.my.username;
      await saveCatalog();
    }

    async function saveCatalog() {
      const catalog = myCatalog.value;
      const mydata = {
        table: 'catalogs',
        data: catalog,
      };

      await globalStore.saveTable(mydata);
    }

    async function generaListaLibri() {
      // chiedi prima "Sei sicuro di rigenerare il catalogo?"
      let risposta_si = false;

      let msg = 'Sicuri di RIGENERARE Sovrascrivendo questa lista di libri ?';

      if (optrigenera.value.rig_mod == costanti.RIGENERAMOD.AGGIUNGI_SOLO) {
        msg = 'Aggiungere i libri di questa nuova generazione ?';
      }

      $q.dialog({
        title: 'Rigenera lista',
        message: msg,
        cancel: true,
        persistent: false,
      }).onOk(async () => {
        $q.loading.show({
          message: `Rigenera lista in corso, attendere ...`,
        });

        await calcArrProducts(true);
        $q.loading.hide();
      });
    }

    async function generaListaTempLibri() {
      // chiedi prima "Sei sicuro di rigenerare il catalogo?"
      let risposta_si = false;

      $q.loading.show({
        message: `Mostra lista, attendere ...`,
      });

      await calcArrProducts(true, true);

      $q.loading.hide();
    }

    function reSortList() {
      let risposta_si = false;

      let msg = 'Sicuri di Riordinare questa lista ?';

      $q.dialog({
        title: 'Riordina lista',
        message: msg,
        cancel: true,
        persistent: false,
      }).onOk(() => {
        calcArrProducts(false);
      });
    }

    function arraysEqual(arr1, arr2) {
      return (
        Array.isArray(arr1) &&
        Array.isArray(arr2) &&
        arr1.length === arr2.length &&
        arr1.every((val, index) => val === arr2[index])
      );
    }

    function checkIfFiltriDiversi(scheda: IMyScheda, schedaprec: IMyScheda) {
      if (schedaprec === null) return true;

      const isDifferent =
        !arraysEqual(scheda.productTypes, schedaprec?.productTypes) ||
        !arraysEqual(scheda.excludeproductTypes, schedaprec?.excludeproductTypes) ||
        !arraysEqual(scheda.idTipologie, schedaprec?.idTipologie) ||
        !arraysEqual(scheda.idTipoFormato, schedaprec?.idTipoFormato) ||
        !arraysEqual(scheda.editore, schedaprec?.editore) ||
        !arraysEqual(scheda.editore_escludi, schedaprec?.editore_escludi) ||
        !arraysEqual(scheda.idCollane, schedaprec?.idCollane);
      return isDifferent;
    }

    function getProductsFilteredByScheda(scheda: IMyScheda): IProduct[] {
      let arrprod = [];

      const filtroAuthor = filter.value.author || '';
      const filtroProductTypes = scheda.productTypes || [0];
      const filtroExcludeProductTypes = scheda.excludeproductTypes || [0];
      const filtroidTipologie = scheda.idTipologie || [];
      const filtroidTipoFormato = getidTipoFormatoDaFiltrare(scheda.idTipoFormato);
      const editore = getEditoreDaFiltrare(scheda.editore);
      const editore_escludi = getEditore_escludiDaFiltrare(scheda.editore_escludi);
      const filtroPublishers = editore || [];
      const filtroPublishers_escludi = editore_escludi || [];
      const idCollane = getIdCollaneDaFiltrare(scheda.idCollane);
      const filtroCollane = idCollane || [];
      const arrargomstr =
        optcatalogo.value.argomenti && optcatalogo.value.argomenti.length > 0
          ? getArgomentiDaFiltrare(optcatalogo.value.argomenti)
          : [];
      const catstr = cat.value || '';
      const collanastr = collana.value || '';
      const gasselstr = cosa.value === shared_consts.PROD.GAS ? idGasSel.value || '' : '';

      const trovatocatalogo = myCatalog.value;

      let op_andor: IOpAndOr = {
        condition_andor: trovatocatalogo?.condition_andor ?? costanti.OP_ANDOR.OP_AND,
      };

      if (myCatalog.value?.lista_prodotti?.length > 0) {
        arrprod = myCatalog.value.lista_prodotti;
      } else {
        arrprod = productStore.getProducts(cosa.value);

        arrprod = filterProducts(
          arrprod,
          scheda.arrProdottiSpeciali || [],
          filtroAuthor,
          filtroProductTypes,
          filtroExcludeProductTypes,
          filtroidTipologie,
          filtroidTipoFormato,
          filtroPublishers,
          filtroPublishers_escludi,
          filtroCollane,
          arrargomstr,
          op_andor,
          catstr,
          collanastr,
          gasselstr,
          cosa.value,
          scheda?.sort_field,
          scheda?.sort_dir
        );
      }

      return arrprod;
    }

    /**
     * Funzione che ordina un array di prodotti in base a un campo specifico
     * @param arrprod array di prodotti da ordinare
     * @param sort_field campo su cui effettuare l'ordinamento
     * @param sort_dir direzione dell'ordinamento (1 asc, -1 desc)
     * @returns array di prodotti ordinati
     */
    function getProductsSorted(
      arrprod: IProduct[],
      sort_field: string,
      sort_dir: number
    ): IProduct[] {
      if (sort_field) {
        // console.log('--- Primi 10 elementi INIZIALI:');
        /*arrprod.slice(0, 15).forEach((product, index) => {
          console.log(`${index + 1}. ${product.productInfo?.name} (${product.productInfo?.date_pub})`);
        });*/

        // Crea una copia dell'array per non modificare l'originale
        const sortedArr = [...arrprod].sort((a: IProduct, b: IProduct) => {
          const valA =
            a.productInfo?.[sort_field] ??
            (typeof a.productInfo?.[sort_field] === 'number' ? 0 : '');
          const valB =
            b.productInfo?.[sort_field] ??
            (typeof b.productInfo?.[sort_field] === 'number' ? 0 : '');

          // Ordinamento per data
          if (valA instanceof Date && valB instanceof Date) {
            return sort_dir === 1
              ? valA.getTime() - valB.getTime()
              : valB.getTime() - valA.getTime();
          }

          // Ordinamento per numeri
          if (typeof valA === 'number' && typeof valB === 'number') {
            return sort_dir === 1 ? valA - valB : valB - valA;
          }

          // Ordinamento per stringhe o altri tipi
          const compA = valA.toString().toLowerCase();
          const compB = valB.toString().toLowerCase();
          return sort_dir === 1 ? compA.localeCompare(compB) : compB.localeCompare(compA);
        });

        // logga i primi N elementi, mostrando il nome del prodotto (productInfo.name e la data di pibblicazione : productinfo.date_pub
        if (sortedArr.length > 0) {
          // console.log('Primi 15 elementi ordinati: ***** ');
          /*sortedArr.slice(0, 15).forEach((product, index) => {
            console.log(`${index + 1}. ${product.productInfo?.name} (${product.productInfo?.date_pub})`);
          });*/
        } else {
          // console.log('Nessun prodotto trovato.');
        }

        return sortedArr;
      }

      return arrprod;
    }

    function addNextProductToTheView(arrproductfiltrati: IProduct[], indprod: number) {
      try {
        while (indprod < arrproductfiltrati.length) {
          const rectrovato = arrProdToView.value.find(
            (prodview: IProdView) => prodview.id === arrproductfiltrati[indprod]._id
          );

          if (!rectrovato) {
            const myrec = arrproductfiltrati[indprod];
            arrProdToView.value.push({ id: myrec._id });
            return { myrec, added: true, indprod: indprod + 1 };
          }

          indprod++;
        }

        return { end: true };
      } catch (e) {
        console.error(e);
        return { rec: null, indprod };
      }
    }

    function getProdBySchedaRigaCol(
      recscheda: ISchedaSingola,
      pagina: number,
      riga: number,
      col: number
    ) {
      try {
        return recscheda.arrProdToShow![pagina][riga][col];
      } catch (e) {
        return null;
      }
    }

    function generatearrProdToViewSorted(
      usaprodottiSalvati?: boolean,
      salva?: boolean,
      salvasudb?: boolean
    ) {
      /*console.log(
        'generatearrProdToViewSorted... usaprodottiSalvati=',
        usaprodottiSalvati,
        ' salva=',
        salva
      );*/

      try {
        // Svuota
        arrProdToView.value = [];

        const trovatocatalogo = myCatalog.value;

        let arrGeneraleProdotti: IProduct[] = [];

        if (usaprodottiSalvati && myCatalog.value?.lista_prodotti?.length > 0) {
        } else {
          arrGeneraleProdotti = arrProducts.value;
        }

        let indprod = 0;
        const indprodGenerale = 0;

        let indscheda = -1;

        let indtotale = 0;

        let arrprod = [];

        let schedaprec = null;

        for (const recscheda of optcatalogo.value.arrSchede!) {
          indscheda++;
          if (recscheda && recscheda.scheda) {
            const schedePerRiga = recscheda.scheda.numschede_perRiga || 1;
            const schedePerCol = recscheda.scheda.numschede_perCol || 1;
            const schedePerPagina = schedePerRiga * schedePerCol;

            let arrProdFiltrati: IProduct[] = [];

            if (usaprodottiSalvati && myCatalog.value?.lista_prodotti?.length > 0) {
              arrProdFiltrati = myCatalog.value.lista_prodotti;
            } else {
              if (recscheda.scheda.productTypes!.length > 0) {
                // Filtra i prodotti in base ai filtri impostati !
                if (checkIfFiltriDiversi(recscheda.scheda, schedaprec) || indprod === 0) {
                  arrProdFiltrati = getProductsFilteredByScheda(recscheda.scheda);
                  schedaprec = { ...recscheda.scheda };
                  indprod = 0;
                }
              } else {
                let sort_field =
                  recscheda.scheda.sort_field! || optcatalogo.value.sort_field;
                let sort_dir = recscheda.scheda.sort_dir || optcatalogo.value.sort_dir;
                if (sort_field) {
                  arrProdFiltrati = getProductsSorted(
                    arrGeneraleProdotti,
                    sort_field,
                    sort_dir
                  );
                  indprod = 0;
                } else {
                  indprod = indprodGenerale;
                  arrProdFiltrati = arrGeneraleProdotti;
                }
              }
            }

            let indadded = 0;
            recscheda.arrProdToShow = [];

            for (let pagina = 0; pagina < 600; pagina++) {
              indadded = 0;
              let lastresultend = false;
              if (!recscheda.arrProdToShow[pagina]) {
                recscheda.arrProdToShow[pagina] = [];
              }

              for (let giro = 0; giro < schedePerPagina; giro++) {
                // Aggiunge il prossimo prodotto che non è stato ancora inserito
                const result = addNextProductToTheView(arrProdFiltrati, indprod);
                if (result.end) {
                  lastresultend = true;
                  break; // Esci dal ciclo se non ci sono più prodotti disponibili
                } else {
                  if (result.indprod) indprod = result.indprod; // Aggiorna indprod per il prossimo giro
                  if (result.myrec) {
                    const riga = Math.floor(indadded / schedePerCol);
                    const col = indadded % schedePerCol;

                    if (!recscheda.arrProdToShow[pagina][riga]) {
                      recscheda.arrProdToShow[pagina][riga] = [];
                    }

                    arrprod.push(result.myrec);

                    recscheda.arrProdToShow[pagina][riga][col] = result.myrec;

                    indadded++;
                    indtotale++;
                    // console.log('indadded', indadded)
                    if (optcatalogo.value.maxnumlibri! > 0) {
                      if (indtotale > optcatalogo.value.maxnumlibri!) break;
                    } else {
                      if (indscheda > 10000) {
                        lastresultend = true;
                        break;
                      }
                    }
                  }
                }
              }
              if (lastresultend) break; // Esci dal ciclo se non ci sono più prodotti disponibili

              if (recscheda.numPagineMax! > 0) {
                if (pagina + 1 >= recscheda.numPagineMax!) break; // fine pagine
              }
            }

            // console.log('*** arrProdToShow', recscheda.arrProdToShow)
          }

          // console.log('Fine Generazione')
        }

        // console.log('   FINE - generatearrProdToViewSorted !')

        if (!usaprodottiSalvati && salva) {
          if (trovatocatalogo) {
            if (optrigenera.value.rig_mod === costanti.RIGENERAMOD.AGGIUNGI_SOLO) {
              // aggiungi solo i record che non sono presenti su lista_prodotti
              trovatocatalogo.lista_prodotti = trovatocatalogo.lista_prodotti.filter(
                (p) => !arrprod.some((ap) => ap._id === p._id)
              );
              trovatocatalogo.lista_prodotti.push(
                ...arrprod.filter(
                  (ap) => !trovatocatalogo.lista_prodotti.some((p) => p._id === ap._id)
                )
              );
            } else {
              trovatocatalogo.lista_prodotti = arrprod;
            }

            if (salvasudb) {
              salvaListaProdotti(false);
            }
          }
        }
      } catch (e) {
        console.error('Err', e);
      }

      // console.log('Fine...')
    }

    function salvaListaProdotti(ricarica: boolean) {
      // Estrai solo gli ID dei prodotti filtrati
      const myarr = [...myCatalog.value.lista_prodotti];
      const productIds = myarr.map((product) => product._id);

      let mydata = {
        data_lista_updated: tools.getDateNow(),
        username_lista_updated: userStore.my.username,
        lista_prodotti: productIds,
      };

      // Salva gli ID dei prodotti nel catalogo
      tools.saveFieldToServer(
        $q,
        'catalogs',
        myCatalog.value._id,
        mydata,
        !showListaFiltrata.value,
        false
      );

      if (ricarica) {
        generatearrProdToViewSorted(true, false);
      }

      // lista_Aggiornata();
    }

    /*function getProducts() {
      let arrprod = productStore.getProducts(cosa.value)
      if (!search.value) {
        return arrprod
      }

      let lowerSearchText = search.value.toLowerCase();
      let catstr = cat.value;

      return arrprod.filter((product: IProduct) => {
        let lowerName = product.productInfo.name!.toLowerCase();
        const hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
        return (product.productInfo.code!.includes(search.value) || lowerName.includes(lowerSearchText)) && hasCategoria
      });
    }*/

    function getKeyCatAtLoad() {
      return tools.COOK_CATEGORIA + (showListaFiltrata.value ? '_LA' : '');
    }
    function getKeyCollanaAtLoad() {
      return tools.COOK_COLLANA + (showListaFiltrata.value ? '_LA' : '');
    }

    const isStampa = computed(() => {
      return (
        optcatalogo.value.selectedVersionStampabile === shared_consts.PREPARA_PDF.STAMPA
      );
    });

    async function mounted() {
      // console.log('mounted Catalogo')
      let mycat = null;

      let instampa = false;

      instampa = globalStore.inStampa;

      if (optcatalogo.value.idCatalogSel) {
        // controlla se è stato passato l'id dalla pagina:
        let idcatsel = '';

        if ($route.query.id) {
          idcatsel = $route.query.id as string;
        } else {
          idcatsel = optcatalogo.value.idCatalogSel;
        }

        mycat = catalogStore.getCatalogById(idcatsel);
      } else {
        mycat = catalogStore.getCatalogByIdPageAssigned(props.idPage) || null;
      }

      // console.log('instampa... ', instampa)

      if (mycat && !mycat.lista_prodotti) {
        mycat = await catalogStore.fetchCatalogById(mycat._id);
      }
      myCatalog.value = mycat;

      ismounting.value = true;
      generatinglist.value = true;

      if (optcatalogo.value.showListaArgomenti)
        cat.value = tools.getCookie(getKeyCatAtLoad(), '');

      if (optcatalogo.value.showListaCollane)
        collana.value = tools.getCookie(getKeyCollanaAtLoad(), '');

      optcatalogo.value.selectedVersionStampabile = shared_consts.PREPARA_PDF.WEB;

      if (onlyCatalogoPDF.value) {
        tabcatalogo.value = 'visu';
      } else {
        if (myCatalog.value) {
          tabcatalogo.value = tools.getCookie('TAB_CAT', 'lista');
        } else {
          tabcatalogo.value = 'visu';
        }
      }

      // Se la lista è vuota allora mostra il Tab Lista:
      if (myCatalog.value && !showListaFiltrata.value) {
        if (myCatalog.value.lista_prodotti.length === 0) {
          tabcatalogo.value = 'lista';
        }
      }

      optrigenera.value.visibilitaDisp = tools.getCookie(
        (showListaFiltrata.value ? 'INC_ES_' : '') + 'VIS_DISP',
        costanti.DISP.DISPONIBILI
      );
      if (!showListaFiltrata.value)
        optrigenera.value.rig_mod = tools.getCookie(
          (showListaFiltrata.value ? 'INC_ES_' : '') + 'RIG_MOD',
          costanti.RIGENERAMOD.AGGIUNGI_SOLO
        );
      optrigenera.value.stato = tools.getCookie(
        (showListaFiltrata.value ? 'INC_ES_' : '') + 'VIS_STATO',
        costanti.STATO.IN_COMMERCIO
      );

      loadpage.value = false;
      if (showListaFiltrata.value || !myCatalog.value) {
        // Carica tutti i prodotti
        await productStore.loadProducts(true);
      } else {
        /*if (myCatalog.value && props.idPage) {
          myCatalog.value.lista_prodotti = await catalogStore.loadProductsOnlyByIdPageCatalog(props.idPage);
        }*/
      }

      mycolumns.value = fieldsTable.getArrColsByTable('products');

      searchList.value = [
        {
          visible: true,
          label: 'Ricerca',
          table: 'products',
          key: 'titolo',
          type: costanti.FieldType.select_by_server,
          value: '',
          // addall: true,
          arrvalue: [],
          useinput: true,
          filter: null,
          tablesel: 'products',
        },
      ];

      optauthors.value = productStore.getAuthors();

      //++Todo: Per ora visualizzo solo il "Negozio" e non i GAS...
      cosa.value = shared_consts.PROD.BOTTEGA;

      //cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.GAS, true)
      //if (cosa.value === shared_consts.PROD.TUTTI)

      // Inizializza
      loadpage.value = true;
      window.addEventListener('scroll', handleScroll);

      calcArrProducts();

      ismounting.value = false;

      if (onlyCatalogoPDF.value) {
        setTimeout(async () => {
          preparePDF(instampa, true);
        }, 2000);
      }
    }

    function loaddata() {
      numRecLoaded.value = 20;
    }

    // Remove the event listener on component destroy
    onBeforeUnmount(() => {
      window.removeEventListener('scroll', handleScroll);
    });

    function getCatProds() {
      return [
        {
          label: '[Seleziona un Argomento]',
          value: '',
          icon: undefined,
          color: undefined,
        },
      ].concat(
        productStore
          .getCatProds(cosa.value)
          .map((rec) => ({
            label: `${rec.name} (${productStore.getTotaliProdottiByIdCatProd(rec._id)})`,
            value: rec._id,
            icon: rec.icon,
            color: rec.color,
          }))
          .concat({
            label: '[Senza Argomento]',
            value: costanti.NO_CATEGORY,
            icon: undefined,
            color: undefined,
          })
      );
    }
    function getCollane() {
      return [
        {
          label: '[Seleziona una Collana]',
          value: '',
          icon: undefined,
          color: undefined,
        },
      ].concat(
        productStore
          .getCollane()
          .map((rec) => ({
            label: `${rec.title} (${productStore.getTotaliProdottiByIdCollana(rec._id)})`,
            value: rec._id,
            icon: rec.icon,
            color: rec.color,
          }))
          .concat({
            label: '[Senza Collana]',
            value: costanti.NO_CATEGORY,
            icon: undefined,
            color: undefined,
          })
      );
    }

    // productStore.getTotaliProdottiByIdCollana(rec._id)

    function onLoadScroll(index: number, done: any) {
      if (index >= 1) {
        if (numRecLoaded.value < arrProducts.value.length) {
          const step = 10;
          let mynrec = numRecLoaded.value + step;

          if (mynrec > arrProducts.value.length) mynrec = arrProducts.value.length;

          numRecLoaded.value = mynrec;
        }
        done();
      } else {
        done(true);
      }
    }

    function filterFn(val: any, update: any, abort: any) {
      update(() => {
        const needle = val.toLowerCase();
        optauthors.value = productStore.getAuthors().filter((v) => {
          const authorName = v.label.toLowerCase();
          const wordsToSearch = needle.split(' ');
          return wordsToSearch.every((word: any) => {
            if (word.length > 1) {
              return authorName.includes(word);
            } else {
              return authorName
                .split(' ')
                .some((namePart: any) => namePart.startsWith(word));
            }
          });
        });
      });
    }

    function selauthor(id: string, value: string) {
      filter.value.author = id;
    }

    /*function searchval(newval: any, table: any, tablesel: any) {
      console.log('REFRR searchval', newval, table, 'tablesel', tablesel)
      if (newval) {
        if (newval.hasOwnProperty('name')) {
          search.value = newval.name
        }
      } else {
        resetSearch()
      }
    }*/

    const valoriopt = computed(
      () =>
        (item: any, addall: boolean, addnone: boolean = false) => {
          // console.log('valoriopt', item.table)
          return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter);
        }
    );

    const loadImage = (src: any) => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = src;
      });
    };

    function groupedPages(recscheda: ISchedaSingola) {
      return recscheda.arrProdToShow?.slice(0, 50);
    }
    function generateStyleCatalogo(optcatalogo: IOptCatalogo) {
      return {};
    }

    function generateStylePageScheda(optcatalogo: IOptCatalogo, scheda: IMyScheda) {
      const {
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
        paddingTop,
        paddingBottom,
        paddingLeft,
        paddingRight,
      } = (() => {
        const getAdjustedSize = (
          val: string | undefined,
          defaultVal: string | undefined,
          isX: boolean,
          options: any
        ) => tools.adjustSize(optcatalogo, val || defaultVal, scheda, isX, options) || '';

        const myMargini = scheda.dimensioni.pagina.dimensioni.margini;
        const myMarginiPag = optcatalogo.dimensioni_def.pagina.margini;
        const myPadding = scheda.dimensioni.pagina.dimensioni.padding;
        const myPaddingPag = optcatalogo.dimensioni_def.pagina.padding;

        const miotop = getAdjustedSize(myPadding?.top, myPaddingPag?.top, false, {
          parteesternafissa: true,
        });
        // console.log('MIOTOP = ', miotop);

        return {
          marginTop: getAdjustedSize(myMargini?.top, myMarginiPag?.top, false, {
            parteesternafissa: true,
          }),
          marginBottom: getAdjustedSize(myMargini?.bottom, myMarginiPag?.bottom, false, {
            parteesternafissa: true,
          }),
          marginLeft: getAdjustedSize(myMargini?.left, myMarginiPag?.left, true, {
            parteesternafissa: true,
          }),
          marginRight: getAdjustedSize(myMargini?.right, myMarginiPag?.right, true, {
            parteesternafissa: true,
          }),
          paddingTop: getAdjustedSize(myPadding?.top, myPaddingPag?.top, false, {
            paddingTop: true,
          }),
          paddingBottom: getAdjustedSize(myPadding?.bottom, myPaddingPag?.bottom, false, {
            paddingBottom: true,
          }),
          paddingLeft: getAdjustedSize(myPadding?.left, myPaddingPag?.left, true, {
            paddingLeft: true,
          }),
          paddingRight: getAdjustedSize(myPadding?.right, myPaddingPag?.right, true, {
            paddingRight: true,
          }),
        };
      })();

      const recimg = getSfondoImgCatalogo(scheda);
      const backgroundImage = recimg.imagefile! ?? '';
      const backgroundSize = recimg.fit;

      const width = tools.adjustSize(
        optcatalogo,
        scheda.dimensioni?.pagina?.dimensioni?.size?.width ||
          optcatalogo.dimensioni_def?.pagina?.size?.width,
        null,
        true,
        { parteesternafissa: true }
      );
      const height = tools.adjustSize(
        optcatalogo,
        scheda.dimensioni?.pagina?.dimensioni?.size?.height ||
          optcatalogo.dimensioni_def?.pagina?.size?.height,
        null,
        false,
        { parteesternafissa: true }
      );

      return {
        marginBottom,
        marginTop,
        marginLeft,
        marginRight,
        paddingBottom,
        paddingTop,
        paddingLeft,
        paddingRight,
        backgroundImage,
        backgroundSize,
        position: 'relative',
        '--width': width,
        '--height': height,
        ...(width && width !== '0px' ? { width: `${width} !important` } : {}),
        ...(height && height !== '0px' ? { height: `${height} !important` } : {}), // Aggiungi l'altezza solo se è valorizzata
      };
    }

    function generateStyleByPageDim(optcatalogo: IOptCatalogo, mypage: IDimensioni) {
      const scheda = {};

      const marginTop =
        tools.adjustSize(
          optcatalogo,
          mypage.margini?.top || optcatalogo.dimensioni_def?.pagina?.margini?.top,
          scheda,
          false,
          { parteesternafissa: true }
        ) || '';
      const marginBottom =
        tools.adjustSize(
          optcatalogo,
          mypage.margini?.bottom || optcatalogo.dimensioni_def?.pagina?.margini?.bottom,
          scheda,
          false,
          { parteesternafissa: true }
        ) || '';
      const marginLeft =
        tools.adjustSize(
          optcatalogo,
          mypage.margini?.left || optcatalogo.dimensioni_def?.pagina?.margini?.left,
          scheda,
          true,
          { parteesternafissa: true }
        ) || '';
      const marginRight =
        tools.adjustSize(
          optcatalogo,
          mypage.margini?.right || optcatalogo.dimensioni_def?.pagina?.margini?.right,
          scheda,
          true,
          { parteesternafissa: true }
        ) || '';

      const paddingTop =
        tools.adjustSize(
          optcatalogo,
          mypage.padding?.top || optcatalogo.dimensioni_def?.pagina?.padding?.top,
          scheda,
          false,
          { paddingTop: true }
        ) || '';
      const paddingBottom =
        tools.adjustSize(
          optcatalogo,
          mypage.padding?.bottom || optcatalogo.dimensioni_def?.pagina?.padding?.bottom,
          scheda,
          false,
          { paddingBottom: true }
        ) || '';
      const paddingLeft =
        tools.adjustSize(
          optcatalogo,
          mypage.padding?.left || optcatalogo.dimensioni_def?.pagina?.padding?.left,
          scheda,
          true,
          { paddingLeft: true }
        ) || '';
      const paddingRight =
        tools.adjustSize(
          optcatalogo,
          mypage.padding?.right || optcatalogo.dimensioni_def?.pagina?.padding?.right,
          scheda,
          true,
          { paddingRight: true }
        ) || '';

      // Esiste un immagine di sfondo specifica della singola pagina ?
      const recimg = getSfondoImgCatalogo(null, mypage);
      let fileimg = recimg.imagefile! ?? '';
      let backgroundSize = recimg.fit;

      if (!fileimg) {
        // Esiste un immagine di sfondo uguali per tutte le pagine ?
        fileimg = optcatalogo.dimensioni_def?.pagina.imgsfondo?.imagefile;
        backgroundSize = optcatalogo.dimensioni_def?.pagina.imgsfondo?.fit;
        fileimg = fileimg
          ? `url("${tools.getDirUpload() + costanti.DIR_CATALOGO + fileimg}")`
          : '';
      }

      const backgroundImage = fileimg ?? '';

      const width =
        tools.adjustSize(
          optcatalogo,
          mypage.size?.width || optcatalogo.dimensioni_def?.pagina?.size?.width,
          null,
          true,
          { parteesternafissa: true }
        ) || '';
      const height =
        tools.adjustSize(
          optcatalogo,
          mypage.size?.height || optcatalogo.dimensioni_def?.pagina?.size?.height,
          null,
          false,
          { parteesternafissa: true }
        ) || '';

      return {
        marginBottom,
        marginTop,
        marginLeft,
        marginRight,
        paddingBottom,
        paddingTop,
        paddingLeft,
        paddingRight,
        backgroundImage,
        backgroundSize,
        '--width': width,
        '--height': height,
        ...(width && width !== '0px' ? { width: `${width} !important` } : {}),
        ...(height && height !== '0px' ? { height: `${height} !important` } : {}), // Aggiungi l'altezza solo se è valorizzata
      };
    }

    const getWidthPagina = (optcatalogo: IOptCatalogo, scheda: IMyScheda) =>
      (scheda.dimensioni?.pagina?.dimensioni?.size?.width
        ? tools.adjustSize(
            optcatalogo,
            scheda.dimensioni?.pagina?.dimensioni?.size?.width,
            null,
            true
          )
        : tools.adjustSize(
            optcatalogo,
            optcatalogo.dimensioni_def?.pagina?.size?.width,
            null,
            true
          )) ?? '';

    const getHeightPagina = (optcatalogo: IOptCatalogo, scheda: IMyScheda) =>
      (scheda.dimensioni?.pagina?.dimensioni?.size?.height
        ? tools.adjustSize(
            optcatalogo,
            scheda.dimensioni?.pagina?.dimensioni?.size?.height,
            null,
            false
          )
        : tools.adjustSize(
            optcatalogo,
            optcatalogo.dimensioni_def?.pagina?.size?.height,
            null,
            false
          )) ?? '';

    function getStyleRowSeparator(recscheda: ISchedaSingola) {
      const paddingLeft =
        tools.adjustSize(
          optcatalogo.value,
          recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.left,
          recscheda.scheda,
          true
        ) ?? '0px';
      const paddingRight =
        tools.adjustSize(
          optcatalogo.value,
          recscheda.scheda?.dimensioni?.scheda_prodotto?.padding?.right,
          recscheda.scheda,
          true
        ) ?? '0px';

      return {
        paddingLeft: `${paddingLeft}`,
        paddingRight: `${paddingRight}`,
      };
    }

    function getStyleRow(recscheda: ISchedaSingola) {
      const placeContent = 'center';

      const {
        width,
        height,
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
        paddingTop,
        paddingBottom,
        paddingLeft,
        paddingRight,
      } = recscheda.scheda?.dimensioni?.riga
        ? {
            width:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.size?.width,
                recscheda.scheda,
                true,
                { parteesternafissa: true }
              ) ?? '',
            height:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.size?.height,
                recscheda.scheda,
                false,
                { parteesternafissa: true }
              ) ?? '',
            marginTop:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.margini?.top,
                recscheda.scheda,
                false,
                { parteesternafissa: true }
              ) || '0',
            marginBottom:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.margini?.bottom,
                recscheda.scheda,
                false,
                { parteesternafissa: true }
              ) || '0',
            marginLeft:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.margini?.left,
                recscheda.scheda,
                true,
                { parteesternafissa: true }
              ) || '0',
            marginRight:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.margini?.right,
                recscheda.scheda,
                true,
                { parteesternafissa: true }
              ) || '0',
            paddingTop:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.padding?.top,
                recscheda.scheda,
                false,
                { paddingTop: true }
              ) || '0',
            paddingBottom:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.padding?.bottom,
                recscheda.scheda,
                false,
                { paddingBottom: true }
              ) || '0',
            paddingLeft:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.padding?.left,
                recscheda.scheda,
                true,
                { paddingLeft: true }
              ) || '0',
            paddingRight:
              tools.adjustSize(
                optcatalogo.value,
                recscheda.scheda.dimensioni.riga.padding?.right,
                recscheda.scheda,
                true,
                { paddingRight: true }
              ) || '0',
          }
        : {
            width: '',
            height: '',
            marginTop: '0',
            marginBottom: '0',
            marginLeft: '0',
            marginRight: '0',
            paddingTop: '0',
            paddingBottom: '0',
            paddingLeft: '0',
            paddingRight: '0',
          };

      const out: any = {
        placeContent,
        flex: `0 1 ${width} !important`,
        margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
        padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,
        ...(width && width !== '0px' ? { width: `${width} !important` } : {}),
        ...(height && height !== '0px' ? { height: `${height} !important` } : {}),
      };

      /*if (width) {
        out.width = `${width} !important`
      }
      if (height) {
        out.height = `${height} !important`
      }*/

      return out;
    }

    function getStyleSchedaProdotto(recscheda: ISchedaSingola) {
      const placeContent = 'center';

      const prod = recscheda.scheda?.dimensioni?.scheda_prodotto;

      const {
        width,
        height,
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
        paddingTop,
        paddingBottom,
        paddingLeft,
        paddingRight,
      } = recscheda.scheda?.dimensioni?.scheda_prodotto
        ? {
            width:
              tools.adjustSize(
                optcatalogo.value,
                prod.size?.width,
                recscheda.scheda,
                true
              ) || '100px',
            height: tools.adjustSize(
              optcatalogo.value,
              prod.size?.height,
              recscheda.scheda,
              false
            ),
            marginTop:
              tools.adjustSize(
                optcatalogo.value,
                prod.margini?.top,
                recscheda.scheda,
                false
              ) || '0px',
            marginBottom:
              tools.adjustSize(
                optcatalogo.value,
                prod.margini?.bottom,
                recscheda.scheda,
                false
              ) || '0px',
            marginLeft:
              tools.adjustSize(
                optcatalogo.value,
                prod.margini?.left,
                recscheda.scheda,
                true
              ) || '0px',
            marginRight:
              tools.adjustSize(
                optcatalogo.value,
                prod.margini?.right,
                recscheda.scheda,
                true
              ) || '0px',
            paddingTop:
              tools.adjustSize(
                optcatalogo.value,
                prod.padding?.top,
                recscheda.scheda,
                false
              ) || '0px',
            paddingBottom:
              tools.adjustSize(
                optcatalogo.value,
                prod.padding?.bottom,
                recscheda.scheda,
                false
              ) || '0px',
            paddingLeft:
              tools.adjustSize(
                optcatalogo.value,
                prod.padding?.left,
                recscheda.scheda,
                true
              ) || '0px',
            paddingRight:
              tools.adjustSize(
                optcatalogo.value,
                prod.padding?.right,
                recscheda.scheda,
                true
              ) || '0px',
          }
        : {
            width: '',
            height: '',
            marginTop: '0',
            marginBottom: '0',
            marginLeft: '0',
            marginRight: '0',
            paddingTop: '0',
            paddingBottom: '0',
            paddingLeft: '0',
            paddingRight: '0',
          };

      return {
        placeContent,
        alignSelf: 'flex-start',
        flex: `0 1 ${width} !important`,
        margin: `${marginTop} ${marginRight} ${marginBottom} ${marginLeft}`,
        padding: `${paddingTop} ${paddingRight} ${paddingBottom} ${paddingLeft}`,
        ...(height && height !== '0px' ? { height: `${height} !important` } : {}), // Aggiungi l'altezza solo se è valorizzata
      };
    }

    function containsProducts(page: IProduct[][]) {
      return page && page.length > 0 && page[0] && page[0].length > 0;
    }

    function naviga(path: string) {
      router.push(path);
    }

    function updateProducts(arr: any, aggiorna?: boolean) {
      if (myCatalog.value && myCatalog.value?.lista_prodotti) {
        if (
          myCatalog.value.lista_prodotti?.length !== arr.length ||
          !myCatalog.value.lista_prodotti.every(
            (prod, index) => prod._id === arr[index]._id
          ) ||
          aggiorna
        ) {
          myCatalog.value.lista_prodotti = [...arr];

          if (!showListaFiltrata.value && !tools.isUtente()) salvaListaProdotti(true);
          else generatearrProdToViewSorted(true, false);
        }
      }
    }

    function addProductToList(element: IProduct, where: string) {
      console.log('addProductToList', element)

      if (element) {
        // add this record to lista_prodotti
        if (
          myCatalog.value &&
          !myCatalog.value?.lista_prodotti?.some((p) => p._id === element._id)
        ) {
          // inserire il record in cima
          const arr = myCatalog.value?.lista_prodotti || [];
          if (where === shared_consts.WHERE_INSERT.ONTOP) arr.unshift(element);
          else if (where === shared_consts.WHERE_INSERT.ONBOTTOM) arr.push(element);

          updateProducts(arr, true);

          addnewProd.value = false;
        }
      }
    }

    function clickaddNewBook() {
      addnewProd.value = true;
    }

    function toggleDebug() {
      optcatalogo.value.indebug = !optcatalogo.value.indebug;
    }

    const preparePDFWeb = () => {
      generaPdfCatalogo(false);
    };

    const preparePDFStampa = () => {
      generaPdfCatalogo(true);
    };

    async function preparePDF(instampa: boolean, senzachiedere = false) {
      let str = '';
      if (instampa) {
        str = 'per la stampa';
      }
      let parti = false;
      if (!senzachiedere) {
        $q.dialog({
          message: `Generare il PDF ${str}?`,
          ok: {
            label: t('dialog.yes'),
            push: true,
          },
          cancel: {
            label: t('dialog.cancel'),
          },
          title: 'Generazione PDF',
        }).onOk(() => {
          parti = true;
        });
      }

      if (parti || senzachiedere) {
        optcatalogo.value.selectedVersionStampabile = instampa
          ? shared_consts.PREPARA_PDF.STAMPA
          : shared_consts.PREPARA_PDF.WEB;

        arrProducts.value = [];
        console.log('aggiorna... ', optcatalogo.value.selectedVersionStampabile);
        await calcArrProducts(false);
        updateCatalogoPadre();

        optcatalogo.value.generazionePDFInCorso = true;
        optcatalogo.value.areadistampa!.scalex =
          optcatalogo.value.areadistampa!.scale_printablex;
        optcatalogo.value.areadistampa!.scaley =
          optcatalogo.value.areadistampa!.scale_printabley;

        setTimeout(() => {
          optcatalogo.value.generazionePDFInCorso = true;

          setTimeout(async () => {
            optcatalogo.value.selectedVersionStampabile = instampa
              ? shared_consts.PREPARA_PDF.STAMPA
              : shared_consts.PREPARA_PDF.WEB;

            console.log(
              'selectedVersionStampabile',
              optcatalogo.value.selectedVersionStampabile
            );
          }, 500);
        }, 200);
      }
    }

    const terminaPDF = () => {
      optcatalogo.value.generazionePDFInCorso = false;
      optcatalogo.value.areadistampa!.scalex = 1;
      optcatalogo.value.areadistampa!.scaley = 1;
    };
    // Conversione da unità a pixel, con base 96 DPI
    function unitToPx(val: number, unit: string): number {
      const dpi = shared_consts.PUNTI_PER_POLLICE;
      const conversionMap: Record<string, number> = {
        mm: dpi / 25.4,
        cm: dpi / 2.54,
        pt: dpi / 72,
        px: 1,
      };
      return val * (conversionMap[unit] || 1);
    }

    // Calcola scala tra dimensioni desiderate e quelle reali del contenuto
    function getBestFitScale(
      contentWidthPx: number,
      contentHeightPx: number,
      targetWidthPx: number,
      targetHeightPx: number
    ): number {
      return Math.min(targetWidthPx / contentWidthPx, targetHeightPx / contentHeightPx);
    }

    async function generaPdfCatalogo(instampa: boolean) {
      const msg = instampa ? 'stampa' : '';

      try {
        console.log(`1) Generazione PDF ${msg} in corso, attendere ...`);
        $q.loading.show({
          message: `Generazione PDF ${msg} in corso, attendere ...`,
        });

        const ris = await userStore.eseguiFunzSulServer({
          dbop: 'GeneraPdfCatalogo',
          options: {
            idCatalog: myCatalog.value._id,
            stampa: instampa,
            comprimi: true,
            path: 'upload/cataloghi/',
            // idtag_pdfcontent: 'tag-catalogo',
            compressione: 'printer',
          },
        });

        $q.loading.hide();

        if (ris && !ris.error) {
          const catalog = myCatalog.value;
          if (catalog) {
            if (instampa) {
              catalog.pdf_generato_stampa = ris.fileout;
              catalog.pdf_generato_stampa_compressed = ris.fileout_compressed;

              catalog.pdf_generato_stampa_size = ris.filesize;
              catalog.pdf_generato_stampa_compr_size = ris.filesize_compressed;

              catalog.data_generato_stampa = tools.getDateNow();
            } else {
              catalog.pdf_generato_compressed = ris.fileout_compressed;
              catalog.pdf_generato = ris.fileout;

              catalog.pdf_generato_size = ris.filesize;
              catalog.pdf_generato_compr_size = ris.filesize_compressed;

              catalog.data_generato = tools.getDateNow();
            }
          } else {
            strout.value = JSON.stringify(ris, null, 2);
          }
          $q.notify({
            color: 'positive',
            message: 'PDF generato con successo!',
            icon: 'check',
          });
        } else {
          let error = ris?.error;
          $q.notify({
            color: 'negative',
            message: `PDF NON generato Errore: ${error}!`,
            icon: 'warn',
          });
        }
      } catch (error) {
        $q.loading.hide();
        $q.notify({
          color: 'negative',
          message: 'Errore nella generazione del PDF',
          icon: 'error',
        });
        console.error('Errore nella generazione del PDF:', error);
      }
    }

    // Default formato A4 in mm
    const A4_FORMAT_MM = [210, 297];

    const pubblicaPDF = async (compresso: boolean) => {
      const catalog = myCatalog.value;

      const confirm = await $q
        .dialog({
          title: 'Conferma',
          message: 'Vuoi pubblicare OnLine questo PDF?',
          ok: {
            label: 'Sì',
            push: true,
          },
          cancel: {
            label: 'Annulla',
          },
        })
        .onOk(async () => {
          if (!confirm) return;

          const ris = await globalStore.execOnlinePDF({
            id_catalog: catalog._id,
            stampa: false,
            compresso,
          });

          if (ris) {
            if (ris.record?.pdf_online) {
              catalog.pdf_online = ris.record.pdf_online;
              catalog.pdf_online_size = ris.record.pdf_online_size;
              catalog.data_online = ris.record.data_online;
            }
            $q.notify({
              color: 'positive',
              message: 'PDF inviato ONLINE!',
              icon: 'check',
            });
          } else {
            $q.loading.hide();
            $q.notify({
              color: 'negative',
              message: "Errore nell'invio del PDF OnLine",
              icon: 'error',
            });
          }
        });
    };

    const pubblicaPDFStampa = async (compresso: boolean) => {
      const catalog = myCatalog.value;

      const confirm = await $q
        .dialog({
          title: 'Conferma',
          message: 'Vuoi pubblicare OnLine questo PDF di STAMPA ?',
          ok: {
            label: 'Sì',
            push: true,
          },
          cancel: {
            label: 'Annulla',
          },
        })
        .onOk(async () => {
          const ris = await globalStore.execOnlinePDF({
            id_catalog: catalog._id,
            stampa: true,
            compresso,
          });

          if (ris) {
            if (ris.record.pdf_online_stampa) {
              catalog.pdf_online_stampa = ris.record.pdf_online_stampa;
              catalog.pdf_online_stampa_size = ris.record.pdf_online_stampa_size;
              catalog.data_online_stampa = ris.record.data_online_stampa;
            }
            $q.notify({
              color: 'positive',
              message: 'PDF STAMPA inviato ONLINE!',
              icon: 'check',
            });
          } else {
            $q.loading.hide();
            $q.notify({
              color: 'negative',
              message: "Errore nell'invio del PDF STAMPA OnLine",
              icon: 'error',
            });
          }
        });

      // await saveCatalog();
    };

    function modifElem() {
      // modifica elemento...
    }

    function convertiValori() {
      const ratio = ratioconvert.value;
      const converti = (val: string) => tools.converticonratio(val, ratio);

      function convertiLati(obj?: {
        left?: string;
        top?: string;
        right?: string;
        bottom?: string;
      }) {
        if (!obj) return;
        ['left', 'top', 'right', 'bottom'].forEach((side) => {
          if (obj[side] !== undefined) obj[side] = converti(obj[side]!);
        });
      }

      function convertiProps(obj?: Record<string, string | undefined>, props: string[]) {
        if (!obj) return;
        props.forEach((prop) => {
          if (obj[prop] !== undefined) obj[prop] = converti(obj[prop]!);
        });
      }

      const pagina = optcatalogo.value.dimensioni_def.pagina;

      if (pagina.margini) convertiLati(pagina.margini);
      if (pagina.padding) convertiLati(pagina.padding);

      for (const recscheda of optcatalogo.value.arrSchede ?? []) {
        const dim = recscheda.scheda?.dimensioni;
        if (!dim) continue;

        // dimensioni.pagina.dimensioni
        const pagDim = dim.pagina?.dimensioni;
        if (pagDim) {
          convertiProps(pagDim.size, ['width', 'height']);
          convertiLati(pagDim.margini);
          convertiLati(pagDim.padding);
        }

        // dimensioni.scheda_prodotto
        const schedaProd = dim.scheda_prodotto;
        if (schedaProd) {
          convertiProps(schedaProd.size, ['width', 'height', 'gap']);
          convertiLati(schedaProd.margini);
        }

        // dimensioni.immagine_prodotto
        const immProd = dim.immagine_prodotto;
        if (immProd && immProd.size) {
          convertiProps(immProd.size, ['width', 'height']);
        }
      }

      updateCatalogoPadre();
    }

    async function updatecatalogmodif(field: string, val: any) {
      if (field) {
        myCatalog.value[field] = val;
        await saveCatalog();
      }
    }

    onMounted(mounted);

    return {
      userStore,
      costanti,
      tools,
      toolsext,
      search,
      cosa,
      shared_consts,
      getCatProds,
      cat,
      idGasSel,
      productStore,
      t,
      loadpage,
      componentToFixRef,
      isFixed,
      arrProducts,
      arrListaTemporanea,
      show_hide,
      onLoadScroll,
      numRecLoaded,
      arrLoaded,
      filter,
      optauthors,
      filterFn,
      selauthor,
      searchList,
      fieldsTable,
      valoriopt,
      labelcombo,
      mycolumns,
      tabvisu,
      getSearchText,
      pdfContent,
      tabcatalogo,
      groupedPages,
      getProdBySchedaRigaCol,
      generateStylePageScheda,
      generateStyleCatalogo,
      getStyleRow,
      getStyleSchedaProdotto,
      getWidthPagina,
      getHeightPagina,
      getStyleRowSeparator,
      generateStyleByPageDim,
      containsProducts,
      updateOptCatalogo,
      optcatalogo,
      getTestoIntroduttivo,
      ispageCatalogata,
      naviga,
      getTitoloCatalogo,
      getTitoloPagina,
      generaListaLibri,
      updateProducts,
      clickaddNewBook,
      addProductToList,
      addnewProd,
      showListaFiltrata,
      rigeneraLibri,
      optrigenera,
      generatinglist,
      optDisp,
      optRigeneraModalita,
      optStato,
      myCatalog,
      getReferentiCatalogo,
      reSortList,
      preparePDF,
      preparePDFWeb,
      preparePDFStampa,
      terminaPDF,
      toggleDebug,
      getPdfFilename,
      filtroStrApplicato,
      getCollane,
      pubblicaPDF,
      pubblicaPDFStampa,
      ismounting,
      pdfColumns,
      pdfRows,
      getImgIntroCatalogo,
      strout,
      modifElem,
      convertiValori,
      ratioconvert,
      nascondi,
      getSfondoImgCatalogo,
      isStampa,
      onlyCatalogoPDF,
      updatecatalogmodif,
      tabgen,
      generaListaTempLibri,
      globalStore,
      showColorPicker,
      mostraTuttiITab,
      esistePagIntroduttiva,
    };
  },
});