<template>
  <div class="q-pa-md row items-start q-gutter-md">
    <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />

    <q-card :class="getmycardcl()" v-if="!!myproduct && endload" bordered>
      <q-img
        :src="`` + myproduct.img"
        :alt="myproduct.name"
        :class="getclimgproduct()"
      ></q-img>

      <q-list>
        <q-item>
          <q-btn
            v-if="!complete"
            fab
            color="primary"
            icon="fas fa-info"
            class="absolute semi-transparent"
            style="top: 0; right: 12px; transform: translateY(-50%)"
            :to="`/product/` + myproduct.code"
          />

          <div class="row items-center centeritems">
            <div class="text-h7 boldhigh">
              {{ myproduct.name }}
            </div>
            <div class="product_code">
              &nbsp; {{$t('ecomm.codice')}}: {{ myproduct.code }}
            </div>
          </div>
        </q-item>
        <q-item>
          <div v-if="complete" class="row items-center">
            <div class="text-title text-grey-9">
              <span class="text-grey-7" v-html="myproduct.description"></span>
            </div>
          </div>
        </q-item>
        <q-item>
          <q-item-section avatar>
            <q-icon color="moneygreen" name="fas fa-euro-sign" />
          </q-item-section>

          <q-item-section>
            <q-item-label>
              {{ t('products.price') }}
            </q-item-label>
            <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-list>
      <div v-if="true">
        <div v-if="complete && myproduct.producer && 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>
        <div
          v-if="complete && myproduct.weight"
          class="text-grey text-title row items-center"
        >
          <q-icon name="fas fa-balance-scale" class="q-mr-xs" />
          {{ t('products.weight') }}:
          <span class="text-black q-ml-xs text-h8" v-if="myproduct.unit">
            {{ myproduct.weight }}
            {{ tools.getUnitsMeasure(myproduct.unit, true) }}</span
          >
        </div>
      </div>

      <!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->

      <div>
        <q-list>
          <q-item
            :clickable="tools.isManager()"
            @click="tools.isManager() ? (visuListDisponibili()) : null"
          >
            <q-item-section avatar>
              <q-icon
                color="green"
                name="fas fa-store"
              />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                {{ t('ecomm.available') }}
              </q-item-label>
              <q-item-label>
                <span class="prod_disp">
                  {{ getQtyAvailable() }}
                </span>
                <div class="prod_qtywarn">
                  {{ getQtyWarn() }}

                  <div
                    v-if="
                      tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
                    "
                  >
                    {{
                      $t('ecomm.qta_in_attesa', {
                        qty: myproduct.QuantitaOrdinateInAttesa,
                      })
                    }}
                  </div>
                </div>
              </q-item-label>
              <q-item-label> </q-item-label>
            </q-item-section>
          </q-item>
          <q-item
            v-if="getQtyBookableAvailable() > 0 || (myproduct.bookableQty > 0)"
            :clickable="tools.isManager()"
            @click="tools.isManager() ? (visuListBookable()) : null"
          >
            <q-item-section avatar>
              <q-icon color="blue" name="fas fa-edit" />
            </q-item-section>

            <q-item-section>
              <q-item-label>
                {{ t('ecomm.preorders') }}
              </q-item-label>
              <q-item-label>
                <span class="prod_preorder">
                  {{ getQtyBookableAvailable() }}
                </span>
                <div class="prod_qtywarn">
                  <span v-if="getQtyWarnPreOrdered()">{{
                    getQtyWarnPreOrdered()
                  }}</span>

                  <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>
        </q-list>
        <div class="row q-mb-sm no-wrap items-center centeritems">
          <q-btn
            icon="fas fa-cart-arrow-down"
            :color="enableSubQty() ? 'negative' : 'grey'"
            :disable="checkifCartDisable() || !enableSubQty()"
            rounded
            size="md"
            :label="t('products.subcart', { qta: 1 })"
            @click="addtoCart(false)"
          >
          </q-btn>

          <q-field
            outlined
            dense
            style="width: 40px; height: 30px"
            class="q-mx-xs"
          >
            <template v-slot:control>
              <div class="self-center no-outline" tabindex="0">
                {{ myorder.quantity }}
              </div>
              <div
                v-if="myorder.quantitypreordered"
                class="self-center no-outline"
                tabindex="0"
              >
              </div>
            </template>
          </q-field>

          <q-btn
            icon-right="fas fa-cart-plus"
            color="positive"
            :disable="checkifCartDisable() || !enableAddQty()"
            rounded
            size="md"
            :label="t('products.addcart', { qta: 1 })"
            @click="addtoCart(true)"
          >
          </q-btn>
        </div>
        <div 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-shipping-fast" 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>
        </div>

        <q-card-actions vertical align="center">
          <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-sm"
            to="/checkout"
          ></q-btn>
          <!--
      <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
      </q-btn>
      -->
        </q-card-actions>
      </div>
    </q-card>
    <q-dialog v-model="openlistorders">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title>
            {{ t('ecomm.listaord') }} - {{ myproduct.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
                    >{{ ordcart.user.name }} {{ ordcart.user.surname }}</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>
  </div>
</template>

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

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