<template>
<div>
<glp-file-link :data-source="dataSource" :download-fn="downloadFn"></glp-file-link>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

/**
 * @title  批量下载
 * @desc 提供批量下载钩子。
 */
@Component
export default class BatchDownloadExample extends Vue {
  dataSource = [
    { name: '阿里云图片文件.jpg', url: 'http://glp-common.oss-cn-shanghai.aliyuncs.com/tmp/0518d981-b53b-4dc3-8f0a-70f40f4e441c.jpg' },
    { name: '附件图片文件.jpg', url: 'http://localhost:3000/nas/download/1.jpg' },
    { name: '阿里云PDF文件.pdf', url: 'http://glp-common.oss-cn-shanghai.aliyuncs.com/tmp/142b7584-9fad-42de-b278-107873065b1e.pdf' },
    { name: '附件PDF文件.pdf', url: 'http://localhost:3000/nas/download/1.pdf' },
    { name: 'word文件.docx', url: 'http://localhost:3000/nas/download/1.docx' },
    { name: 'Excel文件.docx', url: 'http://localhost:3000/nas/download/1.xlsx' }
  ]

  downloadFn () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.$message.warning('下载失败')
        reject(new Error('fail'))
      }, 5000)
    })
  }
}
</script>
