<template>
  <el-upload :action="define.comUrl+url" :headers="{ Authorization: $store.getters.token}"
    :on-success="handleSuccess" :before-upload="beforeUpload" :show-file-list="false"
    class="upload-btn" :http-request="customUpload">
    <el-button :type="buttonType" icon="el-icon-upload2" :loading="loading">{{buttonText}}
    </el-button>
  </el-upload>
</template>

<script>
import { ossUploadFile } from '@/utils/oss-upload'
export default {
  name: 'NCC-uploadBtn',
  data() {
    return {
      loading: false
    }
  },
  props: {
    url: {
      type: String,
      default: ""
    },
    buttonText: {
      type: String,
      default: '导入'
    },
    buttonType: {
      type: String,
      default: 'text'
    }
  },
  methods: {
    customUpload(options) {
      var file = options.file
      this.loading = true
      if (this.url.indexOf('annexpic') > -1 || this.url.indexOf('attendancepic') > -1) {
        var ossType = this.url.indexOf('attendancepic') > -1 ? 'attendancepic' : 'annexpic'
        ossUploadFile(file, ossType).then(data => {
          this.loading = false
          this.$message({ message: '上传成功', type: 'success', duration: 1000 })
          this.$emit('on-success')
        }).catch(() => {
          this.loading = false
          this.$message({ message: '上传失败，请重试', type: 'error', duration: 1000 })
        })
      } else {
        var formData = new FormData()
        formData.append('file', file)
        var xhr = new XMLHttpRequest()
        xhr.open('POST', this.define.comUrl + this.url, true)
        xhr.setRequestHeader('Authorization', this.$store.getters.token)
        xhr.onload = () => {
          if (xhr.status === 200) {
            var res = JSON.parse(xhr.responseText)
            this.handleSuccess(res)
          } else {
            this.loading = false
            this.$message({ message: '上传失败，请重试', type: 'error', duration: 1000 })
          }
        }
        xhr.onerror = () => {
          this.loading = false
          this.$message({ message: '上传失败，请重试', type: 'error', duration: 1000 })
        }
        xhr.send(formData)
      }
    },
    beforeUpload() {
      this.loading = true
    },
    handleSuccess(res) {
      this.loading = false
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 1000
        })
        this.$emit('on-success')
      } else {
        this.$message({
          message: res.msg,
          type: 'error',
          duration: 1000
        })
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-btn {
  display: inline-block;
  margin: 0 10px;
}
</style>