<template>
    <div >
      <b-row style="margin-top:0.5rem">
       <b-col>
          <label style="margin-right: 100%;color: black;">{{ $t('Since') }}</label>
          <b-form-datepicker :size="'sm'"   v-model="startDate" class="mb-2" locale="ru" :label-no-date-selected="$t('No date selected')"
              :label-help="$t('Use cursor keys to navigate calendar dates')"></b-form-datepicker>
        </b-col>
        <b-col>
          <label style="margin-right: 100%;color: black;">{{ $t('Until') }}</label>
          <b-form-datepicker :size="'sm'"   v-model="endDate" class="mb-2" locale="ru" :label-no-date-selected="$t('No date selected')"
              :label-help="$t('Use cursor keys to navigate calendar dates')"></b-form-datepicker>
        </b-col>
        <b-col>
          <b-spinner v-if="isDisabledShow" variant="primary" label="Spinning"></b-spinner>
          <b-button style="margin-top:10%" variant="info" v-if="!isDisabledShow" @click="generate">{{ $t('Show') }} </b-button>
        </b-col>
      </b-row>
      <div v-if="NOTIFICATIONS">
        <b-table hover small v-if="NOTIFICATIONS" sticky-header striped id="tableNotifications"
        head-variant="light"
        :items="NOTIFICATIONS"
        :fields="fields"
        :tbody-tr-class="rowClass" stacked="sm">
        </b-table>
      </div>
      <div v-if="!NOTIFICATIONS">
        <b-spinner class="align-middle"></b-spinner>
      </div>
    </div>
  </template>

<script>

export default {
  data () {
    return {
      isDisabledShow: false,
      startDate: this.$moment().subtract(1, 'months').format('YYYY-MM-DD'),
      endDate: this.$moment().format('YYYY-MM-DD'),
      fields: [
        { key: 'creation_timestamp',
          label: this.$i18n.t('Creation time'),
          sortable: true,
          formatter: (val, key, item) => { return this.$moment(val * 1000).format('DD.MM.YYYY HH:mm') }
        },
        { key: 'execution_timestamp',
          label: this.$i18n.t('Send time'),
          sortable: true,
          formatter: (val, key, item) => { return item.executed ? this.$moment(val * 1000).format('DD.MM.YYYY HH:mm') : '---' }
        },
        { key: 'subject', label: this.$i18n.t('Subject'), sortable: true, sortDirection: 'desc' },
        { key: 'message', label: this.$i18n.t('Message'), sortable: true, sortDirection: 'desc' }
      ]
    }
  },
  methods: {
    rowClass (item, type) {
      if (!item) return
      if (!item.executed) return 'table-danger'
      else return 'table-success'
    },
    generate () {
      this.isDisabledShow = true
      let sDate = new Date(this.startDate)
      let eDate = new Date(this.endDate)
      this.$store.dispatch('GET_NOTIFICATIONS', {start_date: sDate / 1000, end_date: eDate / 1000 + 24 * 60 * 60})
    }
  },
  watch: {
    NOTIFICATIONS () {
      this.isDisabledShow = false
    }
  },
  computed: {
    NOTIFICATIONS () {
      return this.$store.getters.NOTIFICATIONS
    }
  }
}
</script>
