<template>
  <div class="vn-pp row justify-center">
    <toolbar>
      <div class="row">
        <q-badge
          v-if="total != null"
          class="text-subtitle1 q-mr-sm"
          color="secondary">
          {{$t('total')}} {{total | currency}}
        </q-badge>
      </div>
    </toolbar>
    <lb-scroll
      ref="scroll"
      :request="request"
      @data="data = arguments[0]">
      <q-card class="vn-w-md">
        <q-list bordered separator>
          <q-item
            v-for="row in data"
            :key="row.id">
            <q-item-section avatar>
              <q-avatar
                style="cursor: pointer;"
                @click.native="onImgClick(row.item.image)">
                <img :src="`${$imageBase}/catalog/200x200/${row.item.image}`">
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-item-label class="ellipsis">
                {{row.item.longName}}
              </q-item-label>
              <q-item-label class="ellipsis" caption>
                <span
                  v-for="tag in row.item.tags.slice(1, 3)"
                  :key="tag.tagFk">
                  {{tag.value}}
                </span>
              </q-item-label>
              <q-item-label class="ellipsis">
                {{row.quantity}} x {{row.price | currency}}
                <span style="float: right;">
                  {{row.quantity * row.price | currency}}
                </span>
              </q-item-label>
            </q-item-section>
            <q-item-section side top>
              <q-btn
                icon="delete"
                @click="onRemove(row)"
                :title="$t('delete')"
                size="12px"
                flat
                dense
                round/>
            </q-item-section>
          </q-item>
        </q-list>
      </q-card>
    </lb-scroll>
    <full-image
      ref="fullImage"
      v-model="image"
      collection="catalog"/>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="check"
        color="accent"
        to="checkout"
        :title="$t('confirm')"/>
    </q-page-sticky>
  </div>
</template>

<script>
import Page from 'components/Page'

export default {
  name: 'OrdersPendingRows',
  mixins: [Page],
  data () {
    return {
      image: null
    }
  },
  computed: {
    total () {
      let rows = this.data
      if (!rows) return null
      return rows.reduce((a, i) => a + i.quantity * i.price, 0)
    }
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.$refs.scroll.reload()
  },
  methods: {
    request () {
      return {
        url: `Orders/${this.$route.params.id}/rows`,
        filter: {
          fields: [
            'id',
            'quantity',
            'price',
            'itemFk'
          ],
          order: 'created DESC',
          include: {
            relation: 'item',
            scope: {
              fields: ['longName', 'image'],
              include: {
                relation: 'tags',
                scope: {
                  fields: ['tagFk', 'value'],
                  order: 'priority'
                }
              }
            }
          }
        }
      }
    },
    onRemove (row) {
      this.$q.dialog({
        message: this.$t('areYouSureDelete'),
        cancel: true
      }).onOk(() => {
        this.$axios.delete(`Orders/${this.$route.params.id}/rows/${row.id}`)
          .then(res => {
            let rows = this.data
            let index = rows.indexOf(row)
            if (index !== -1) rows.splice(index, 1)
            this.$q.notify(this.$t('removedSuccess'))
          })
      })
    },
    onImgClick (image) {
      this.image = image
      this.$refs.fullImage.show()
    }
  }
}
</script>
