<template>
  <div
    v-if="optcatalogo"
    :class="{
      ' items-start q-gutter-sm': true,
    }"
    :style="
      scheda.dimensioni?.pagina?.dimensioni?.size?.height
        ? ' height: ' +
          tools.adjustSize(optcatalogo, scheda.dimensioni?.pagina?.dimensioni?.size?.height) +
          'px !important; '
        : ''
    "
  >
    <q-spinner
      v-if="!endload"
      color="primary"
      size="3em"
      :thickness="2"
    />

    <div
      v-if="!!myproduct && !!myproduct.productInfo"
      :class="{
        'my-card-big book-details': complete,
        'book-card': !complete && !optcatalogo.pdf,
        colfix_prodotti_1: options.quante_col == 'c1' && !optcatalogo.pdf,
        colfix_prodotti_2: options.quante_col == 'c2' && !optcatalogo.pdf,
        colfix_prodotti_3: options.quante_col == 'c3' && !optcatalogo.pdf,
      }"
    >
      <q-page-sticky
        v-if="complete && !optcatalogo.pdf"
        position="bottom-right"
        :offset="[18, 0]"
        style="z-index: 1000"
      >
        <q-btn
          fab
          icon="fas fa-arrow-up"
          class="semi-transparent"
          color="primary"
          v-close-popup
        />
      </q-page-sticky>

      <q-card-section>
        <div
          v-if="scheda.testo_right_attaccato || scheda.testo_right"
          :class="[
            'flex', // Classi comuni
            'image-container',
            { 'shadow-2': options.in_3d && !optcatalogo.pdf }, // Classe condizionale
            scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO ? '' : 'flex flex-row', // Layout flessibile
          ]"
          :style="{
            gap: tools.adjustSize(optcatalogo, scheda.dimensioni?.scheda_prodotto?.size?.gap) ?? '0.1rem',
            width: tools.adjustSize(optcatalogo, scheda.dimensioni?.scheda_prodotto?.size?.width) ?? '100%',
            height: tools.adjustSize(optcatalogo, scheda.dimensioni?.scheda_prodotto?.size?.height),
          }"
        >
          <div>
            <a
              :href="myproduct.productInfo.link_macro"
              target="_blank"
            >
              <q-img
                v-if="myproduct.productInfo"
                :src="
                  myproduct.productInfo.imagefile
                    ? tools.getFullFileNameByImageFile('productInfos', myproduct.productInfo.imagefile)
                    : myproduct.productInfo.image_link
                "
                :alt="myproduct.productInfo.name"
                :fit="scheda.dimensioni?.immagine_prodotto?.size?.fit ?? 'cover'"
                :class="{
                  'book-image-fixed': complete,
                  'cursor-pointer': !complete,
                  'shadow-4': !optcatalogo.pdf,
                  'border-box': optcatalogo.pdf,
                }"
                :style="{
                  zIndex: 2,
                  width:
                    scheda.testo_right.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO
                      ? (scheda.testo_right.font?.perc_text ?? '50%')
                      : '45%',
                  ...(tools.adjustSize(optcatalogo, scheda.dimensioni?.immagine_prodotto?.size?.width) && {
                    width:
                      tools.adjustSize(optcatalogo, scheda.dimensioni?.immagine_prodotto.size?.width) + ' !important',
                  }),
                  height: scheda.dimensioni?.immagine_prodotto?.size?.height
                    ? tools.adjustSize(optcatalogo, scheda.dimensioni?.immagine_prodotto?.size?.height)
                    : undefined,
                  display: 'block',
                }"
                @click="click_opendetail()"
              />
            </a>
            <div class="q-ma-sm no-print">
              <div
                class="row absolute-top-left semi-transparent "
                style="z-index: 10"
              >
                <q-btn-dropdown
                  push
                  glossy
                  no-caps
                  dense
                  color="primary"
                  icon="fas fa-pencil-alt"
                  v-if="
                    (tools.isManager() || tools.isEditor()) &&
                    !optcatalogo.generazionePDFInCorso &&
                    (editOn || options.show_edit_book)
                  "
                >
                  <q-list>
                    <q-item
                      v-if="
                        (tools.isManager() || tools.isEditor()) &&
                        !optcatalogo.generazionePDFInCorso &&
                        (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="modifOn = !modifOn"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-file-alt"
                          color="primary"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Scheda</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item
                      v-if="
                        (tools.isManager() || tools.isEditor()) &&
                        !optcatalogo.generazionePDFInCorso &&
                        (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="modifTrafiletto = true"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-align-left"
                          color="primary"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Modifica Sinossi</q-item-label>
                      </q-item-section>
                    </q-item>

                    <!--<q-item
                      v-if="
                        tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="refreshDataFromGM()"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-pencil-alt"
                          color="accent"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Carica da GM</q-item-label>
                      </q-item-section>
                    </q-item>-->
                    <q-item
                      v-if="
                        !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="refreshSingleBookFromGM({usaDBGMLocale: false})"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-cloud-download-alt"
                          color="accent"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Carica dati (da GM)</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item
                      v-if="
                        tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="refreshSingleBookFromGM({usaDBGMLocale: true})"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-database"
                          color="accent"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Carica dati (dal DB Locale)</q-item-label>
                      </q-item-section>
                    </q-item>
                    <!--<q-item
                      v-if="
                        tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="refreshAllDataBookFromGM({usaDBGMLocale: false})"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-pencil-alt"
                          color="accent"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Riaggiorna TUTTI da GM</q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item
                      v-if="
                        tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="refreshAllDataBookFromGM({usaDBGMLocale: true})"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-pencil-alt"
                          color="accent"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Riaggiorna TUTTI da GM (da DB Locale)</q-item-label>
                      </q-item-section>
                    </q-item>
                    -->
                    <q-item
                      v-if="
                        tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="
                        showQtaDisponibile = false;
                        visufromgm = true;
                      "
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-eye"
                          color="orange"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Visualizza su GM</q-item-label>
                      </q-item-section>
                    </q-item>

                    <!--<q-item
                      v-if="
                        tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="refreshFieldFromGM('Pagine')"
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-eye"
                          color="orange"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Vedi Numero di Pagine (Da GM)</q-item-label>
                      </q-item-section>
                    </q-item>
                    -->

                    <q-item
                      v-if="
                        tools.isManager() && !optcatalogo.generazionePDFInCorso && (editOn || options.show_edit_book)
                      "
                      clickable
                      v-close-popup
                      @click="
                        showQtaDisponibile = true;
                        visufromgm = true;
                      "
                    >
                      <q-item-section avatar>
                        <q-avatar
                          icon="fas fa-boxes"
                          color="orange"
                          text-color="white"
                        />
                      </q-item-section>
                      <q-item-section>
                        <q-item-label>Visualizza su GM (con le Quantità in Magazzino)</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </div>
            </div>
          </div>

          <!-- Testo sotto all'immagine  -->
          <CText
            :rectext="scheda.testo_right_attaccato"
            :myproduct="myproduct"
            :optcatalogo="optcatalogo"
            :scheda="scheda"
            :idPage="idPage"
          >
            <div
              v-if="scheda.testo_right_attaccato.font?.posiz_text !== costanti.POSIZ_TESTO.IN_BASSO"
              :style="{
                alignSelf:
                  scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO ? '' : 'center',
                marginTop:
                  scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO ? 'auto' : '0',
              }"
            >
              <CText
                :rectext="scheda.testo_right"
                :myproduct="myproduct"
                :optcatalogo="optcatalogo"
                :show_at_right="scheda.barcode?.show_at_right"
                :scheda="scheda"
                :idPage="idPage"
              >
                <div class="row no-wrap items-center">
                  <div v-if="scheda.barcode && scheda.barcode.show">
                    <CBarCode
                      :value="myproduct.productInfo.code"
                      :format="scheda.barcode.format"
                      :fontsizeprop="scheda.barcode.font?.size"
                      :gap="tools.adjustSize(optcatalogo, scheda.barcode.size?.gap)"
                      :width="parseInt(tools.adjustSize(optcatalogo, scheda.barcode.size?.width))"
                      :widthlines="tools.adjustSize(optcatalogo, scheda.barcode.widthlines)"
                      :height="tools.adjustSize(optcatalogo, scheda.barcode.size?.height)"
                      :show_at_right="scheda.barcode?.show_at_right"
                    >
                    </CBarCode>
                  </div>
                  <div v-if="scheda.etichette?.bestseller?.show && isProductBestseller()">
                    <q-img
                      src="/images/bestseller.png"
                      alt="Bestseller"
                      :width="40 * tools.getScale(optcatalogo) + 'px'"
                      :height="40 * tools.getScale(optcatalogo) + 'px'"
                      fit="contain"
                    ></q-img>
                  </div>
                  <div v-else-if="scheda.etichette?.novita?.show && isProductNovita()">
                    <q-img
                      src="/images/novita.png"
                      alt="Novita"
                      :width="40 * tools.getScale(optcatalogo) + 'px'"
                      :height="40 * tools.getScale(optcatalogo) + 'px'"
                      fit="contain"
                    ></q-img>
                  </div>
                </div>
              </CText>
            </div>
          </CText>
          <div
            v-if="scheda.testo_right_attaccato.font?.posiz_text === costanti.POSIZ_TESTO.IN_BASSO"
            class="flexible-width"
            :style="{
              marginTop: 'auto',
            }"
          >
            <CText
              :rectext="scheda.testo_right"
              :myproduct="myproduct"
              :optcatalogo="optcatalogo"
              :scheda="scheda"
              :show_at_right="scheda.barcode?.show_at_right"
              :idPage="idPage"
            >
              <div class="row no-wrap items-center">
                <div v-if="scheda.barcode && scheda.barcode.show">
                  <CBarCode
                    :value="myproduct.productInfo.code"
                    :format="scheda.barcode.format"
                    :fontsizeprop="scheda.barcode.font?.size"
                    :gap="tools.adjustSize(optcatalogo, scheda.barcode.size?.gap)"
                    :width="parseInt(tools.adjustSize(optcatalogo, scheda.barcode.size?.width))"
                    :widthlines="tools.adjustSize(optcatalogo, scheda.barcode.widthlines)"
                    :height="tools.adjustSize(optcatalogo, scheda.barcode.size?.height)"
                    :show_at_right="scheda.barcode.show_at_right"
                  >
                  </CBarCode>
                </div>
                <div v-if="scheda.etichette?.bestseller?.show && isProductBestseller()">
                  <q-img
                    src="/images/bestseller.png"
                    alt="Bestseller"
                    :width="40 * tools.getScale(optcatalogo) + 'px'"
                    :height="40 * tools.getScale(optcatalogo) + 'px'"
                    fit="contain"
                  ></q-img>
                </div>
                <div v-else-if="scheda.etichette?.novita?.show && isProductNovita()">
                  <q-img
                    src="/images/novita.png"
                    alt="Novita"
                    :width="40 * tools.getScale(optcatalogo) + 'px'"
                    :height="40 * tools.getScale(optcatalogo) + 'px'"
                    fit="contain"
                  ></q-img>
                </div>
              </div>
            </CText>
          </div>

          <div
            v-if="optcatalogo.indebug"
            :style="{
              width: '100%',
            }"
          >
            <div
              :style="{
                '--scalecatalog': tools.getScale(optcatalogo),
                'line-height': scheda.testo_bottom.font?.line_height,
              }"
              v-html="getTesto_Debug"
            ></div>
          </div>
          <!-- Testo sotto al testo attaccato, allineato al fondo -->
          <CText
            v-else-if="scheda.testo_bottom && getTesto_Bottom"
            :rectext="scheda.testo_bottom"
            :scheda="scheda"
            :myproduct="myproduct"
            :optcatalogo="optcatalogo"
            :idPage="idPage"
          ></CText>
          <!--<div v-if="optcatalogo.indebug">testo: "{{ getTesto_Bottom }}"</div>-->
        </div>
      </q-card-section>
      <q-separator
        v-if="complete"
        class="q-my-sm"
      ></q-separator>
      <q-card-section v-if="complete && myproduct.productInfo.description">
        <div class="title-descr text-blue row">Descrizione:</div>
        <div class="row items-center">
          <div class="text-title text-grey-9">
            <span
              class="text-grey-7"
              v-html="myproduct.productInfo.description"
            ></span>
          </div>
        </div>
      </q-card-section>
    </div>

    <q-dialog
      v-if="myproduct"
      v-model="openlistorders"
    >
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> {{ t('ecomm.listaord') }} - {{ myproduct.productInfo.name }} </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <q-markup-table
            wrap-cells
            bordered
            separator="horizontal"
            class="listaev__table"
          >
            <thead>
              <tr>
                <th>Data</th>
                <th>Persona</th>
                <th>Stato</th>
                <th>Quantita</th>
                <th>Note</th>
              </tr>
            </thead>

            <tbody>
              <tr
                v-for="(ordcart, index) of listord"
                :key="index"
                class="listaev listaev__table"
              >
                <td class="text-center">
                  <div>
                    {{ func_tools.getDateTimeShortStr(ordcart.created_at) }}
                  </div>
                </td>
                <td class="text-center">
                  <strong>{{ tools.getNomeUtenteEUsernameByRecUser(ordcart.user) }}</strong>
                </td>
                <td class="text-center">
                  <strong>{{ shared_consts.getStatusStr(ordcart.status) }}</strong>
                </td>
                <td class="text-center">
                  <div
                    v-for="(singleord, index) in ordcart.items"
                    :key="index"
                  >
                    <span v-if="singleord.order.idProduct === myproduct._id && singleord.order.quantity > 0">
                      {{ singleord.order.quantity }}</span
                    >
                    <span v-if="singleord.order.idProduct === myproduct._id && singleord.order.quantitypreordered > 0">
                      {{ singleord.order.quantitypreordered }}</span
                    >
                  </div>
                </td>
                <td class="text-center">
                  {{ ordcart.note }}
                </td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="text-center">
                  Totali:
                  <span class="totali">{{ sumval }}</span>
                </td>
                <td>&nbsp;</td>
              </tr>
            </tbody>
          </q-markup-table>
        </q-card-section>
      </q-card>
    </q-dialog>

    <q-dialog
      v-if="true && myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda"
      v-model="apriSchedaPDF"
      maximized
    >
      <q-card>
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title>
            {{ myproduct.productInfo.name }}
          </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            label="CHIUDI"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section>
          <iframe
            :src="myproduct.productInfo.link_scheda"
            frameborder="0"
            width="100%"
            height="100%"
          ></iframe>
        </q-card-section>
      </q-card>
      <q-card-actions align="center">
        <q-btn
          color="primary"
          label="Chiudi"
          @click="apriSchedaPDF = false"
        />
      </q-card-actions>
    </q-dialog>

    <q-dialog
      v-if="false && myproduct && myproduct.productInfo && myproduct.productInfo.link_scheda"
      v-model="apriSchedaPDF"
      fullscreen
    >
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title>
          {{ myproduct.productInfo.name }}
        </q-toolbar-title>
        <q-btn
          flat
          round
          color="white"
          label="CHIUDI"
          icon="close"
          v-close-popup
        ></q-btn>
      </q-toolbar>
      <q-card-section>
        <vue-pdf-app
          :pdf="myproduct.productInfo.link_scheda"
          style="height: 100vh"
        ></vue-pdf-app>
      </q-card-section>
    </q-dialog>

    <q-dialog
      v-model="isFullScreen"
      position="top"
      :maximized="true"
      class="q-pt-none"
    >
      <div
        v-if="isFullScreen"
        class="fullscreen-container"
        @touchmove.prevent
        @click="toggleFullScreen"
      >
        <q-img
          :src="
            myproduct.productInfo.imagefile ? `` + myproduct.productInfo.imagefile : myproduct.productInfo.image_link
          "
          :alt="myproduct.productInfo.name"
          :fit="tools.isMobile() ? 'fill' : 'contain'"
          class="fullscreen-image"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
          ref="fullscreenImage"
        >
        </q-img>
        <br />
      </div>
      <div class="text-center">
        <q-btn
          class="q-ma-md"
          @click="isFullScreen = false"
          label="Chiudi"
          rounded
          color="primary"
          icon="close"
        ></q-btn>
      </div>
    </q-dialog>
    <q-dialog
      v-if="myproduct && modifOn"
      v-model="modifOn"
      maximized
    >
      <CSchedaProdotto
        v-model="myproduct"
        @updateproductmodif="updateproductmodif"
      >
      </CSchedaProdotto>

    </q-dialog>
    <q-dialog
      v-if="myproduct && modifTrafiletto"
      v-model="modifTrafiletto"
      maximized
    >
      <CModifTrafiletto
        v-model="myproduct"
        titolo="Sinossi"
        table="productinfos"
        mykey="descr_trafiletto_catalogo"
        :canModify="true"
        :type="costanti.FieldType.editor_nohtml"
        @updateproductmodif="updateproductmodif"
        @close="modifTrafiletto = false"
        :maxlength="680"
      >
      </CModifTrafiletto>

    </q-dialog>
    <q-dialog
      v-if="visufromgm && myproduct"
      v-model="visufromgm"
    >
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Visu </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <CViewTable
            :options="{
              nameTable: 'T_Web_Articoli',
              campispeciali: true,
              numrec: 1,
              where: 'T.IdArticolo =' + myproduct.productInfo.sku + ' AND T.Ean13 = \'' + myproduct.productInfo.code + '\'',
              showQtaDisponibile,
              outhtml: true,
            }"
          >
          </CViewTable>
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog
      v-if="updatefromgm && myproduct"
      v-model="updatefromgm"
    >
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Aggiorna da GM: </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <q-inner-loading
            id="spinner"
            :showing="loading"
          >
            <q-spinner-tail
              color="primary"
              size="4em"
            >
            </q-spinner-tail>
          </q-inner-loading>
          <br />
          Valore: {{ field_updated_fromGM }}
          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
    <q-dialog
      v-if="updatetogm && myproduct"
      v-model="updatetogm"
    >
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Aggiorna su GM: </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            v-close-popup
          ></q-btn>
        </q-toolbar>
        <q-card-section class="q-pa-xs inset-shadow">
          <q-inner-loading
            id="spinner"
            :showing="loading"
          >
            <q-spinner-tail
              color="primary"
              size="4em"
            >
            </q-spinner-tail>
          </q-inner-loading>
          <br />

          <br />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./CCatalogoCard.ts"></script>

<style lang="scss" scoped>
@import './CCatalogoCard.scss';
</style>
