<template>
  <Teleport :to="$actions">
    <q-btn
      icon="print"
      :label="$t('printDeliveryNote')"
      @click="onPrintClick()"
      rounded
      no-caps/>
  </Teleport>
  <div>
    <q-card class="vn-w-sm">
      <q-card-section>
        <div class="text-h6">#{{ticket.id}}</div>
      </q-card-section>
      <q-card-section>
        <div class="text-h6">{{$t('shippingInformation')}}</div>
        <div>{{$t('preparation')}} {{date(ticket.shipped, 'ddd, MMMM Do')}}</div>
        <div>{{$t('delivery')}} {{date(ticket.shipped, 'ddd, MMMM Do')}}</div>
        <div>{{$t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse')}} {{ticket.agency}}</div>
      </q-card-section>
      <q-card-section>
        <div class="text-h6">{{$t('deliveryAddress')}}</div>
        <div>{{ticket.nickname}}</div>
        <div>{{ticket.street}}</div>
        <div>{{ticket.postalCode}} {{ticket.city}} ({{ticket.province}})</div>
      </q-card-section>
      <q-separator inset />
      <q-list v-for="row in rows" :key="row.itemFk">
        <q-item>
          <q-item-section avatar>
            <q-avatar size="68px">
              <img :src="`${$app.imageUrl}/catalog/200x200/${row.image}`">
            </q-avatar>
          </q-item-section>
          <q-item-section>
            <q-item-label lines="1">
              {{row.concept}}
            </q-item-label>
            <q-item-label lines="1" caption>
              {{row.value5}} {{row.value6}} {{row.value7}}
            </q-item-label>
            <q-item-label lines="1">
              {{row.quantity}} x {{currency(row.price)}}
            </q-item-label>
          </q-item-section>
          <q-item-section side class="total">
            <q-item-label>
              <span class="discount" v-if="row.discount">
                {{currency(discountSubtotal(row))}} -
                {{currency(row.discount)}} =
              </span>
              {{currency(subtotal(row))}}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </div>
</template>

<style lang="scss" scoped>
.total {
  justify-content: flex-end;
}
</style>

<script>
import { date, currency } from 'src/lib/filters.js'

export default {
  name: 'OrdersConfirmedView',

  data () {
    return {
      ticket: {},
      rows: null,
      services: null,
      packages: null
    }
  },

  async mounted () {
    const params = {
      ticket: parseInt(this.$route.params.id)
    }
    this.ticket = await this.$jApi.getObject(
      'CALL myTicket_get(#ticket)',
      params
    )
    this.rows = await this.$jApi.query(
      'CALL myTicket_getRows(#ticket)',
      params
    )
    this.services = await this.$jApi.query(
      'CALL myTicket_getServices(#ticket)',
      params
    )
    this.packages = await this.$jApi.query(
      'CALL myTicket_getPackages(#ticket)',
      params
    )
  },

  methods: {
    date,
    currency,

    discountSubtotal (line) {
      return line.quantity * line.price
    },

    subtotal (line) {
      const discount = line.discount
      return this.discountSubtotal(line) * ((100 - discount) / 100)
    },

    onPrintClick () {
      const params = new URLSearchParams({
        access_token: this.$user.token,
        recipientId: this.$user.id,
        type: 'deliveryNote'
      })
      window.open(`/api/Tickets/${this.ticket.id}/delivery-note-pdf?${params.toString()}`)
    }
  }
}
</script>
