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