<template>
    <div class="ai-download">
      <a @click="onExport">
        <slot slot v-if="isHasSlot"></slot>
      </a>
      <template v-if="!isHasSlot">
        <el-button :disabled="disabled" type="primary" @click="onExport">导出</el-button>
      </template>
    </div>
  </template>
  
  <script>
  export default {
    name: 'AiDownload',
  
    props: {
      url: {
        type: String,
        default: '',
        required: true
      },
  
      timeout: {
        type: Number,
        default: 80000
      },
  
      disabled: {
        type: Boolean,
        default: false
      },
  
      params: {
        type: Object
      },
  
      fileName: {
        type: String,
        default: '文件'
      },
  
      suffixName: {
        type: String,
        default: 'xls'
      }
    },
  
    computed: {
      isHasSlot() {
        return this.$slots.default
      }
    },
  
    methods: {
      onExport() {
        if (this.disabled) {
          return this.$message.error('暂无数据')
        }
        this.$http.post(this.url, this.params, {
          responseType: 'blob',
          params: this.params,
          timeout: this.timeout
        }).then(res => {
          if (res?.type == "application/json") {
            let reader = new FileReader()
            reader.readAsText(res, "utf-8")
            reader.onload = e => {
              if (e.target.readyState === 2) {
                let ret = JSON.parse(e.target.result)
                if (ret?.code == 0) {
                  this.$message.success(ret.msg)
                } else this.$message.error(ret.msg)
              }
            }
          } else {
            const link = document.createElement('a')
            let blob = new Blob([res], {type: res.type})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', this.fileName + '.' + this.suffixName)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  
  </style>