<template>
  <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
  <div v-if="endload">
    <CSelectUserActive></CSelectUserActive>
    <div v-if="recOrderCart" class="panel">
      <div>
        <div class="container">
          <div
            class="q-pa-sm col items-start q-gutter-xs"
            v-for="(itemorder, index) in getItemsCart()"
            :key="index"
          >
            <CSingleCart
              :order="itemorder.order"
              :idOrdersCart="recOrderCart._id"
              :showall="true"
            />
          </div>
        </div>
        <q-separator></q-separator>
        <div class="col-6 q-mr-sm" style="text-align: right">
          <span class="text-grey q-mr-xs">{{ $t('ecomm.totale') }}:</span>
          <span class="text-subtitle1 q-mr-sm">€ {{ myTotalPrice() }}</span>
        </div>

        <q-input
          v-if="getNumItems() > 0"
          v-model="note"
          style="max-width: 400px"
          :label="$t('ecomm.note')"
          filled
          dense
          debounce="1000"
          autogrow
          @input="change_field('note')"
        >
        </q-input>
      </div>
      <div class="text-center">
        <q-btn
          v-if="
            recOrderCart &&
            recOrderCart.status < shared_consts.OrderStatus.CHECKOUT_SENT
          "
          rounded
          icon="fas fa-shopping-cart"
          color="green"
          :label="$t('ecomm.completa_ord')"
          class="q-mb-sm"
          :disabled="myTotalQty() < 1"
          @click="completeOrder()"
        ></q-btn>
      </div>
      <div class="center-text">
        <br />

        <div
          class="q-ma-sm q-pa-sm text-h7"
          v-if="globalStore && globalStore.site.ecomm.NoteExtraOnCart"
        >
          {{ globalStore.site.ecomm.NoteExtraOnCart }}
        </div>
      </div>
    </div>
    <div v-else style="text-align: center" class="text-grey">
      {{ $t('ecomm.carrello_vuoto') }}
    </div>

    <br />
    <div
      class="q-gutter-y-md column text-center q-mx-auto"
      style="width: 350px; max-width: 100%"
    >
      <q-input
        filled
        stack-label
        dense
        :label="$t('ecomm.code_add_to_cart')"
        v-model="search"
        class="q-ml-md"
        @keyup.enter="insertArticolo()"
      >
        <template v-slot:append>
          <q-icon
            class="insert"
            name="fas fa-shopping-cart"
            color="green"
            @click="insertArticolo()"
          />
        </template>
      </q-input>
    </div>
  </div>
</template>

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

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