<template>
  <widget-page
    @load="infinityLoad"
    :is-loading="isInitialLoading"
    :disable="isDisableInfinity"
  >
    <task-list v-if="!!tasks.length" :tasks="tasks">
      <order-header />
    </task-list>
    <widget-page-state
      @submit="showOrderTaskForm"
      v-if="!isInitialLoading && !tasks.length"
      has-btn
      submit-label="Создать задачу"
      icon="la la-link"
      title="В заказе нет задач"
    />
  </widget-page>
</template>

<script lang="ts">
import { Component, Inject, Prop } from 'vue-property-decorator'
import { RouteNames } from '@/widgets/tasks/router/routeNames'
import { TaskModule } from '@/widgets/tasks/modules/TaskModule'
import WidgetPage from '@/widgets/base/components/widget-page/WidgetPage.vue'
import TaskList from '@/widgets/tasks/components/tasks/TaskList.vue'
import WidgetPageState from '@/widgets/base/components/widget-page/WidgetPageState.vue'
import OrderHeader from '@/widgets/tasks/components/common/OrderHeader.vue'
import BaseTasksPage from '@/widgets/tasks/pages/BaseTasksPage'
import { LoadTasksPayload } from '@/widgets/tasks/http/dto/LoadTasksPayload'

@Component({
  components: { OrderHeader, WidgetPageState, TaskList, WidgetPage },
})
export default class OrderTasksPage extends BaseTasksPage {
  @Prop(String)
  orderName!: string

  @Inject('TaskModule')
  taskModule!: TaskModule

  initialPayload: LoadTasksPayload = { ids: [], orderName: this.orderName }

  showOrderTaskForm() {
    this.$router.push({
      name: RouteNames.createTask,
    })
  }
}
</script>
