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

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import NotificationsStore, {
  getNotificationsStore,
} from '../stores/NotificationsStore'
import UiNotificationsTypesConfigItem from './UiNotificationsTypesConfigItem.vue'
import { QTable } from 'quasar'

@Component({
  components: { UiNotificationsTypesConfigItem, QTable },
})
export default class UiNotificationsTypesConfig extends Vue {
  notificationStore: NotificationsStore | null = null

  pagination = {
    perPage: 0,
  }

  created() {
    this.notificationStore = getNotificationsStore(this.$store)
  }

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

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