<template>
  <div class="row items-start q-gutter-sm">
    <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
    <div
      v-if="!!myproduct && !!myproduct.productInfo"
      :class="{
        'my-card-big': complete,
        'book-card book-details': !complete,
      }"
    >
      <q-toggle
        v-if="tools.isManager()"
        v-model="editOn"
        class="absolute-top-right"
        color="green"
        icon="fas fa-pencil-alt"
        dense
      >
      </q-toggle>
      <q-card-section>
        <div class="flex" style="place-content: center">
          <q-img
            :src="
              myproduct.productInfo.img
                ? `` + myproduct.productInfo.img
                : myproduct.productInfo.image_link
            "
            :alt="myproduct.productInfo.name"
            :class="{
              'book-image-fixed': complete,
              'cursor-pointer': !complete,
            }"
            @click="
              complete
                ? toggleFullScreen
                : naviga(`/catalogo/` + myproduct._id + '/' + cosa)
            "
          >
          </q-img>
          <q-btn
            color="blue"
            round
            icon="search"
            class="absolute semi-transparent ingrandisci"
            size="md"
            @click="toggleFullScreen"
            style="left: 55%; top: 5px; transform: translateX(-50%)"
          />

          <div class="scheda-book">
            <q-card-title class="book-title"
              >{{ myproduct.productInfo.name }}
            </q-card-title>
            <q-card-subtitle
              v-if="myproduct.productInfo.authors"
              class="book-author"
            >
              <span
                v-for="author in myproduct.productInfo.authors"
                :key="author._id"
              >
                {{ author.name }} {{ author.surname }}
              </span>
            </q-card-subtitle>
            <q-card-main
              v-if="myproduct.productInfo.short_descr"
              class="book-short-descr"
              >{{
                tools.firstchars(myproduct.productInfo.short_descr, 200, true)
              }}</q-card-main
            >

            <div v-if="myproduct.isbn" class="book-isbn">
              ISBN: {{ myproduct.isbn }}
            </div>
            <div v-if="myproduct.productInfo.numpages" class="book-pages">
              Pagine: {{ myproduct.productInfo.numpages }}
            </div>
            <div
              v-if="myproduct.productInfo.date_publishing"
              class="book-data-pub"
            >
              Data Pubblicazione:
              {{ tools.getstrDate(myproduct.productInfo.date_publishing) }}
            </div>

            <q-separator class="q-my-sm"></q-separator>

            <div
              :class="
                `row items-center q-pa-nome block-variazione ` +
                (indvariazSel == index ? 'block-variazione-selected' : '')
              "
              v-for="(variazione, index) of myproduct.arrvariazioni"
              :key="index"
              @click="setvariazioneSelected(index)"
            >
              <div class="flex justify-between items-center q-mx-sm">
                <q-badge
                  v-if="variazione.versione > 0"
                  :color="
                    shared_consts.VERSIONI_PRODOTTO[variazione.versione].color
                  "
                  >{{
                    shared_consts.VERSIONI_PRODOTTO[variazione.versione].label
                  }}</q-badge
                >
                <div v-if="variazione.formato && false">
                  formato: {{ variazione.formato }}
                </div>
                <div v-if="variazione.tipologia && false">
                  tipologia: {{ variazione.tipologia }}
                </div>
                <div v-if="variazione.edizione && false">
                  edizione: {{ variazione.edizione }}
                </div>
                <div v-if="variazione.status && false">
                  status: {{ variazione.status }}
                </div>
                <div v-if="variazione.preOrderDate">
                  preOrderDate: {{ variazione.preOrderDate }}
                </div>
              </div>
              <q-item-section>
                <q-item-label>
                  <span class="prod_sale_price" v-if="!!variazione.sale_price"
                    >{{
                      variazione.sale_price
                        ? variazione.sale_price.toFixed(2)
                        : 0
                    }}
                    €</span
                  >
                  <span
                    :class="
                      variazione.sale_price ? 'prod_off_price' : 'prod_price'
                    "
                    v-if="!!variazione.price"
                    >{{ variazione.price ? variazione.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-section side v-if="!!variazione.quantita">
                <q-icon
                  v-if="variazione.quantita > 10"
                  :color="tools.colordisponib(variazione.quantita)"
                  name="fas fa-check"
                />
                <q-icon
                  v-else-if="
                    variazione.quantita > 3 && variazione.quantita <= 10
                  "
                  :color="tools.colordisponib(variazione.quantita)"
                  name="fas fa-exclamation"
                />
                <q-icon
                  v-else-if="
                    variazione.quantita > 0 && variazione.quantita <= 3
                  "
                  :color="tools.colordisponib(variazione.quantita)"
                  name="fas fa-exclamation"
                />
                <q-icon
                  v-else-if="variazione.quantita === 0"
                  :color="tools.colordisponib(variazione.quantita)"
                  name="fas fa-times"
                />
              </q-item-section>
            </div>
            <q-slide-transition>
              <div v-if="indvariazSel >= 0">
                <div
                  v-if="
                    indvariazSel >= 0 &&
                    tools.disponibStr(
                      myproduct.arrvariazioni[indvariazSel].quantita
                    )
                  "
                  class="row justify-center q-mt-sm vertical-middle"
                  style="align-items: center"
                >
                  <span class="q-mr-sm"
                    >{{ $t('ecomm.disponibilita') }}:&nbsp;</span
                  >
                  <q-chip
                    size="md"
                    dense
                    text-color="white"
                    :color="
                      tools.colordisponib(
                        myproduct.arrvariazioni[indvariazSel].quantita
                      )
                    "
                    >{{
                      tools.disponibStr(
                        myproduct.arrvariazioni[indvariazSel].quantita
                      )
                    }}</q-chip
                  >
                </div>
                <div
                  v-if="indvariazSel >= 0"
                  class="row justify-center vertical-middle"
                  style="align-items: center"
                >
                  <span class="q-mr-sm">{{ $t('products.price') }}:</span>
                  <span
                    class="prod_sale_price text-bold"
                    v-if="!!myproduct.arrvariazioni[indvariazSel].sale_price"
                    >{{
                      myproduct.arrvariazioni[indvariazSel].sale_price
                        ? myproduct.arrvariazioni[
                            indvariazSel
                          ].sale_price.toFixed(2)
                        : 0
                    }}
                    €</span
                  >
                  <span
                    :class="
                      myproduct.arrvariazioni[indvariazSel].sale_price
                        ? 'prod_off_price'
                        : 'prod_price'
                    "
                    v-if="!!myproduct.arrvariazioni[indvariazSel].price"
                    >{{
                      myproduct.arrvariazioni[indvariazSel].price
                        ? myproduct.arrvariazioni[indvariazSel].price.toFixed(2)
                        : 0
                    }}
                    €
                  </span>
                  <span v-if="!!myproduct.after_price">{{
                    myproduct.after_price
                  }}</span>
                </div>
                <div
                  v-if="
                    indvariazSel >= 0 &&
                    !!myproduct.arrvariazioni[indvariazSel].formato
                  "
                  class="row justify-center q-ma-sm vertical-middle"
                  style="align-items: center"
                >
                  <span class="q-mr-sm">{{ $t('products.formato') }}:</span>
                  <q-badge
                    v-if="myproduct.arrvariazioni[indvariazSel].versione > 0"
                    :color="
                      shared_consts.VERSIONI_PRODOTTO[
                        myproduct.arrvariazioni[indvariazSel].versione
                      ].color
                    "
                    >{{
                      myproduct.arrvariazioni[indvariazSel].formato
                    }}</q-badge
                  >
                </div>

                <div
                  v-if="indvariazSel >= 0"
                  class="row justify-center q-mt-sm"
                >
                  <q-btn
                    v-if="
                      myproduct.arrvariazioni[indvariazSel].addtocart_link &&
                      true
                    "
                    :href="myproduct.arrvariazioni[indvariazSel].addtocart_link"
                    target="_blank"
                    color="primary"
                    icon="fas fa-cart-plus"
                    no-caps
                    :label="$t('products.addtocart_ext')"
                  ></q-btn>
                  <q-btn
                    v-if="myproduct.productInfo.checkout_link && true"
                    :href="myproduct.productInfo.checkout_link"
                    target="_blank"
                    color="white"
                    icon="fas fa-shopping-cart"
                    outline
                    text-color="black"
                    no-caps
                    :label="$t('ecomm.carrello')"
                  ></q-btn>
                </div>
              </div>
            </q-slide-transition>
          </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>
              <th>Data</th>
              <th>Persona</th>
              <th>Stato</th>
              <th>Quantita</th>
              <th>Note</th>
            </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.img
              ? `` + myproduct.productInfo.img
              : myproduct.productInfo.image_link
          "
          :alt="myproduct.productInfo.name"
          :fit="tools.isMobile() ? 'fill' : 'none'"
          @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="./CCatalogoCard.ts">
</script>

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