<template>
  <div class="bg-background flex items-center no-wrap q-px-lg q-py-md">
    <table class="col-grow">
      <track-description-row label="Служба доставки">
        <a :href="carrierSiteUrl" target="_blank" class="ui-track-link">
          {{ carrierLabel }}
        </a>
      </track-description-row>
      <track-description-row v-if="isErrorStatus" label="Проверен">
        {{ track.errorsCount }} раз
      </track-description-row>
      <track-description-row v-if="track.inTransit" label="В пути">
        {{ inTransitDays }}
      </track-description-row>
      <track-description-row
        v-if="track.lastProcessedAt"
        label="Последняя проверка"
      >
        {{ checkDate }}
      </track-description-row>
    </table>
    <div>
      <track-status :status="track.status" />
    </div>
  </div>
</template>

<script lang="ts">
import { Prop, Vue, Component } from 'vue-property-decorator'
import { Track } from '../dto/Track'
import TrackDescriptionRow from './TrackDescriptionRow.vue'
import DateHelper from '../../../../helpers/DateHelper'
import Formatter from '../../../../helpers/Formatter'
import StatusService from '../services/StatusService'
import TrackStatus from './TrackStatus.vue'

@Component({
  components: { TrackStatus, TrackDescriptionRow },
})
export default class TrackDescription extends Vue {
  @Prop(Object) track!: Track

  get isErrorStatus(): boolean {
    return this.track.status === StatusService.statuses.Error
  }

  get inTransitDays(): string {
    const daysText = Formatter.num2str(
      this.track.inTransit,
      'день',
      'дня',
      'дней'
    )
    return `${this.track.inTransit} ${daysText}`
  }

  get checkDate(): string {
    return DateHelper.format(this.track.lastProcessedAt)
  }

  get carrierLabel(): string {
    const carrier = this.track.carrier

    return carrier ? carrier.alias || carrier.name : ''
  }

  get carrierSiteUrl(): string {
    if (this.track.carrier) {
      return (this.track.carrier.trackingUrl as string).replace(
        '{{ track }}',
        this.track.number
      )
    }

    return ''
  }
}
</script>
