<template>
<div class="vn-pp row justify-center">
  <q-card class="vn-w-lg">
    <div style="position: relative;">
      <q-img
        :src="`${$imageBase}/news/full/${myNew.image}`"
        :ratio="3/1">
      </q-img>
      <q-btn
        @click="showImgEditor = true"
        :title="$t('edit')"
        icon="edit"
        round
        color="accent"
        class="absolute-bottom-right"
        style="bottom: .6em; right: .6em;"/>
    </div>
    <q-card-section>
      <q-input
        v-model="myNew.title"
        :label="$t('title')" />
    </q-card-section>
    <q-card-section>
      <div class="row">
        <q-select
          v-model="myNew.tag"
          :label="$t('tag')"
          :options="tags"
          option-value="name"
          option-label="name"
          emit-value
          class="col"/>
        <q-select
          v-model="myNew.priority"
          :label="$t('priority')"
          :options="priorities"
          class="col q-ml-md"/>
      </div>
    </q-card-section>
    <q-card-section>
      <q-editor
        v-model="myNew.text"
        min-height="20em"
        :toolbar="tools"/>
    </q-card-section>
  </q-card>
  <image-editor
    v-model="myNew.image"
    collection="news"
    :show="showImgEditor"
    @response="showImgEditor = false"/>
  <q-page-sticky position="bottom-right" :offset="[18, 18]">
    <q-btn
      :title="$t(id ? 'save' : 'create')"
      icon="check"
      color="accent"
      @click="onSave"
      fab/>
  </q-page-sticky>
</div>
</template>

<script>
import Page from 'components/Page'
import ImageEditor from 'components/ImageEditor'

export default {
  name: 'New',
  mixins: [Page],
  components: {
    ImageEditor
  },
  data () {
    return {
      myNew: { text: '' },
      id: null,
      tags: null,
      priorities: [1, 2, 3],
      image: null,
      showImgEditor: false,
      tools: [
        ['left', 'center', 'right', 'justify'],
        ['bold', 'italic', 'underline', 'removeFormat'],
        ['token', 'hr', 'link', 'custom_btn', 'print', 'fullscreen'],
        [
          {
            icon: this.$q.iconSet.editor.formatting,
            list: 'no-icons',
            options: [
              'p',
              'h1',
              'h2',
              'h3',
              'h4',
              'h5',
              'h6',
              'code'
            ]
          }, {
            icon: this.$q.iconSet.editor.fontSize,
            fixedLabel: true,
            fixedIcon: true,
            list: 'no-icons',
            options: [
              'size-1',
              'size-2',
              'size-3',
              'size-4',
              'size-5',
              'size-6',
              'size-7'
            ]
          }
        ],
        ['quote', 'unordered', 'ordered'],
        ['undo', 'redo']
      ]
    }
  },
  mounted () {
    let filter = {
      fields: ['name']
    }
    this.$axios.get('NewTags', { params: { filter } })
      .then(res => (this.tags = res.data))

    this.loadNew()
  },
  watch: {
    'this.$route.params.id': function () {
      this.loadNew()
    }
  },
  methods: {
    loadNew () {
      this.id = this.$route.params.id
      this.new = { text: '' }

      if (this.id) {
        let filter = {
          fields: [
            'id',
            'title',
            'text',
            'image',
            'userFk',
            'priority',
            'tag'
          ]
        }
        this.$axios.get(`News/${this.id}`, { params: { filter } })
          .then(res => (this.myNew = res.data))
      } else {
        this.myNew = {
          userFk: this.$state.user.id,
          tag: 'new',
          priority: 1,
          text: ''
        }
      }
    },
    onSave () {
      let promise
      let message

      if (this.id) {
        promise = this.$axios.patch(`News/${this.id}`, this.myNew)
        message = 'dataSaved'
      } else {
        promise = this.$axios.post(`News`, this.myNew)
        message = 'createdSuccess'
      }

      promise.then(res => {
        this.$q.notify({
          message: this.$t(message),
          icon: 'check',
          color: 'green'
        })
        this.$router.go(-1)
      })
    }
  }
}
</script>
