<template>
  <div class="vn-pp row justify-center">
    <toolbar>
      <q-select
        v-model="yearFilter"
        :options="years"
        :label="$t('ordersMadeAt')"
        style="min-width: 12em;"
        dark
        dense
        standout/>
    </toolbar>
    <div
      v-if="tickets && !tickets.length"
      class="text-subtitle1 text-center text-grey-7 q-pa-md">
      {{$t('noOrdersFound')}}
    </div>
    <q-card
      v-if="tickets && tickets.length"
      class="vn-w-md">
      <q-list bordered separator>
        <q-item
          v-for="ticket in tickets"
          :key="ticket.id"
          :to="`/ticket/${ticket.id}`"
          clickable
          v-ripple>
          <q-item-section>
            <q-item-label>{{ticket.landed | date('ddd, MMMM Do')}}</q-item-label>
            <q-item-label caption>#{{ticket.id}}</q-item-label>
            <q-item-label caption>{{ticket.address.nickname}}</q-item-label>
            <q-item-label caption>{{ticket.address.city}}</q-item-label>
          </q-item-section>
          <q-item-section side top>
            <q-item-label>
              485.50€
            </q-item-label>
            <q-badge
              v-if="ticket.state"
              color="teal"
              :label="ticket.state.state.name"/>
            <q-item-label v-if="ticket.packages" caption>
              {{$t('packages', {n: ticket.packages})}}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </div>
</template>

<script>
import Page from 'components/Page'

export default {
  name: 'OrdersConfirmedIndex',
  mixins: [Page],
  data () {
    return {
      yearFilter: null,
      years: [],
      tickets: null
    }
  },
  mounted () {
    let now = new Date()
    let curYear = now.getFullYear()

    for (let i = 0; i <= 5; i++) {
      this.years.push(curYear - i)
    }

    this.yearFilter = curYear
  },
  watch: {
    yearFilter (year) {
      let start = new Date(year, 0)
      let end = new Date(year + 1, 0)

      let params = { filter: {
        where: {
          clientFk: this.$state.user.id,
          landed: { between: [start, end] }
        },
        include: [
          'address',
          { state: 'state' }
        ],
        order: 'landed DESC'
      } }
      this.$axios.get('Tickets', { params })
        .then(res => (this.tickets = res.data))
    }
  }
}
</script>
