<template>
  <div>
    <Modal
      v-model="showEditModal"
      :mask-closable="false"
      :title="modalTitle"
      width="28%"
      @on-cancel="_closeModal"
    >
      <div>
        <el-upload
          class="upload-demo"
          :action="action"
          :with-credentials="true"
          :before-upload="_beupload"
          :on-progress="_uploadLoading"
          :on-remove="_removeLoading"
          :on-success="_handelsuccess"
          multiple
          :limit="1"
          style="display: inline-block; width: 80%"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button circle icon="el-icon-upload"></el-button>
          <span style="color: #ff9900; display: inline-block">上传文件大小不能超过150MB</span>
        </el-upload>
      </div>
      <div slot="footer">
        <modalFooter ref="footerModal" :footer="footerList" @on-result-change="_footerResult"></modalFooter>
      </div>
    </Modal>
  </div>
</template>

<script>
import modalFooter from '../../components/base/modalFooter'
import global from '../../api/config'
export default {
  name: 'Upload',
  components: {
    modalFooter
  },
  data() {
    return {
      action: global.baseURL + '/v1/file/upload?folderId=',
      fileList: [],
      showEditModal: false,
      modalTitle: '',
      currentFolderId: '',
      residue: '',
      isLoading: false,
      footerList: [{ type: '', id: '', name: '取消' }],
      dataObj: {
        file: ''
      },
      accessToken: ''
    }
  },
  watch: {
    isLoading: 'changeLoading'
  },
  mounted() {
    this.accessToken = global.getToken()
  },
  methods: {
    changeLoading(curVal) {
      console.log(curVal)
      if (curVal) {
        this.$Message.loading({
          content: '正在上传，请稍后...',
          duration: 0
        })
      } else {
        setTimeout(() => {
          this.$Message.destroy()
        }, 0)
      }
    },
    _open(currentFolderId, residue) {
      this.showEditModal = true
      this.modalTitle = '上传文件'
      this.fileList = []
      this.residue = residue
      this.action =
        global.baseURL + '/v1/file/upload?folderId=' + currentFolderId
    },
    handleExceed(files, fileList) {
      this.$message.warning('当前限制同时上传1个文件')
    },
    // 上传文件
    _beupload(file) {
      this.dataObj.file = file.name
      const fileSize = file.size / 1024 / 1024 <= 150
      const residueSpace = file.size / 1024 / 1024 < this.residue
      if (!fileSize) {
        this.$message.warning('上传文件大小不能超过150MB')
      }
      if (!residueSpace) {
        this.$message.warning('您所上传的文件已超过所剩共享空间')
      }
      return fileSize && residueSpace
    },
    _uploadLoading(event, file, fileList) {
      console.log('调用')
      this.isLoading = true
    },
    _removeLoading() {
      this.isLoading = false
      this._uploadLoading(false)
    },
    _handelsuccess(response, file, fileList) {
      // 上传成功
      if (response.success) {
        this.$message.success('上传成功！')
        this.showEditModal = false
        this.$emit('on-result-change')
      } else {
        this.$message.error(response.msg)
      }
      this.isLoading = false
    },
    _closeModal() {
      this.fileList = []
      this._cancel()
    },
    _footerResult(msg) {
      switch (msg) {
        case '取消':
          this._cancel()
          break
      }
    },
    _cancel() {
      this.showEditModal = false
      this.isLoading = false
    }
  }
}
</script>

<style scoped>
</style>
