<template>
  <div class="vn-pp row justify-center">
    <div
      v-if="news && !news.length"
      class="text-subtitle1 text-center text-grey-7 q-pa-md">
      {{$t('noDataFound')}}
    </div>
    <q-card class="vn-w-md">
      <q-list bordered separator>
        <q-item
          v-for="(myNew, index) in news"
          :key="myNew.id"
          :to="`/new/${myNew.id}`"
          clickable
          v-ripple>
          <q-item-section avatar>
            <q-avatar @click.native="onImgClick($event, myNew.image)" rounded>
              <img :src="`${$imageBase}/news/200x200/${myNew.image}`">
            </q-avatar>
          </q-item-section>
          <q-item-section>
            <q-item-label class="ellipsis">
              {{myNew.title}}
            </q-item-label>
            <q-item-label class="ellipsis" caption>
              {{myNew.created | relTime}}
            </q-item-label>
            <q-item-label class="ellipsis" caption>
              {{myNew.user.nickname}}
            </q-item-label>
          </q-item-section>
          <q-item-section side top>
            <q-btn
              icon="delete"
              @click="remove(index, $event)"
              :title="$t('delete')"
              size="12px"
              flat
              dense
              round/>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
    <full-image
      ref="fullImage"
      v-model="image"
      collection="news"/>
    <q-dialog v-model="confirm" persistent>
      <q-card>
        <q-card-section class="row items-center">
          {{$t('areYouSureDelete')}}
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            :label="$t('cancel')"
            v-close-popup
            flat
            color="primary"/>
          <q-btn
            :label="$t('accept')"
            @click="confirmDeletion(deleteIndex)"
            v-close-popup
            flat
            color="primary"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn
        fab
        icon="add"
        color="accent"
        to="/new"
        :title="$t('add')"/>
    </q-page-sticky>
  </div>
</template>

<script>
import Page from 'components/Page'

export default {
  name: 'News',
  mixins: [Page],
  data () {
    return {
      news: null,
      confirm: false,
      showImage: false,
      image: null
    }
  },
  mounted () {
    let filter = {
      fields: [
        'id',
        'title',
        'text',
        'image',
        'userFk',
        'created',
        'tag'
      ],
      order: 'priority, created DESC',
      include: {
        relation: 'user',
        scope: {
          fields: ['nickname']
        }
      }
    }
    this.$axios.get('News', { params: { filter } })
      .then(res => (this.news = res.data))
  },
  methods: {
    remove (index, event) {
      event.preventDefault()
      event.stopPropagation()
      this.confirm = true
      this.deleteIndex = index
    },
    confirmDeletion (index) {
      this.$axios.delete(`News/${this.news[index].id}`)
        .then(res => {
          this.news.splice(index, 1)
          this.$q.notify(this.$t('removedSuccess'))
        })
    },
    onImgClick (event, image) {
      this.image = image
      this.$refs.fullImage.show()
      event.preventDefault()
    }
  }
}
</script>
