<template>
  <div
    :class="{
      ' items-start q-gutter-sm': true,
    }"
    :style="
      scheda.height
        ? ' height: ' +
          tools.adjustSize(optcatalogo, scheda.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-toggle
        v-if="tools.isManager() && !optcatalogo.pdf"
        v-model="editOn"
        class="absolute-top-right"
        color="green"
        icon="fas fa-pencil-alt"
        dense
      >
      </q-toggle>
      <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>
        <!-- per immagine di ombra -->
        <div v-if="false" class="shadow-image-wrapper">
          <q-img
            src="images/ombra.png"
            :style="{
              position: 'absolute',
              justifyContent: 'center',
              width:
                tools.adjustSize(
                  optcatalogo,
                  scheda.dimensioni?.immagine_prodotto?.size.width,
                  10
                ) ?? '100%',
              height: tools.adjustSize(
                optcatalogo,
                scheda.dimensioni?.immagine_prodotto?.size.height,
                10
              ),
              zIndex: 1,
            }"
          >
          </q-img>
        </div>
        <div
          :class="[
            'flex', // Classi comuni
            'image-container',
            { 'shadow-2': options.in_3d && !optcatalogo.pdf }, // Classe condizionale
            scheda.testo_right.font?.posiz_text ===
            costanti.POSIZ_TESTO.IN_BASSO
              ? 'flex-col'
              : 'flex-row', // Layout flessibile
          ]"
          :style="{
            justifyContent:
              scheda.testo_right.font?.posiz_text ===
              costanti.POSIZ_TESTO.IN_BASSO
                ? 'center'
                : 'flex-start',
            alignItems: 'stretch', // Cambiato in 'stretch' per occupare l'altezza
            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
            ),
          }"
        >
          <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>
          <span v-if="false && !optcatalogo.generazionePDFInCorso && editOn" class="prod_disp">
            <CMyValueDb
              v-if="editOn"
              :editOn="editOn"
              :title="t('products.stockQty')"
              table="products"
              :id="myproduct._id"
              :rec="myproduct"
              mykey="stockQty"
              debounce="1000"
              :save="updateproductmodif()"
              :type="costanti.FieldType.number"
            >
            </CMyValueDb>
          </span>

          <!-- Testo associato all'immagine -->
          <div
            :style="{
              width:
                scheda.testo_right.font?.posiz_text ===
                costanti.POSIZ_TESTO.IN_BASSO
                  ? '100%'
                  : scheda.testo_right.font?.perc_text ?? '50%',
              marginTop:
                scheda.testo_right.font?.posiz_text ===
                costanti.POSIZ_TESTO.IN_BASSO
                  ? '0.5rem'
                  : '0',
            }"
          >
            <div
              v-if="scheda.testo_right && scheda.testo_right"
              :style="{
                '--scalecatalog': optcatalogo.areadistampa.scale,
                'line-height': scheda.testo_right.font?.line_height,
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
              }"
            >
              <div
                v-html="
                  products.replaceKeyWordsByProduct(
                    optcatalogo,
                    myproduct,
                    scheda.testo_right
                  )
                "
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  height: 100%;
                "
              ></div>
              <div class="row justify-center">
                <div v-if="scheda.barcode && scheda.barcode.show">
                  <CBarCode
                    :value="myproduct.productInfo.code"
                    :format="scheda.barcode.format"
                    :fontsize="scheda.barcode.font?.size"
                    :width="
                      parseInt(
                        tools.adjustSize(
                          optcatalogo,
                          scheda.barcode.size?.width
                        )
                      )
                    "
                    :widthlines="scheda.barcode.widthlines"
                    :height="scheda.barcode.size?.height"
                  >
                  </CBarCode>
                </div>
                <div
                  v-if="
                    scheda.etichette?.bestseller?.show && isProductBestseller()
                  "
                >
                  <q-img
                    src="images/bestseller.png"
                    alt="Bestseller"
                    :width="(40 * optcatalogo.areadistampa.scale) + 'px'"
                    :height="(40 * optcatalogo.areadistampa.scale) + '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 * optcatalogo.areadistampa.scale) + 'px'"
                    :height="(40 * optcatalogo.areadistampa.scale) + 'px'"
                    fit="contain"
                  ></q-img>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="scheda.testo_bottom && scheda.testo_bottom.contenuto"
            :style="{
              width: '100%',
            }"
          >
            <div
              :style="{
                '--scalecatalog': optcatalogo.areadistampa.scale,
                'line-height': scheda.testo_bottom.font?.line_height,
              }"
              v-html="
                products.replaceKeyWordsByProduct(
                  optcatalogo,
                  myproduct,
                  scheda.testo_bottom
                )
              "
            ></div>
          </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="bottom">
        <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>
  </div>
</template>

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

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