<template>
  <div class="thread-footer ui-gap-x-xs">
    <template v-if="!thread.processedAt">
      <reply-message-btn @click="reply" />
      <close-thread-btn @click="closeThread" :loading="isLoadingProcessedAt" />
    </template>
    <div v-else class="flex no-wrap full-width">
      <q-btn
        @click="openThread"
        :loading="isLoadingProcessedAt"
        label="Вернуть в работу"
        flat
        rounded
        color="primary"
      />
      <q-space />
      <div class="flex no-wrap items-center q-ml-auto text-blue-grey">
        <q-icon name="la la-user-check" size="24px" />
        <div class="text-body2 q-ml-sm">
          <span>{{ manager | userFullName }}</span>
          <span> {{ thread.processedAt | humanizeDate }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="sass">
.thread-footer
  display: flex
  padding: 8px 16px 16px
</style>

<script lang="ts">
import { Component, Emit, Inject, Prop, Vue } from 'vue-property-decorator'
import { MessageThread } from '@/widgets/messages/types/MessageThread'
import ReplyMessageBtn from '@/widgets/messages/components/thread/footer/ReplyMessageBtn.vue'
import CloseThreadBtn from '@/widgets/messages/components/thread/footer/CloseThreadBtn.vue'
import { ManagerModule } from '@/widgets/messages/modules/ManagerModule'
import { QBtn, QIcon, QSpace } from 'quasar'

@Component({
  components: { CloseThreadBtn, ReplyMessageBtn, QBtn, QSpace, QIcon },
})
export default class ThreadFooter extends Vue {
  @Prop({ type: Object, required: true })
  thread!: MessageThread

  @Prop(Boolean)
  isLoadingProcessedAt!: boolean

  @Inject('ManagerModule')
  managerModule!: ManagerModule

  get manager() {
    return this.thread.processedManagerUid
      ? this.managerModule.getManagerByUid(this.thread.processedManagerUid)
      : null
  }

  @Emit()
  reply() {
    return true
  }

  @Emit()
  closeThread() {
    return this.thread
  }

  @Emit()
  openThread() {
    return this.thread
  }
}
</script>
