<template>
  <div>
    <b-tooltip label="Mở file" position="is-left" type="is-link">
      <a class="mr-3" @click="openFile(row)">
        <SvgIcon v-bind="{name: 'open.svg', type: 'dark', size: 16}"></SvgIcon>
      </a>
    </b-tooltip>
    <!-- <b-tooltip label="Tải xuống" position="is-left" type="is-link">
      <a class="mr-3" @click="download(row)">
        <SvgIcon v-bind="{name: 'download1.svg', type: 'dark', size: 16}"></SvgIcon>
      </a>
    </b-tooltip> -->
    <b-tooltip label="Xóa" position="is-left" type="is-danger" v-if="disable? !disable.delete : true">
      <a @click="remove()">
        <SvgIcon v-bind="{name: 'bin1.svg', type: 'dark', size: 16}"></SvgIcon>
      </a>
    </b-tooltip>
  </div>
</template>
<script>
export default {
  props: ['api', 'pagename', 'row', 'disable'],
  methods: {
    async openFile(row) {
      let url = `${this.$getpath()}static/files/${row.file__file || row.file}`
      window.open(url, '_blank')
    },
    async downloadFile(url, fileName) {
      // const response = await fetch(url, { method: "GET" });
      // const blob = await response.blob();
      const urlDownload = url //window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = urlDownload;
      link.setAttribute("download", fileName);
      link.click();
    },
    async download(row) {
      let url = `${this.$getpath()}static/files/${row.file__file || row.file}`
      await this.downloadFile(url, row.file__file || row.file)
    },
    remove() {
      let text = 'Bạn có muốn xóa file <b>#file</b> không?'
      text = text.replace('#file', this.row.file__name)
      let obj = {component: 'dialog/Delete', title: this.$store.lang==='en'? 'Delete file' : 'Xóa file', width: '500px', height: '100px',
      vbind: {content: text, duration: 10, vbind: {row: this.row, api: this.api, pagename: this.pagename}}}
      this.$emit('open', {name: 'dataevent',  data: {modal: obj}})
    }
  }
}
</script>
