<template>
  <div class="ui-notification-types-config q-pa-md">
    <div class="text-h5 q-mb-md">Настройка pop-up уведомлений</div>
    <q-table
      :columns="columns"
      :data="tableData"
      :pagination="pagination"
      flat
      hide-bottom
      separator="horizontal"
    >
      <template v-slot:body="props">
        <ui-notifications-widget-config-item
          :props="props"
          :label="props.row.configName"
          :type="props.row.type"
        />
      </template>
    </q-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import NotificationsConfigStore, {
  getNotificationsConfigStore,
} from '../stores/NotificationsConfigStore'
import UiNotificationsWidgetConfigItem from './UiNotificationsWidgetConfigItem.vue'
import LocalStorageHelper from '../helpers/LocalStorageHelper'
import { QTable } from 'quasar'

@Component({
  components: { UiNotificationsWidgetConfigItem, QTable },
})
export default class UiNotificationsWidgetConfig extends Vue {
  notificationConfigStore!: NotificationsConfigStore

  pagination = {
    perPage: 0,
  }

  created() {
    this.notificationConfigStore = getNotificationsConfigStore(this.$store)
    const count = LocalStorageHelper.getNotificationsCount()
    const duration = LocalStorageHelper.getDuration()

    if (count) {
      this.notificationConfigStore.setNotificationCount(count)
    }

    if (duration) {
      this.notificationConfigStore.setNotificationDuration(duration)
    }
  }

  get tableData() {
    return [
      {
        type: 'count',
        configName: 'Показывать уведомлений',
      },
      {
        type: 'duration',
        configName: 'Длительность отображения',
      },
    ]
  }

  columns = [
    {
      name: 'configName',
      field: 'configName',
      align: 'left',
      label: 'Настройка',
    },
    { name: 'value', field: 'value', align: 'left', label: 'Значение' },
  ]
}
</script>
