<template>
  <q-tr v-bind="$attrs" v-on="$listeners" no-hover>
    <q-td key="name" style="max-width: 0">
      {{ delivery.name }}
      <div class="text-blue-grey" style="font-size: 12px;">
        {{ terms }}
      </div>
    </q-td>
    <q-td key="dimensions" style="width: 90px">
      <span v-if="delivery.weightType === 'volume'" class="text-blue-grey">
        {{ weight }}
      </span>
      <q-icon
        v-if="delivery.weightType === 'natural'"
        name="la la-weight-hanging"
        size="24px"
      />
    </q-td>
    <q-td key="price" style="width: 90px">
      <div>{{ formatPrice(delivery.price) }}</div>
      <div class="text-blue-grey" style="font-size: 12px;">
        {{ formatPrice(delivery.basePrice) }}
      </div>
    </q-td>
  </q-tr>
</template>

<script lang="ts">
import { Prop, Vue, Component } from 'vue-property-decorator'
import CalculatedDelivery from '../dto/CalculatedDelivery'
import Currency from '../dto/Currency'
import CurrencyService from '../utils/CurrencyService'
import { QIcon, QTd, QTooltip, QTr } from 'quasar'
import Formatter from '../../../../helpers/Formatter'

@Component({ inheritAttrs: false, components: { QTr, QTd, QTooltip, QIcon } })
export default class CalculatorDeliveriesItem extends Vue {
  @Prop(Object) delivery!: CalculatedDelivery

  get terms(): string {
    const terms = Object.values(this.delivery.terms)
      .filter(term => term)
      .sort((a, b) => a - b)

    const uniqueTerms = Array.from(new Set(terms))

    return `${uniqueTerms.join('...')} дн.`
  }

  get weight(): string {
    return `${this.delivery.weight / 1000} кг`
  }

  formatPrice(value: number) {
    return `${Formatter.prettyNumber(value)} ${this.currency.symbol}`
  }

  get currency(): Currency {
    return CurrencyService.currencies[this.delivery.currency]
  }
}
</script>
