<template>
  <div class="ui-notification-types-config q-pa-lg">
    <div class="text-h5 q-mb-md">Уведомления</div>
    <q-table
      :columns="columns"
      :data="codes"
      :pagination="pagination"
      flat
      separator="horizontal"
      hide-bottom
    >
      <template v-slot:body="props">
        <ui-notifications-types-config-item :props="props" :code="props.row" />
      </template>
    </q-table>
    <q-separator />
  </div>
</template>

<script lang="ts">
import { Component, Inject, Vue } from 'vue-property-decorator'
import { QTable } from 'quasar'
import UiNotificationsTypesConfigItem from '@/widgets/notifications/components/config/UiNotificationsTypesConfigItem.vue'
import NotificationsModule from '@/widgets/notifications/modules/NotificationsModule'

@Component({
  components: { UiNotificationsTypesConfigItem, QTable },
})
export default class UiNotificationsTypesConfig extends Vue {
  @Inject('NotificationsModule')
  notificationStore!: NotificationsModule

  pagination = {
    perPage: 0,
  }

  get codes(): string[] {
    return this.notificationStore.codes
  }

  columns = [
    { name: 'type', field: 'type', align: 'left', label: 'Событие' },
    {
      name: 'enabled',
      align: 'left',
      label: 'OFF/ON',
    },
    { name: 'popup', align: 'left', label: 'POP-UP' },
  ]
}
</script>
