<template>
  <div>
    <div id="mycontainer">
      <div class="myheader row justify-between">
        <div class="col-6">
          <!--<q-btn
            class="q-mx-xs"
            round
            dense
            flat
            icon="fas fa-shopping-cart"
          >
            <q-badge
              v-if="getnumItemsCart() > 0"
              color="red"
              floating
              transparent
            >
              {{ getnumItemsCart() }}
            </q-badge>
          </q-btn>-->
        </div>
        <div
          v-if="numOrders > 0 && totalPriceIntero"
          class="q-mr-sm"
        >
          <table class="table">
            <tbody>
              <tr>
                <td class="label">{{ t('ecomm.prezzointero') }}:</td>
                <td
                  class="value text-subtitle1 text-right"
                  :class="{ 'text-strike': myTotalPrice !== totalPriceIntero }"
                >
                  € {{ totalPriceIntero }}
                </td>
              </tr>
              <tr v-if="recOrderCart.codice_sconto">
                <td class="label">{{ t('ecomm.sconto_appl') }}:</td>
                <td>
                  <div class="column items-center">
                    <q-chip
                      square
                      color="orange"
                      text-color="white"
                      size="md"
                      icon="fas fa-tag"
                    >
                      <span class="sconto-text">{{ recOrderCart.descr_sconto }}</span>
                    </q-chip>
                  </div>
                </td>
              </tr>

              <tr v-if="!recOrderCart.codice_sconto">
                <td class="label">{{ t('ecomm.codice_sconto') }}:</td>
                <td>
                  <q-input
                    v-model="codice_sconto"
                    :label="$t('ecomm.codice_sconto')"
                    style="width: 200px"
                    filled
                    dense
                    @keyup.enter="confermaCodiceSconto"
                  />
                  <q-btn
                    :disabled="!codice_sconto || codice_sconto.trim() === ''"
                    :label="$t('ecomm.applica_sconto')"
                    icon="fas fa-check-circle"
                    color="primary"
                    class="q-mt-sm self-center"
                    @click="confermaCodiceSconto"
                  />
                </td>
              </tr>

              <tr>
                <td class="label">{{ t('ecomm.totale_scontato') }}:</td>
                <td class="ordine_scontato_nuovo text-right">€ {{ myTotalPrice }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <q-separator></q-separator>
      <div id="mybody">
        <div
          v-for="(rec, index) in ordersCart"
          :key="index"
          class="col"
        >
          <CSingleCart
            :order="rec.order"
            :showall="false"
            :idOrdersCart="idOrdersCart ? idOrdersCart : ''"
          >
          </CSingleCart>
        </div>
      </div>
      <div
        v-if="numOrders === 0"
        style="text-align: center"
        class="text-grey q-ma-md q-pa-md"
      >
        {{ t('ecomm.carrello_vuoto') }}
      </div>
      <div
        v-else
        style="text-align: center"
      >
        <div class="text-center">
          <q-btn
            rounded
            icon="fas fa-shopping-cart"
            color="primary"
            :label="t('ecomm.btn_cassa')"
            @click="globalStore.rightCartOpen = false"
            class="q-mb-sm"
            to="/checkout"
          >
          </q-btn>
        </div>
      </div>
      <div class="text-center">
        <q-btn
          v-if="existsOrders()"
          rounded
          outline
          icon="fas fa-clipboard-list"
          style="color: green"
          :label="t('ecomm.btn_ordini')"
          class="q-mb-sm"
          @click="globalStore.rightCartOpen = false"
          to="/orderinfo"
        >
        </q-btn>
      </div>
    </div>
    <div
      v-if="caricamentodati"
      class="overlay"
    >
      <q-spinner-hourglass
        color="primary"
        size="50px"
      />
    </div>
  </div>
</template>

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

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