<template>
<div>
  <q-dialog v-model="showDialog">
    <q-card style="width: 80em;">
      <q-img
        :src="`${$imageBase}/${collection}/${size}/${value}`"
        @click="showDialog = false">
      </q-img>
      <q-btn
        v-if="editable"
        @click="showImgEditor = true"
        :title="$t('edit')"
        icon="edit"
        round
        color="accent"
        class="absolute-bottom-right"
        style="bottom: .6em; right: .6em;"/>
    </q-card>
  </q-dialog>
  <image-editor
    v-if="editable"
    v-model="image"
    :collection="collection"
    :show="showImgEditor"
    @response="showImgEditor = false"/>
</div>
</template>

<script>
import ImageEditor from 'components/ImageEditor'

export default {
  name: 'FullImage',
  components: {
    ImageEditor
  },
  props: {
    value: {},
    collection: {
      type: String,
      required: true
    },
    size: {
      type: String,
      required: false,
      default: 'full'
    },
    editable: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data () {
    return {
      image: null,
      showImgEditor: false,
      showDialog: false
    }
  },
  watch: {
    image (val) {
      this.$emit('input', val)
    },
    value (val) {
      this.image = val
    }
  },
  methods: {
    show () {
      this.showDialog = true
    }
  }
}
</script>
