<template>
  <div class="vn-pp row justify-center">
    <div
      v-if="orders && !orders.length"
      class="text-subtitle1 text-center text-grey-7 q-pa-md">
      {{$t('noOrdersFound')}}
    </div>
    <q-card
      v-if="orders && orders.length"
      class="vn-w-md">
      <q-list bordered separator>
        <q-item
          v-for="order in orders"
          :key="order.id"
          :to="`/order/${order.id}/`"
          clickable
          v-ripple>
          <q-item-section>
            <q-item-label>{{order.landed | date('ddd, MMMM Do')}}</q-item-label>
            <q-item-label caption>#{{order.id}}</q-item-label>
            <q-item-label caption>{{order.address.nickname}}</q-item-label>
            <q-item-label caption>{{order.address.city}}</q-item-label>
          </q-item-section>
          <q-item-section side top>
            {{order.taxableBase | currency}}
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="add_shopping_cart"
        color="accent"
        :to="{name: 'catalog'}"
        :title="$t('startOrder')"/>
    </q-page-sticky>
  </div>
</template>

<script>
export default {
  name: 'OrdersPendingIndex',
  data () {
    return {
      orders: null
    }
  },
  async mounted () {
    const filter = {
      where: {
        clientFk: this.$state.user.id,
        isConfirmed: false
      },
      include: 'address',
      order: 'created DESC',
      limit: 20
    }
    const res = await this.$axios.get('Orders', { params: { filter } })
    this.orders = res.data
  }
}
</script>
