<template>
  <el-upload class="upload-demo" :action="url" :show-file-list="false" :on-success="onSuccess" :before-upload="beforeUpload">
    <div></div>
    <el-button size="small" type="primary" :loading="loading">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">{{tipsMsg}}</div>
  </el-upload>
</template>
<script>
import { imageUrlPrefix } from '../config'

const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
export default {
  created() {
    this.updateImageUrl(this.value);
  },
  props: {
    value: String,
    usePrefix: {
      type: Boolean,
      default: true
    },
    prefix: {
      type: String,
      default: imageUrlPrefix
    },
    url: {
      type: String,
      default: baseUrl + '/assets/uploadFile'
    },
    fileType: {
      type: String,
      default: 'voice'
    }
  },
  data() {
    return {
      imageUrl: '',
      loading: false
    };
  },
  computed: {
    tipsMsg() {
      var msg = '';
      switch (this.fileType) {
        case 'voice':
          msg = '只能上传mp3文件';
          break;
        case 'movice':
          msg = '只能上传mp4文件';
          break;
      }
      return msg;
    },
    needFile() {
      var msg = '';
      switch (this.fileType) {
        case 'voice':
          msg = 'mp3';
          break;
        case 'movice':
          msg = 'mp4';
          break;
      }
      return msg;
    },
    warningMsg() {
      var msg = '';
      switch (this.fileType) {
        case 'voice':
          msg = '音频文件格式错误';
          break;
        case 'movice':
          msg = '视频文件格式错误';
          break;
      }
      return msg;
    }
  },
  methods: {
    onSuccess(res, file) {
      this.loading = false;
      this.imageUrl = URL.createObjectURL(file.raw);
      var newVal = '';
      if (res.data instanceof Array) {
        newVal = res.data[0];
      } else {
        newVal = res.data;
      }
      this.$emit('input', newVal);
    },
    onError(err, file, fileList) {
      this.loading = false;
    },
    beforeUpload(file) {
      console.log(file)
      if (file.name.indexOf(this.needFile) == -1) {
        this.$message({
          type: 'warning',
          message: this.warningMsg
        });
        return false;
      }
      this.loading = true;
      return true;
    },
    updateImageUrl(url) {
      if (this.usePrefix && url && url.indexOf(this.prefix) === -1 && url.indexOf('http') === -1) {
        this.imageUrl = this.prefix + url;
      } else {
        this.imageUrl = url;
      }
    }
  },
  watch: {
    value(val) {
      this.updateImageUrl(val);
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fbfdff;
  &:hover {
    border-color: #409eff;
  }
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    border-color: #409eff;
  }
}

.wrapper {
  position: relative;
}

.single-upload .el-upload {
  position: relative;
}

.loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  color: #333;
  font-size: 24px;
}
</style>
