<template>
<div>
  <div class="image-container">
    <a @click="open()"><img :src="image" style="max-height: 86vh !important;"></a>
    <div class="image-label">
     <span class="is-clickable" @click="copyImage()" v-if="display.findIndex(v=>v==='copy')>=0">
      <SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 20}"></SvgIcon>
    </span>
    <span class="is-clickable ml-5" @click="download()" v-if="display.findIndex(v=>v==='download')>=0">
      <SvgIcon v-bind="{name: 'download.svg', type: 'primary', size: 20}"></SvgIcon>
    </span>
    <span class="is-clickable ml-5" @click="askConfirm()" v-if="display.findIndex(v=>v==='delete')>=0">
      <SvgIcon v-bind="{name: 'bin1.svg', type: 'danger', size: 18}"></SvgIcon>
    </span>
    </div>
  </div>
  <Modal @close="showmodal=undefined" @remove="remove" @confirm="remove()" v-bind="showmodal" v-if="showmodal"></Modal>
</div>
</template>
<script>
import { useStore } from '~/stores/index'
export default {
  setup() {
    const store = useStore()
    return { store }
  },
  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'}
    },
    find() {
      this.showmodal = {vbind: {row: this.row, api: this.api, pagename: this.pagename}, component: 'ekyc/IDcheck', 
      title: 'Kiểm tra CMT / CCCD / HC / GPLX / CMT-CA / CMT-QD', width: '90%', height: '70vh'}
    },
    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() {
      let text = this.store.lang==='en'? 'Do you agree to delete this image' :  `Bạn có đồng ý <b>xóa hình ảnh</b> này không?`
      this.showmodal = {component: `dialog/Confirm`,title: this.store.lang==='en'? 'Confirm' : 'Xác nhận', width: '500px', height: '100px',
      vbind: {content: text, duration: 10}}
    },
    remove() {
      this.showmodal = undefined
      this.$emit('modalevent', {name: 'remove'})
      this.$emit('remove')
    },
    async copyImage() {
      try {
        const response = await fetch(`${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`);
        const blob = await response.blob()
        await navigator.clipboard.write([
          new ClipboardItem({
            [blob.type]: blob
          })
        ])
        this.$snackbar('Copied to clipboard')
      } catch (err) {
        console.error(err.name, err.message)
      }
    }
  }
}
</script>