<template>
  <div class="order-info q-mt-md">
    <order-info-item :label="task.orderName" icon="la la-store-alt" />
    <order-info-item
      v-if="task.clientName"
      :label="task.clientName"
      icon="la la-user"
    />
    <order-info-item
      v-if="task.orderDate"
      :label="task.orderDate | humanizeDate"
      icon="la la-clock"
    />
    <order-info-item
      v-if="task.clientPhone"
      :label="phone"
      icon="la la-phone-alt"
    />
  </div>
</template>

<style lang="sass" scoped>
.order-info
  background-color: $background
  border-radius: 8px
  padding: 8px 12px
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import OrderInfoItem from '@/widgets/tasks/components/tasks/task/OrderInfoItem.vue'
import { Task } from '@/widgets/tasks/types/Task'
import { PhoneHelper } from '@/helpers'

@Component({
  components: { OrderInfoItem },
})
export default class OrderInfo extends Vue {
  @Prop({ type: Object, required: true })
  task!: Task

  get phone() {
    return this.task.clientPhone
      ? PhoneHelper.format(this.task.clientPhone)
      : ''
  }
}
</script>
