<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 class="col-6" style="text-align: right">
          <span v-if="myTotalPrice" class="text-grey q-mr-xs">Totale:</span>
          <span class="text-subtitle1 q-mr-sm"
            >€ {{ myTotalPrice ? myTotalPrice.toFixed(2) : 0 }}</span
          >
        </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="ordersCart ? ordersCart._id: ''"> </CSingleCart>
        </div>
      </div>
      <div v-if="numOrders === 0" style="text-align: center" class="text-grey">
        {{ $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
          icon="fas fa-clipboard-list"
          color="positive"
          :label="t('ecomm.btn_ordini')"
          class="q-mb-sm"
          @click="globalStore.rightCartOpen = false"
          to="/orderinfo"
        >
        </q-btn>
      </div>
    </div>
  </div>
</template>

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

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