<template>
  <div
    class="card image-card m-0"
    style="outline: rgba(0, 0, 0, 0.2) solid 1px; box-shadow: none; height: 100%; overflow: hidden; border-radius: 6px"
  >
    <div
      class="is-clickable"
      :title="file.file__name"
    >
      <div
        v-if="file.file__name.endsWith('.pdf')"
        class="p-2 is-flex is-justify-content-center is-align-items-center"
        style="min-height: 120px"
      >
        <SvgIcon v-bind="{ name: 'pdf.svg', type: 'primary', size: 32 }" />
      </div>
      <div
        v-else
        class="card-image"
        @click="open()"
      >
        <figure class="image is-4by3 has-background-black">
          <nuxt-img
            :src="image"
            loading="lazy"
            alt="Hình ảnh"
            style="object-fit: contain"
          />
        </figure>
      </div>
    </div>
    <div class="card-content p-2">
      <p
        class="is-size-7"
        style="overflow: hidden; white-space: pre; text-overflow: ellipsis"
      >
        {{ file.file__name }}
      </p>
      <div
        id="ignore"
        class="buttons are-small is-gap-0.5 is-justify-content-end"
      >
        <button
          class="button is-white"
          @click="this.$copyToClipboard(`${$getpath()}static/files/${file.file__file}`)"
        >
          <span class="icon">
            <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
          </span>
        </button>
        <button
          class="button is-white"
          @click="download()"
        >
          <span class="icon">
            <SvgIcon v-bind="{ name: 'download.svg', type: 'primary', size: 18 }" />
          </span>
        </button>
        <button
          v-if="$getEditRights()"
          class="button is-white"
          @click="askConfirm()"
        >
          <span class="icon">
            <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
          </span>
        </button>
      </div>
    </div>
    <Modal
      v-if="showmodal"
      v-bind="showmodal"
      @confirm="remove()"
      @remove="remove"
      @close="showmodal = undefined"
    />
  </div>
</template>
<script>
export default {
  props: ["row", "api", "pagename", "file", "image", "show", "extend"],
  data() {
    return {
      showmodal: undefined,
      display: this.show || [],
    };
  },
  methods: {
    open() {
      if (!this.file || this.extend === false) return;
      this.showmodal = {
        title: this.file.file__name,
        component: "media/ChipImage",
        vbind: {
          extend: false,
          show: this.show,
          file: this.file,
          image: `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`,
        },
      };
    },
    info() {
      if (!this.file) return;
      this.showmodal = {
        vbind: { file: this.file },
        component: "media/ImageAttr",
        title: "Thông tin trích xuất từ hình ảnh",
        width: "35%",
        height: "50vh",
      };
    },
    download() {
      let name = this.file ? this.file.file__name || this.file.name : "download";
      let path = `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`;
      this.$download(path, name);
    },
    askConfirm() {
      this.showmodal = {
        component: "dialog/Confirm",
        title: "Xác nhận",
        width: "500px",
        height: "100px",
        vbind: {
          content: "Bạn có đồng ý xóa hình ảnh này không?",
          duration: 10,
        },
      };
    },
    remove() {
      this.showmodal = undefined;
      this.$emit("modalevent", { name: "remove" });
      this.$emit("remove");
    },
  },
};
</script>
