<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"
        :disabled="disabled"
        :accept="accepts"
      >
        <div v-if="drag">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            <span class="up_fz">将文件拖到此处，或</span>
            <em>点击上传</em>
            <div class="up_fz_1">{{ up_fz }}</div>
          </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/general/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,
    },
    unique: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    up_fz: {
      type: String,
      default: "",
    },
    accepts: {
      type: String,
      default: "",
    },
  },
  watch: {
    list(value) {
      this.getFileArray(value);
    },
  },
  created() {
    if (!this.unique) {
      this.anotherData.uniqueCode = this.unique;
    }
  },
  mounted() {
    this.getFileArray(this.list);
  },
  methods: {
    getFileArray(value) {
      var getListImg = [];
      if (value && value.length != 0) {
        for (var i = 0; i < value.length; i++) {
          if (typeof value[i] == "string") {
            getListImg.push({
              name: value[i],
              url: value[i],
            });
          } else {
            getListImg.push({
              name: value[i].name,
              url: value[i].url,
            });
          }
        }
      }
      this.fileArray = [...getListImg];
      this.hideUpload = this.fileArray.length >= this.max;
    },
    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 if (this.type == "md") {
        console.log(file);
        const isMd = file.name.substring(file.name.length - 3) == ".md";
        if (!isMd) {
          this.$message.error("上传文件只能是md格式文件!");
        }
        return isMd;
      }
    },
    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,
            size: file.size,
          });
        }
        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;
}
.up_fz {
  color: #a9aec0;
}
.up_fz_1 {
  line-height: 24px;
  color: #a9aec0;
  position: relative;
  bottom: 6px;
}
</style>