<template>
  <div>
    <div class="img_crop" v-if="type == 'cropper'">
      <div v-for="(item, index) in fileArray" :key="'img' + index" class="list_img">
        <div v-if="!readOnly" @click="deleteImg(item, index)" class="list_img_back">
          <i class="el-icon-delete img_del"></i>
        </div>
        <el-image class="list_img_item" :src="item.url" :fit="fit"></el-image>
      </div>
      <cropper v-if="fileArray.length <= max - 1" @getNewUrl="getNewUrl"></cropper>
    </div>
    <div v-else>
      <el-upload
        action="/awecloud/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
    },
    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;
    }
  },
  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;
      }
    },
    handleAvatarSuccess(response, file, fileList) {
      // 上传图片
      if (this.type == "mp3") {
        if (response.success == 1) {
          this.fileArray.push({
            url: response.data.dbUrl,
            name: response.data.fileName
          });
        }
        this.$emit("getNewList", this.fileArray);
      } else if (this.type == "picture") {
        if (response.success == 1) {
          this.fileArray.push({
            url: response.data.dbUrl,
            name: response.data.fileName
          });
        }
        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.response.data.dbUrl) {
            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);
    },
    getNewUrl(val) {
      this.fileArray.push({ name: val, url: val });
      this.$emit("getNewList", this.fileArray);
      console.log(this.fileArray);
    },
    deleteImg(item, index) {
      this.fileArray.splice(index, 1);
      this.$emit("getNewList", this.fileArray);
    }
  }
};
</script>
 <style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
<style scoped>
.list_img {
  width: 140px;
  height: 140px;
  border-radius: 5px;
  overflow: hidden;
  margin-left: 10px;
  position: relative;
  cursor: pointer;
}
.list_img_back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
  opacity: 0;
}
.list_img:hover .list_img_back {
  opacity: 0.5;
}
.list_img_item {
  width: 100%;
  height: 100%;
}
.img_crop {
  display: flex;
  align-items: center;
}
.img_del {
  position: absolute;
  top: calc((100% - 24px) / 2);
  left: calc((100% - 24px) / 2);
  color: #fff;
  font-size: 24px;
}
</style>