<template>
  <ui-select-material
    v-on="$listeners"
    v-bind="$attrs"
    :options="categories"
    option-label="title"
    option-value="id"
    emit-value
    map-options
    label="Тема задачи"
    name="categoryId"
  />
</template>

<script lang="ts">
import { Component, Inject, Vue } from 'vue-property-decorator'
import UiSelectMaterial from '@/lib-components/form/UiSelectMaterial.vue'
import { Category } from '@/widgets/tasks/types/Category'
import { CategoryModule } from '@/widgets/tasks/modules/CategoryModule'

@Component({
  inheritAttrs: false,
  components: { UiSelectMaterial },
})
export default class CategoriesSelect extends Vue {
  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  get categories(): Category[] {
    return this.categoryModule.categories
  }
}
</script>
