<template>
  <div class="is-flex is-gap-1">
    <div
      v-if="picture"
      class="image is-128x128 relative"
    >
      <NuxtImg :src="picture" />
      <div class="absolute top-2 right-2">
        <button
          class="button is-small is-light is-danger"
          @click="remove"
        >
          <span class="icon">
            <Icon
              name="material-symbols:delete-outline-rounded"
              :size="20"
            />
          </span>
        </button>
      </div>
    </div>
    <div
      v-else
      @click="openImage()"
      class="size-35 rounded-md is-clickable is-flex is-justify-content-center is-align-items-center"
      style="border: 1px dashed var(--bulma-grey-light)"
    >
      <Icon
        name="material-symbols:add-photo-alternate-outline-rounded"
        :size="50"
        class="has-text-grey-light"
      />
    </div>
    <div>
      <button
        class="button is-medium is-light is-primary"
        @click="openCamera()"
      >
        <span class="icon">
          <Icon
            name="material-symbols:photo-camera-outline-rounded"
            :size="24"
          />
        </span>
      </button>
    </div>
    <Modal
      @close="showmodal = undefined"
      v-bind="showmodal"
      v-if="showmodal"
      @selectimage="selectImage"
    />
  </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;
      const v = files;
      this.picture = `${this.$getpath()}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",
        width: "700px",
        height: "auto",
      };
    },
  },
};
</script>
