<template>
  <div>
    <div v-if="type == 'cropper'">
      <cropper :max="max" :readOnly="readOnly" :fileArray="fileArray" :fit="fit" @getNewUrl="getNewUrl"></cropper>
    </div>
    <div v-else>
      <el-upload
        class="eeupload"
        action="/apaas/static/image/upload"
        :file-list="fileArray"
        :list-type="type=='picture'?'picture-card':''"
        :limit="max"
        :multiple="multiple"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :class="{hide:hideUpload || readOnly}"
        :readOnly="readOnly"
        :data="anotherData"
        :drag="drag"
      >
        <div v-if="drag">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </div>
        <el-button size="small" type="primary" v-if="!drag && type=='default'">上传文件</el-button>
        <div slot="tip" class="el-upload__tip" v-if="!drag && type=='mp3'">支持文件格式：.mp3，单个文件不能超过20M。</div>
        <i class="el-icon-plus" v-if="!drag && type=='picture'"></i>
      </el-upload>
    </div>
  </div>
</template>

<script>
import cropper from "@/components/cropper";
export default {
  components: {
    cropper
  },
  data() {
    return {
      hideUpload: false,
      fileArray: [],
      anotherData: {
        directory: "file"
      }
    };
  },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    directory: {
      type: String,
      default: ''
    },
    max: {
      type: Number,
      default: 1
    },
    list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ""
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    fit: {
      type: String,
      default: ""
    },
    drag: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    list(value) {
      var getListImg = [];
      if (value && value.length != 0) {
        for (var i = 0; i < value.length; i++) {
          getListImg.push({
            name: value[i],
            url: value[i]
          });
        }
      }
      this.fileArray = [...getListImg];
      this.hideUpload = this.fileArray.length >= this.max;
    }
  },
  created(){
    if(this.directory){
      this.anotherData={
        directory: this.directory
      }
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      if (this.type == "mp3") {
        const isMP3 = file.type === "audio/mp3";
        const isLt10M = file.size / 1024 / 1024 < 20;
        if (!isMP3) {
          this.$message.error("只支持 MP3 格式!");
        }
        if (!isLt10M) {
          this.$message.error("上传 MP3 文件大小不能超过 20MB!");
        }
        return isMP3 && isLt10M;
      } else if (this.type == "picture") {
        const isJPG = file.type === "image/jpeg" || file.type === "image/png";
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isJPG) {
          this.$message.error("上传图片只能是 JPG 和 PNG 格式!");
        }
        if (!isLt10M) {
          this.$message.error("上传图片大小不能超过 10MB!");
        }
        return isJPG && isLt10M;
      } else {

      }
    },
    handleAvatarSuccess(response, file, fileList) {
      // 上传图片
      if (this.type == "mp3") {
        if (response.success == 1) {
          this.fileArray.push({
            url: response.data,
            name: file.name
          });
        }
        this.$emit("getNewList", this.fileArray);
      } else if (this.type == "picture") {
        if (response.success == 1) {
          this.fileArray.push({
            url: response.data,
            name: file.name
          });
        }
        this.$emit("getNewList", this.fileArray);
      } else {
        if (response.success == 1) {
          this.fileArray.push({
            url: response.data,
            name: file.name
          });
        }
        this.$emit("getNewList", this.fileArray);
      }
      this.hideUpload = fileList.length >= this.max;
    },
    handleRemove(file, fileList) {
      // if (!(fileList && fileList.length > 0)) {
      //   return;
      // }
      let url = file.url;
      let detection = true;
      if (url) detection = url.indexOf("blob") != -1;
      if (detection) {
        this.fileArray.forEach((item, i, arr) => {
          if (item.url === file.url) {
            this.fileArray.splice(i, 1);
          }
        });
      } else {
        this.fileArray.forEach((item, i, arr) => {
          if (item.url === file.url) {
            this.fileArray.splice(i, 1);
          }
        });
      }
      
      this.hideUpload = fileList.length >= this.max;
      this.$emit("getNewList", this.fileArray);
    },
    remove_pic(){
      document.querySelector('.eeupload').querySelector('.el-upload-list__item-delete').click();
      setTimeout(()=>{
        document.querySelector('.eeupload').querySelector('.el-upload').click();
      },1000)
    },
    getNewUrl(val) {
      let fileObj = { name: val, url: val };
      this.$emit("getNewList", fileObj);
    }
  }
};
</script>
 <style>
.hide .el-upload--picture-card {
  display: none;
}
</style>