<template>
  <div>
    <div class="image-container" v-if="picture">
    <img :src="picture" style="max-height: 250px !important;">
    <div class="image-label">
      <span class="is-clickable" @click="remove()">
      <SvgIcon v-bind="{name: 'bin.svg', type: 'danger', size: 30}"></SvgIcon>
    </span>
  </div>
  </div>
  <div style="width: 130px; border-style: dashed; border-width: 1px;" v-else>
    <a @click="openImage()"><SvgIcon v-bind="{name: 'image.svg', type: 'grey', size: 120}"></SvgIcon></a>
  </div>
  <div class="mt-2">
    <a @click="openCamera()">
      <SvgIcon v-bind="{name: 'camera.svg', type: 'dark', size: 28}"></SvgIcon>
    </a>
  </div>
  <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @selectimage="selectImage"></Modal>
</div>
</template>
<script>
export default {
  props: ['file', 'image', 'show'],
  data() {
    return {
      showmodal: undefined,
      display: this.show || [],
      picture: this.image || undefined,
      vfile: undefined
    }
  },
  methods: {
    openImage() {
      this.showmodal = {component:'media/Imagebox', title: 'Thư viện hình ảnh', width: '90%', vbind: {source: true}}
    },
    selectImage(files) {
      this.showmodal = undefined
      let v = files
      this.picture = `${this.$path()}download/?name=${v.file__file || v.file}&type=file`
      v.image = this.$copy(this.picture)
      this.vfile = v
      this.$emit('picture', v)
    },
    remove() {
      this.vfile = undefined
      this.picture = undefined
    },
    openCamera() {
      this.showmodal = {component:'media/Camera', title: 'Chụp ảnh', width: '650px'}
    }
  }
}
</script>