<template>
  <upload-button ref="upload" :show-file-list="showFileList" :accept="accept"
    :disabled="Number(limit) > 0 ? localFileList && localFileList.length >= limit : false"
    :before-upload="localBeforeUpload" :file-list.sync="localFileList" :list-type="listType" :on-progress="onProgress"
    :on-success="handleUploadSuccess" :auto-upload="autoUpload" :http-request="localHttpRequest" :action="action"
    :multiple="multiple">
    <el-button v-if="listType === 'text'"
      :disabled="Number(limit) > 0 ? localFileList && localFileList.length >= limit : false" plain type="primary"
      :loading="loading" :size="buttonSize">{{ buttonName }}</el-button>
    <i v-if="listType === 'picture-card'" slot="default" class="el-icon-plus" />
    <div v-if="listType === 'picture-card'" slot="file" slot-scope="{file}" class="image-wrapper">
      <img class="el-upload-list__item-thumbnail" :src="file.fileUrl" alt="">
      <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePreviewLogo(file)">
          <i class="el-icon-zoom-in" />
        </span>
        <span class="el-upload-list__item-delete" @click="handleRemoveLogo(file)">
          <i class="el-icon-delete" />
        </span>
      </span>
    </div>
  </upload-button>

</template>
<script>
import uploadButton from '@/components/Upload/UploadButton'
import Define from '@/utils/dict/Define'
import { compressImg } from '@/utils'
import { importFile } from '@/api/file'

export default {
  name: 'UploadFile',
  components: {
    uploadButton
  },
  props: {
    action: {
      type: String,
      default: process.env.VUE_APP_BASE_API + '/file/upload'
    },
    fileList: {
      type: Array,
      default: () => []
    },
    limit: [Number],
    buttonName: {
      type: String,
      default: '点击上传'
    },
    accept: {
      type: String,
      default: `${Define.FILE.WORD},${Define.FILE.EXCEL},${Define.FILE.PPT},${Define.FILE.PDF},${Define.FILE.PNG}`
    },
    autoUpload: {
      type: Boolean,
      default: () => true
    },
    httpRequest: [Function],
    buttonSize: {
      type: String,
      default: 'mini'
    },
    listType: {
      type: String,
      default: 'text'
    },
    showFileList: [Boolean],
    multiple: [Boolean],
    beforeUpload: [Function]
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {
    localFileList: {
      get() {
        return this.fileList
      },
      set(val) {
        this.$emit('update:fileList', val)
      }
    }
  },
  methods: {
    localBeforeUpload(file) {
      this.loading = true
      // 是否有同名文件
      const tag = this.localFileList.every(item => item.fileName !== file.name)
      if (!tag) {
        this.$modal.msgError('此文件已上传')
        this.loading = false
        return false
      } else if (this.beforeUpload && typeof this.beforeUpload === 'function') {
        return this.beforeUpload(file)
      } else {
        return true
      }
    },
    onProgress() {
      this.loading = true
    },
    localUpload() {
      this.$refs.upload.upload()
    },
    handlePreviewLogo(file) {
      file.url = file.fileUrl
      this.$refs.upload.handleFilePreview(file)
    },
    handleRemoveLogo(file) {
      this.$refs.upload.handleFileRemove(file)
    },
    onUpload(file) {
      const formData = new FormData()
      formData.append('file', file)
      const url = this.action.replace(process.env.VUE_APP_BASE_API, '')
      importFile(formData, url).then(res => {
        this.handleUploadSuccess(res)
      })
    },
    localHttpRequest(value) {
      if (this.httpRequest) return this.httpRequest(value)
      const fileType = value.file.name.split('.')[1]
      if (Define.FILE.PNG.includes(`.${fileType}`)) {
        compressImg(value.file, null, 300).then(res => {
          this.onUpload(res.file)
        })
      } else {
        this.onUpload(value.file)
      }
    },
    handleUploadSuccess({ code, msg, data }) {
      if (code === 200) {
        this.loading = false
        data.fileId = data.id
        data.uid = data.uid
        data.deletable = true
        this.localFileList.push(data)
      } else {
        this.$modal.msgError(`${msg}`)
        this.loading = false
      }
    },
    onClick() {
      this.$refs.upload.onClick()
    }
  }
}
</script>


<style lang="scss" scoped>
.disabled-upload {
  ::v-deep .el-upload.el-upload--picture-card {
    cursor: not-allowed;
  }
}

//移除动画
::v-deep .el-upload-list__item {
  transition: none !important;
  -webkit-transition: none !important;
}

::v-deep .el-upload-list__item-name {
  transition: none !important;
  -webkit-transition: none !important;
}

::v-deep .disabled .el-upload--picture-card {
  display: none !important;
}
</style>
