<template>
  <div>
    <el-input class="fadeDom" v-model="filePath"></el-input>
    <el-upload class="upload-demo" drag :action="url" :data="data" :headers="{token}" :show-file-list="false"
      :before-upload="beforeMultipleUpload" :on-error="handleError" :on-success="handleSuccess">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
        <p style="padding:0 10px;">{{desc}}</p>
      </div>
    </el-upload>
    <slot name="filePath"></slot>
  </div>
</template>

<script>
export default {
  props: ['filePath', 'url', 'desc', 'data'],
  data() {
    return {
      token: window.localStorage.getItem('token')
    }
  },
  methods: {
    showLoading() {
      this.loading = this.$loading(this.loadOption)
    },
    beforeMultipleUpload(file) {
      let typeArr = this.desc.indexOf('4dage') > -1 ? ['.4dage'] : (this.desc.indexOf('mp3') > -1 ? ['mp3'] : ['mov', 'mp4'])
      let type = this.isTypeBySend(file.name, typeArr);
      if (!type) {
        this.$message.error('只允许指定文件格式的文件');
        return type
      }

      let tupeee = this.desc.indexOf('4dage') > -1
      let adueee = this.desc.indexOf('mp3') > -1


      let size = tupeee ? 500 : (adueee ? 100 : 500)
      const isLt500M = file.size / 1024 / 1024 < size;

      if (!isLt500M) {
        this.$message.error(`上传文件大小不能超过${tupeee ? '500MB' : (adueee ? '100MB' : '500MB')}!`);
        return isLt500M;
      }
      this.showLoading()
    },
    handleError() {
      this.$alert("上传失败,请稍后再试", "提示", {
        confirmButtonText: "确定",
        callback: () => {
          this.loading.close()
        },
      });
    },
    handleSuccess(res) {
      this.loading.close()
      let { data } = res;
      this.$emit('update', data)
    }
  }
}
</script>

<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>