<template>
  <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
  <div v-if="endload && recOrderCart.numorder > 0">
    <div v-if="recOrderCart" class="panel">
      <div class="numorder">
        {{ t('orderscart.numero_ordine') }}: {{ recOrderCart.numorder }}
      </div>
      <div class="user">
        {{ t('orderscart.nome') }}:
        {{
          recOrderCart.user
            ? tools.getNomeUtenteByRecUser(recOrderCart.user)
            : ''
        }}
      </div>
      <div
        v-if="recOrderCart.items && recOrderCart.items.length > 0"
        class="container"
      >
        <div
          class="q-pa-sm col items-start q-gutter-xs"
          v-for="(itemorder, index) in recOrderCart.items"
          :key="index"
        >
          <CSingleCart
            :order="itemorder.order"
            :showall="false"
            :idOrdersCart="recOrderCart._id"
            :editmode="tools.isManager()"
            :nomodif="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="tools.isManager() && getNumItems() > 0"
        v-model="note"
        style="max-width: 400px"
        :label="t('ecomm.note')"
        filled
        dense
        debounce="1000"
        autogrow
        @input="change_field('note')"
      >
      </q-input>
      <q-label v-else> Note: {{ note }} </q-label>

      <br />
    </div>
  </div>
  <div v-else style="text-align: center" class="text-grey">
    {{ t('ecomm.carrello_vuoto') }}
  </div>

  <br />
  <div
    v-if="tools.isManager()"
    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>
</template>

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

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