<template>
  <el-upload class="upload"
             :action="uploadApi"
             :accept="fileType"
             :show-file-list="false"
             :before-upload="beforeUpload"
             :on-success="uploadSuccess"
             :headers="headers"
             :data="sendData"
             :disabled="disabled"
             v-if="btnDisplay">
    <auth-button v-if="!classType" :disabled="disabled" :size="btnSize" type="primary" icon="iconfont iconycpiliangshangchuan" :label="batchUploadName" :menuCode="menuCode" :perms="perms" :openPerms="openPerms"></auth-button>
    <auth-button v-else :size="btnSize" :disabled="disabled" class="iconCircle" icon="iconfont iconycshangchuan1" :title="batchUploadName" :menuCode="menuCode" :perms="perms" :openPerms="openPerms"></auth-button>
  </el-upload>
</template>

<script>
import { authButton } from 'newepoch-components'
export default {
  inheritAttrs: false,
  components: { authButton },
  props: {
    // 所属菜单Code-->全局唯一
    menuCode: {
      type: String,
      default: null
    },
    // 按钮权限标识，外部使用者传入
    perms: {
      type: String,
      default: null
    },
    // 所属类型CODE
    belongCode: {
      type: String,
      default: function () {
        return 'GYS'
      }
    },
    // 所属业务ID
    belongID: {
      type: String,
      // required: true,
      default: function () {
        return null
      }
    },
    // 限制文件类型
    fileType: {
      type: String,
      default: function () {
        return '.zip'
      }
    },
    // 限制文件大小(M)
    fileSize: {
      type: Number,
      default: function () {
        return 50
      }
    },
    // 文件管理服务上传地址
    uploadApi: {
      type: String,
      required: true
    },
    // 行数据
    rowData: {
      type: Object,
      default: function () {
        return null
      }
    },
    // 行号
    rowIndex: {
      type: Number,
      default: function () {
        return null
      }
    },
    // 按钮大小
    btnSize: {
      type: String,
      default: function () {
        return 'small'
      }
    },
    btnDisplay: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // index
    index: {
      type: Number,
      default: function () {
        return null
      }
    },
    // 批量上传按钮显示内容
    batchUploadName: {
      type: String,
      default: function () {
        return '批量上传'
      }
    },
    // 是否开启鉴权，默认关闭
    openPerms: {
      type: Boolean,
      default () {
        return false
      }
    },
    classType: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    disabled: { // 按钮是否禁用
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  data () {
    return {
      fullscreenLoading: false,
      headers: {
        Authorization: 'Bearer ' + this.$store.getters.token,
        token: this.$store.getters.token,
        tenantId: this.$store.getters.tenantId,
        client: this.$store.getters.sysId
      },
      fileName: ''
    }
  },
  computed: {
    sendData: function () {
      return {
        belongCode: this.belongCode,
        belongID: this.belongID
      }
    }
  },
  methods: {
    beforeUpload (file) {
      if (!this.UtilJs.isNull(this.fileSize) && file.size / 1024 > this.fileSize * 1024) {
        this.warning(`已超出上传文件最大限制${this.fileSize}M`)
        return false
      }
      var fileType = '.' + file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
      if (!this.UtilJs.isNull(this.fileType)) {
        var fileTypeFlag = 0
        var fileTypeList = this.fileType.toLowerCase().split(',')
        fileTypeList.forEach(it => {
          if (fileType === it) {
            fileTypeFlag = 1
          }
        })
        if (fileTypeFlag === 0) {
          this.warning('只能上传' + this.fileType.toLowerCase().replace(/\./g, '') + '文件')
          return false
        }
      }
      this.fullscreenLoading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.fileName = file.name
      return true
    },
    uploadSuccess (response) {
      if (response.code !== '0') {
        this.fullscreenLoading.close()
        this.error(response.message)
        return
      }
      let returnData = {}
      returnData.rowData = this.rowData
      returnData.rowIndex = this.rowIndex
      returnData.index = this.index
      returnData.fileName = this.fileName
      returnData.fileList = response.data
      this.$emit('uploadSuccess', returnData)
      this.fullscreenLoading.close()
    }
  }
}
</script>

<style scoped>
  .upload{
    display:inline-block;
    margin-left: 10px;
  }
</style>
