<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>
