<template>
  <widget-page
    @load="infinityLoad"
    :disable="isDisableInfinity"
    :is-loading="isInitialLoading"
  >
    <threads :threads="threads" />
    <widget-page-state
      v-if="!isInitialLoading && !threads.length"
      @submit="toCreateRoute"
      submit-label="Написать сообщение"
      icon="la la-home"
      title="В заказе нет сообщений"
      submit-color="primary"
      has-btn
    />
  </widget-page>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import { GetThreadsPayload } from '@/widgets/messages/services/ThreadService'
import { RouteNames } from '@/widgets/messages/router/routeNames'
import WidgetPage from '@/widgets/base/components/widget-page/WidgetPage.vue'
import Threads from '@/widgets/messages/components/Threads.vue'
import BaseThreadsPage from '@/widgets/messages/pages/BaseThreadsPage'
import WidgetPageState from '@/widgets/base/components/widget-page/WidgetPageState.vue'

@Component({
  components: { WidgetPageState, Threads, WidgetPage },
})
export default class IndexPage extends BaseThreadsPage {
  @Prop(String)
  orderName!: string

  get initialPayload(): GetThreadsPayload {
    return {
      orderName: this.orderName,
    }
  }

  toCreateRoute() {
    return this.$router.push({
      name: RouteNames.create,
      query: { orderName: this.orderName },
    })
  }
}
</script>
