<template>
  <q-timeline-entry side="left" :color="color">
    <template slot="subtitle">
      <div class="text-blue-grey text-body2 text-small">
        {{ date }}
      </div>
      <div class="text-body2 text-dark" :class="{ 'text-bold': isLast }">
        {{ trackEvent.operation }}
      </div>
    </template>
  </q-timeline-entry>
</template>

<style scoped>
::v-deep .q-timeline__subtitle {
  opacity: 1;
  text-transform: none;
  letter-spacing: inherit;
}

::v-deep .q-timeline__content {
  padding-bottom: 4px;
}
</style>

<script lang="ts">
import { Prop, Vue, Component } from 'vue-property-decorator'
import { QTimelineEntry } from 'quasar'
import { TrackEvent } from '../dto/TrackEvent'
import DateHelper from '../../../../helpers/DateHelper'

@Component({ components: { QTimelineEntry } })
export default class TrackTimelineItem extends Vue {
  @Prop(Object) trackEvent!: TrackEvent
  @Prop(Boolean) isFirst!: boolean
  @Prop(Boolean) isLast!: boolean

  get date(): string {
    return DateHelper.format(this.trackEvent.date)
  }

  get color(): string {
    return this.isFirst ? 'positive' : this.isLast ? 'dark' : 'primary'
  }
}
</script>
