<template>
  <div class="row">
    <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
    <q-card
      :class="{
        'my-card-big': complete,
        'my-card-prod': !complete,
        'my-card-selected':
          myorder && myorder.quantity + myorder.quantitypreordered > 0,
      }"
      v-if="!!myproduct && endload && !!myproduct.productInfo"
      bordered
    >
      <q-toggle
        v-if="tools.isManager()"
        v-model="editOn"
        class="absolute-top-right"
        color="green"
        icon="fas fa-pencil-alt"
        dense
      >
      </q-toggle>
      <div v-if="!myproduct.active">
        <span class="text-bold text-white bg-red text-h6">{{
          t('ecomm.not_active')
        }}</span>
      </div>
      <q-card-section horizontal :class="'image-section'">
        <div v-if="hasImage()" :class="hasImage() ? 'image-container' : ''">
          <q-img
            :src="
              myproduct.productInfo.imagefile
                ? tools.getFullFileNameByImageFile(
                    'productInfos',
                    myproduct.productInfo.imagefile
                  )
                : myproduct.productInfo.image_link
            "
            :alt="myproduct.productInfo.name"
            class="cursor-pointer img-pic"
            @click="
              complete
                ? toggleFullScreen
                : naviga(`/product/` + myproduct._id + '/' + cosa)
            "
          ></q-img>
          <q-btn
            color="primary"
            round
            icon="fas fa-eye"
            class="absolute semi-transparent"
            size="md"
            @click="toggleFullScreen"
            style="
              bottom: -10px;
              right: 0px;
              transform: translateY(-50%);
              z-index: 2;
            "
          />
        </div>

        <q-list>
          <q-item>
            <q-item-section avatar>
              <q-icon
                color="moneygreen"
                name="fas fa-euro-sign"
                class="icone_prod"
              />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                <span class="prod_price" v-if="!!myproduct.price">{{
                  myproduct.price ? myproduct.price.toFixed(2) : 0
                }}</span>
                <span v-if="!!myproduct.after_price">{{
                  myproduct.after_price
                }}</span>
              </q-item-label>
              <q-item-label
                v-if="
                  myproduct.scontisticas && myproduct.scontisticas.length > 0
                "
              >
                <div
                  class="prod_sconti"
                  v-for="(sconti, index) of myproduct.scontisticas"
                  :key="index"
                >
                  {{ sconti.description }}
                </div>
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item>
            <q-item-section avatar v-if="myproduct.productInfo.weight">
              <q-icon name="fas fa-balance-scale" class="icone_prod" />
            </q-item-section>
            <q-item-section v-if="myproduct.productInfo.weight">
              <q-item-label>
                <span
                  class="text-black q-ml-xs text-h8"
                  v-if="myproduct.productInfo.unit"
                >
                  {{
                    tools.getWeightByUnit(
                      myproduct.productInfo.unit,
                      true,
                      myproduct.productInfo.weight
                    )
                  }}
                  {{
                    tools.getUnitsMeasure(
                      myproduct.productInfo.unit,
                      true,
                      myproduct.productInfo.weight
                    )
                  }}</span
                >
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-item
            v-if="
              (cosa === shared_consts.PROD.TUTTI && !isOrdGas()) ||
              cosa === shared_consts.PROD.BOTTEGA ||
              (cosa === shared_consts.PROD.GAS &&
                products.getQtyAvailable(myproduct) > 0)
            "
            :clickable="tools.isManager()"
            @click="
              tools.isManager() &&
              !editOn &&
              myproduct.QuantitaOrdinateInAttesa &&
              myproduct.QuantitaOrdinateInAttesa > 0
                ? visuListDisponibili()
                : null
            "
          >
            <q-item-section avatar>
              <q-icon color="green" name="fas fa-store" class="icone_prod" />
            </q-item-section>

            <q-item-section>
              <q-item-label class="subtit_prod">
                {{ t('ecomm.available') }}
              </q-item-label>
              <q-item-label>
                <span v-if="!editOn" class="prod_disp">
                  {{ products.getQtyAvailable(myproduct) }}
                </span>
                <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>
                <div class="prod_qtywarn">
                  <div
                    v-if="
                      tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
                    "
                  >
                    {{
                      t('ecomm.qta_in_attesa', {
                        qty: myproduct.QuantitaOrdinateInAttesa,
                      })
                    }}
                  </div>
                </div>
              </q-item-label>
            </q-item-section>
            <q-item-section
              v-if="
                tools.isManager() &&
                products.getQtyBloccataAvailable(myproduct) > 0
              "
            >
              <q-item-section avatar>
                <q-icon
                  name="fas fa-store"
                  style="padding-right: 16px !important"
                />
              </q-item-section>
              <q-item-section
                v-if="
                  tools.isManager() &&
                  products.getQtyBloccataAvailable(myproduct) > 0
                "
              >
                <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
                <q-item-label>
                  <span v-if="!editOn" class="text-black q-ml-xs text-h8">
                    {{ myproduct.stockBloccatiQty }}</span
                  >
                </q-item-label>
                <CMyValueDb
                  v-if="editOn"
                  :editOn="editOn"
                  :title="t('products.stockBloccatiQty')"
                  table="products"
                  :id="myproduct._id"
                  :rec="myproduct"
                  mykey="stockBloccatiQty"
                  debounce="1000"
                  @save="updateproductmodif"
                  :type="costanti.FieldType.number"
                >
                </CMyValueDb>
              </q-item-section>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>

      <q-card-section class="card_titolo_prod">
        <div class="column items-center centeritems">
          <div class="text-h7 boldhigh titolo_prod">
            {{ myproduct.productInfo.name }}
          </div>
          <div class="product_code">
            &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
          </div>
          <div v-if="false" class="barcode">
            <CBarCode :value="myproduct.productInfo.code" format="EAN-13" text="ISBN:">
            </CBarCode>

          </div>
          <div
            v-if="
              myproduct.productInfo.subcatprods &&
              myproduct.productInfo.subcatprods.length > 0
            "
            class="subcat"
          >
            <span style="color: #333333">{{ t('ecomm.subcat') }}:</span>
            <span class="subcat_color">{{
              myproduct.productInfo.subcatprods[0].name
            }}</span>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="complete && myproduct.productInfo.description">
        <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>
      <q-card-section v-if="complete && myproduct.productInfo.ingredienti">
        <div class="text-blue text-title row">
          <q-icon size="sm" name="fas fa-list-ul" class="q-mr-sm" />
          {{ t('products.ingredienti') }}
        </div>
        <div class="row items-center">
          <div class="text-title text-grey-9">
            <span
              class="text-grey-7"
              v-html="myproduct.productInfo.ingredienti"
            ></span>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="complete && myproduct.productInfo.link_scheda">
        <div v-if="complete" class="text-blue text-title row">
          <q-icon size="sm" name="fas fa-list-ul" class="q-mr-sm" />
          {{ t('products.link_scheda') }}
        </div>
        <div class="row items-center">
          <div class="text-title text-grey-9">
            <a :href="myproduct.productInfo.link_scheda" target="_blank"
              >Apri Scheda</a
            >
          </div>
        </div>
      </q-card-section>
      <q-card-section
        v-if="complete && myproduct.productInfo.valori_nutrizionali"
      >
        <div class="text-blue text-title row">
          <q-icon size="sm" name="fas fa-info" class="q-mr-sm" />
          {{ t('products.valori_nutrizionali') }}
        </div>
        <div class="row items-center">
          <div class="text-title text-grey-9">
            <span
              class="text-grey-7"
              v-html="myproduct.productInfo.valori_nutrizionali"
            ></span>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="complete || getnumstore() > 1">
        <div class="text-blue text-title row items-center q-mr-md centeritems">
          <q-icon size="sm" name="fas fa-people-carry" class="q-mr-sm" />
          {{ t('products.ritiro_presso') }}:
        </div>
        <div
          class="text-green-6 text-title row items-center q-my-sm centeritems"
        >
          <div v-if="getnumstore() > 1">
            <q-select
              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
              outlined
              v-model="storeSelected"
              :options="getStorehouses()"
              :label="t('products.magazzino') + `:`"
              emit-value
              map-options
            >
            </q-select>
          </div>
          <div v-else>
            <span class="text-title text-center">{{
              getSingleStorehouse()
            }}</span>
          </div>
        </div>
      </q-card-section>
      <q-card-section v-if="complete && myproduct.producer">
        <div v-if="myproduct.producer.city">
          <div class="text-grey text-title row items-center q-mt-sm">
            <q-icon name="map" class="q-mr-xs" />
            {{ t('products.origine') }}:
            <span class="text-blue q-ml-xs text-h8">
              {{ myproduct.producer.city }} ({{
                myproduct.producer.region
              }})</span
            >
          </div>
        </div>
        <div
          v-if="complete && myproduct.producer && myproduct.producer.name"
          class="text-grey text-title row items-center"
        >
          <q-icon name="place" class="q-mr-xs" />
          {{ t('products.producer') }}:
          <span class="text-black q-ml-xs text-h8">
            {{ myproduct.producer.name }}</span
          >
        </div>
      </q-card-section>

      <q-card-section v-if="myproduct.productInfo.note" class="q-pa-none">
        <q-item>
          <q-item-section avatar>
            <q-icon color="black" name="fas fa-book" />
          </q-item-section>

          <q-item-section>
            <q-item-label class="">
              <CMyValueDb
                v-if="editOn"
                title=""
                :editOn="editOn"
                table="productinfos"
                :id="myproduct.productInfo._id"
                :rec="myproduct.productInfo"
                mykey="note"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.string"
              >
              </CMyValueDb>
              <div v-if="!editOn" v-html="myproduct.productInfo.note"></div>
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-card-section>
      <q-card-section
        v-if="
          editOn &&
          (!!myproduct.productInfo.imagefile ||
            myproduct.productInfo.imagefile === '')
        "
      >
        <div class="text-center">
          <div class="col">
            <strong>Scegli l'Immagine:</strong>
          </div>

          <div class="row justify-center">
            <CMyValueDb
              v-if="editOn"
              :editOn="editOn"
              :title="t('products.imagefile')"
              table="productinfos"
              :id="myproduct.productInfo._id"
              :rec="myproduct.productInfo"
              mykey="imagefile"
              debounce="1000"
              @save="updateproductmodif"
              :type="costanti.FieldType.image"
            >
            </CMyValueDb>
          </div>
          {{ myproduct.productInfo.imagefile }}
        </div>

        <!--<CMyFieldRec
          title="Immagine:"
          table="myelems"
          :id="myproduct.productInfo._id"
          :rec="myproduct.productInfo"
          field="imagefile"
          @update:model-value="modifElem"
          :canEdit="true"
          :canModify="true"
          :fieldtype="costanti.FieldType.image"
        >
        </CMyFieldRec>-->
      </q-card-section>
      <q-card-section v-if="isOrdGas()">
        <q-item
          v-if="
            (myproduct.bookableAvailableQty > 0 &&
              myproduct.bookableAvailableQty < shared_consts.MAX_QTA_PREORD) ||
            (myproduct.maxbookableGASQty > 0 &&
              myproduct.maxbookableGASQty < shared_consts.MAX_QTA_PREORD) ||
            editOn
          "
          :clickable="tools.isManager()"
          @click="
            tools.isManager() &&
            !editOn &&
            myproduct.QuantitaPrenotateInAttesa &&
            myproduct.QuantitaPrenotateInAttesa > 0
              ? visuListBookable()
              : null
          "
        >
          <q-item-section avatar>
            <q-icon color="blue" name="fas fa-edit" />
          </q-item-section>

          <q-item-section>
            <q-item-label class="subtit_prod">
              {{ t('ecomm.preorders') }}
            </q-item-label>
            <q-item-label>
              <span v-if="!editOn" class="prod_preorder">
                {{ myproduct.bookableAvailableQty }}
              </span>
              <CMyValueDb
                v-if="editOn"
                :editOn="editOn"
                :title="t('products.bookableAvailableQty')"
                table="products"
                :id="myproduct._id"
                :rec="myproduct"
                mykey="bookableAvailableQty"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.number"
              >
              </CMyValueDb>
              <CMyValueDb
                v-if="editOn"
                :editOn="editOn"
                :title="t('products.maxbookableGASQty')"
                table="products"
                :id="myproduct._id"
                :rec="myproduct"
                mykey="maxbookableGASQty"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.number"
              >
              </CMyValueDb>
              <div class="prod_qtywarn">
                <div
                  v-if="
                    tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
                  "
                >
                  {{
                    t('ecomm.qta_prenotate_in_attesa', {
                      qty: myproduct.QuantitaPrenotateInAttesa,
                    })
                  }}
                </div>
              </div>
            </q-item-label>
          </q-item-section>
          <q-item-section
            v-if="
              tools.isManager() &&
              products.getQtyBloccataBookableAvailable(myproduct) > 0
            "
          >
            <q-item-section avatar>
              <q-icon
                name="fas fa-store"
                style="padding-right: 16px !important"
              />
            </q-item-section>
            <q-item-section>
              <q-item-label class="subtit_prod">
                {{ t('ecomm.bloccati') }}:
              </q-item-label>
              <q-item-label>
                <span v-if="!editOn" class="text-black q-ml-xs text-h8">
                  {{ myproduct.bookableGASBloccatiQty }}</span
                >
                <CMyValueDb
                  v-if="editOn"
                  :editOn="editOn"
                  :title="t('products.bookableGASBloccatiQty')"
                  table="products"
                  :id="myproduct._id"
                  :rec="myproduct"
                  mykey="bookableGASBloccatiQty"
                  debounce="1000"
                  @save="updateproductmodif"
                  :type="costanti.FieldType.number"
                >
                </CMyValueDb>
                <CMyValueDb
                  :editOn="editOn"
                  :title="t('products.bookedGASQtyConfirmed')"
                  table="products"
                  :id="myproduct._id"
                  :rec="myproduct"
                  mykey="bookedGASQtyConfirmed"
                  debounce="1000"
                  @save="updateproductmodif"
                  :type="costanti.FieldType.number"
                >
                </CMyValueDb>
              </q-item-label>
            </q-item-section>
          </q-item-section>
        </q-item>
        <q-item
          v-if="
            myproduct.gasordine &&
            myproduct.gasordine.active &&
            myproduct.idGasordine
          "
        >
          <q-item-section avatar>
            <q-icon color="blue" name="fas fa-shipping-fast" />
          </q-item-section>
          <q-item-section>
            <q-item-label class="subtit_prod">
              {{ t('products.gasordine') }}
            </q-item-label>
            <q-item-label>
              <span class="text-title text-center">{{
                myproduct.gasordine.name
              }}</span>
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item v-if="isOrdGas() && myproduct.qtyToReachForGas > 0">
          <q-item-section avatar>
            <q-icon
              v-if="getpercqtaraggiunta() < 1"
              color="orange"
              name="fas fa-lightbulb"
            />
            <q-icon v-else color="green" name="fas fa-check" />
          </q-item-section>

          <q-item-section>
            <q-item-label class="subtit_prod text-blue text-bold">
              <span v-if="getpercqtaraggiunta() >= 1">{{
                t('ecomm.offerta_gas_raggiunta', {
                  qta:
                    myproduct.qtyToReachForGas * myproduct.productInfo.weight,
                  unit: tools.getUnitsMeasure(
                    myproduct.productInfo.unit,
                    true,
                    myproduct.productInfo.weight
                  ),
                })
              }}</span>
              <span v-else>{{
                t('ecomm.offerta_gas', {
                  qta:
                    myproduct.qtyToReachForGas * myproduct.productInfo.weight,
                  unit: tools.getUnitsMeasure(
                    myproduct.productInfo.unit,
                    true,
                    myproduct.productInfo.weight
                  ),
                })
              }}</span>
            </q-item-label>
            <div class="row">
              <CMyValueDb
                v-if="editOn"
                :editOn="editOn"
                :title="t('ecomm.bookedGASQtyOrdered')"
                table="products"
                :id="myproduct._id"
                :rec="myproduct"
                mykey="bookedGASQtyOrdered"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.number"
              >
              </CMyValueDb>
              <CMyValueDb
                v-if="editOn"
                :editOn="editOn"
                :title="t('ecomm.qtyToReachForGas')"
                table="products"
                :id="myproduct._id"
                :rec="myproduct"
                mykey="qtyToReachForGas"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.number"
              >
              </CMyValueDb>
            </div>
            <q-item-label>
              <span class="prod_disp">
                {{
                  t('ecomm.bookedGASQtyOrdered_str', {
                    qta:
                      (myproduct.bookableGASBloccatiQty +
                        myproduct.QuantitaPrenotateInAttesa) *
                      myproduct.productInfo.weight,
                    qtatot:
                      myproduct.qtyToReachForGas * myproduct.productInfo.weight,
                  })
                }}
                <q-linear-progress size="10px" :value="getpercqtaraggiunta()" />
              </span>
              <div class="prod_qtywarn">
                <div
                  v-if="
                    tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
                  "
                >
                  {{
                    t('ecomm.qta_in_attesa', {
                      qty: myproduct.QuantitaOrdinateInAttesa,
                    })
                  }}
                </div>
              </div>
            </q-item-label>
          </q-item-section>
          <q-item-section
            v-if="
              tools.isManager() &&
              products.getQtyBloccataAvailable(myproduct) > 0
            "
          >
            <q-item-section avatar>
              <q-icon
                name="fas fa-store"
                style="padding-right: 16px !important"
              />
            </q-item-section>
            <q-item-section
              v-if="
                tools.isManager() &&
                products.getQtyBloccataAvailable(myproduct) > 0
              "
            >
              <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
              <q-item-label>
                <span class="text-black q-ml-xs text-h8">
                  {{ products.getQtyBloccataAvailable(myproduct) }}</span
                >
              </q-item-label>
            </q-item-section>
          </q-item-section>
        </q-item>
        <q-item
          v-if="
            myproduct.gasordine &&
            myproduct.gasordine.active &&
            (myproduct.gasordine.dataora_chiusura_ordini || editOn)
          "
        >
          <q-item-section avatar>
            <q-icon color="blue" name="fas fa-hourglass-half" />
          </q-item-section>

          <q-item-section>
            <q-item-label class="countdown_scadenza">
              <span v-if="timerLabelScadenza">{{ timerLabelScadenza }}</span>
              <span v-else-if="isOrdineChiuso()">{{
                t('ecomm.ordine_scaduto')
              }}</span>
              <CMyValueDb
                :editOn="editOn"
                :title="t('gas.dataora_chiusura_ordini')"
                table="gasordines"
                :id="myproduct.gasordine._id"
                :rec="myproduct.gasordine"
                mykey="dataora_chiusura_ordini"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.date"
                :justifycenter="false"
              >
              </CMyValueDb>
            </q-item-label>
          </q-item-section>
        </q-item>

        <q-item
          v-if="
            myproduct.gasordine &&
            myproduct.gasordine.active &&
            (labelDataArrivoMerce || editOn)
          "
        >
          <q-item-section avatar>
            <q-icon color="red" name="fas fa-shipping-fast" />
          </q-item-section>

          <q-item-section class="subtit_prod">
            <q-item-label class="countdown_scadenza">
              <CMyValueDb
                :editOn="editOn"
                :title="t('gas.data_arrivo_merce')"
                table="gasordines"
                :id="myproduct.gasordine._id"
                :rec="myproduct.gasordine"
                mykey="data_arrivo_merce"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.date"
                :justifycenter="false"
              >
              </CMyValueDb>
            </q-item-label>
          </q-item-section>
        </q-item>
        <q-item
          v-if="
            myproduct.gasordine &&
            myproduct.gasordine.active &&
            (labelDataRitiro || editOn)
          "
        >
          <q-item-section avatar>
            <q-icon color="green" name="fas fa-people-carry" />
          </q-item-section>

          <q-item-section>
            <q-item-label class="countdown_scadenza">
              <CMyValueDb
                :editOn="editOn"
                :title="t('gas.dataora_ritiro')"
                table="gasordines"
                :id="myproduct.gasordine._id"
                :rec="myproduct.gasordine"
                mykey="dataora_ritiro"
                :justifycenter="false"
                debounce="1000"
                @save="updateproductmodif"
                :type="costanti.FieldType.onlydate"
              >
              </CMyValueDb>
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-card-section>

      <q-separator />

      <q-card-section>
        <div class="row justify-evenly">
          <q-btn
            icon="fas fa-cart-arrow-down"
            :color="
              checkifCartDisable() || !products.enableSubQty(myorder)
                ? 'grey'
                : 'negative'
            "
            :disable="checkifCartDisable() || !products.enableSubQty(myorder)"
            rounded
            size="md"
            :label="
              t('products.subcart', {
                qta: products.qtaNextSub(myorder, myproduct),
              })
            "
            @click="addtoCart(false)"
          >
          </q-btn>

          <q-field outlined dense class="q-mx-xs">
            <template v-slot:control>
              <div class="no-outline label-qta text-center" tabindex="0">
                {{ myorder.quantity + myorder.quantitypreordered }}
              </div>
            </template>
          </q-field>

          <q-btn
            icon-right="fas fa-cart-plus"
            :color="
              checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
                ? 'grey'
                : 'positive'
            "
            :disable="
              checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
            "
            rounded
            size="md"
            :label="
              t('products.addcart', {
                qta: products.qtaNextAdd(myorder, myproduct),
              })
            "
            @click="addtoCart(true)"
          >
          </q-btn>
          <q-btn
            v-if="!complete && myproduct.productInfo.link_scheda"
            rounded
            color="primary"
            icon="fas fa-file-alt"
            label="Dettagli Scheda"
            class="q-mb-xs q-mt-md"
            @click="apriSchedaPDF = true"
          />
          <q-btn
            v-else-if="!complete"
            rounded
            color="primary"
            icon="fas fa-info"
            label="Dettagli"
            class="q-mb-xs q-mt-md"
            :to="`/product/` + myproduct._id + '/' + cosa"
          />

          <q-btn
            v-if="myorder.quantity + myorder.quantitypreordered > 0"
            rounded
            icon="fas fa-shopping-cart"
            color="primary"
            :label="t('ecomm.btn_cassa')"
            class="q-mb-xs q-mt-md"
            to="/checkout"
          ></q-btn>
        </div>
      </q-card-section>
      <div v-if="editOn">
        <div v-if="!isOrdGas()" class="row">
          <CMyValueDb
            :editOn="editOn"
            :title="t('products.bookedQtyOrdered')"
            table="products"
            :id="myproduct._id"
            :rec="myproduct"
            mykey="bookedQtyOrdered"
            debounce="1000"
            @save="updateproductmodif"
            :type="costanti.FieldType.number"
          >
          </CMyValueDb>
          <CMyValueDb
            :editOn="editOn"
            :title="t('products.bookedQtyConfirmed')"
            table="products"
            :id="myproduct._id"
            :rec="myproduct"
            mykey="bookedQtyConfirmed"
            debounce="1000"
            @save="updateproductmodif"
            :type="costanti.FieldType.number"
          >
          </CMyValueDb>
        </div>
        <q-separator> </q-separator>
        <div class="text-center">
          <q-btn
            rounded
            icon="fas fa-sync-alt"
            color="primary"
            :label="t('ecomm.ricarica')"
            @click="ricarica()"
          ></q-btn>
        </div>
      </div>
      <div v-if="editOn">{{ t('ecomm.active') }}:</div>
      <CMyValueDb
        title=""
        v-if="editOn"
        :editOn="editOn"
        table="products"
        :id="myproduct._id"
        :rec="myproduct"
        mykey="active"
        debounce="1000"
        @save="updateproductmodif"
        :type="costanti.FieldType.boolean"
      >
      </CMyValueDb>
    </q-card>

    <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
              ? tools.getFullFileNameByImageFile(
                  'productInfos',
                  myproduct.productInfo.imagefile
                )
              : myproduct.productInfo.image_link
          "
          :alt="myproduct.productInfo.name"
          :fit="tools.isMobile() ? 'fill' : 'cover'"
          class="fullscreen-image"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
          ref="fullscreenImage"
        />
        <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="./CProductCard.ts">
</script>

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