<template>
<!-- fileList为只读属性-->
<span class="img-upload-component">
  <el-upload
    name="file"
    ref="imgUpload"
    list-type="picture-card"
    :data="dataObj"
    :accept="accept.join()"
    :headers="uploadHeader"
    :multiple="isMultiple"
    :show-file-list="showFileList"
    :before-upload="beforeUpload"
    :limit="maxLen"
    :on-exceed="onExceed"
    v-loading="upLoading"
    :on-success="onSuccess"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :action="baseApi + $apiUrl.upload">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-image 
    ref="prewImg"
    style="width:0;height: 0"
    :src="clickImgUrl" 
    :preview-src-list="previewSrcList">
  </el-image>
</span>
</template>

<script>
  export default {
    props: {
      value: {
        type: [String, Array],
        default: ""
      },
      showFileList: {
        type: Boolean,
        default: true
      },
      limtSize: {
        type: Number,
        default:5
      },
      isMultiple: { //是否开启多图上传 如果开启 不可使用v-model双向绑定 使用uploadChange接收
        type: Boolean,
        default: false
      },
      maxLen: {
        type: Number,
        default:1
      },
      accept: {
        type: Array,
        default() {
          return ['.jpeg','.jpg','.png','.gif']
        }
      }
    },
    data() {
      return {
        upLoading: false,
        uploadHeader: { Authorization: ''},
        dataObj:{},
        clickImgUrl:"",
        fileList: [],
        baseApi: process.env.VUE_APP_BASE_API
      }
    },
    computed: {
      previewSrcList() {
        return this.fileList.map(item => item.url);
      }
    },
    methods: {
      beforeUpload(file) {
        this.uploadHeader.Authorization = localStorage.getItem('token');
        const isLt = (file.size / 1024) < this.limtSize*1024;
        const suffix = file.name.split('.').pop().toLowerCase();
        if (this.accept.indexOf(`.${suffix}`) == -1) {
          this.$message.error('上传文件格式不正确！');
          return false;
        }
        if (!isLt) {
          this.$message.error('上传文件大小不能超过'+ this.limtSize +'M');
          return false
        }
      },
      onSuccess(res, file, list) {
        if (res.succeed) {
          this.fileList.push({ url: res.data.path });
          this.getUploadList(res);
        } else {
          this.$refs.imgUpload.handleRemove(file)
        }
      },
      getUploadList(res) {
        let list = this.$refs.imgUpload.uploadFiles || [];
        let newList = [];
        list.map((item) => {
          if (item.status == "success") {
            if (item.response && item.response.succeed) {
              newList.push(item.response.data.path);
            } else if (!item.response && item.url) {
              newList.push(item.url);
            }
          }
        })
        //  如果开启多选功能 不可使用v-model双向绑定 使用uploadChange接收数据
        !this.isMultiple & this.$emit("input", this.maxLen > 1 ? newList : newList.join());
        this.$emit("uploadChange", newList);
        this.$emit("uploadSuccess", res);
      },
      handleRemove(file, fileList, i) {
        this.getUploadList();
      },
      handlePictureCardPreview(file) {
        this.clickImgUrl = file.url;
        this.$refs.prewImg.showViewer=true;
      },
      onExceed() {
        this.$message.error(`文件总数量不能超过${this.maxLen}个`)
      }
    },
    watch: {
      // 如果是多选上传 请使用defaultList 不要使用v-model
      defaultList:{
        handler(val) {
          this.fileList = val || []
        },
        deep:true,
        immediate: true
      },
      value: {
        handler(val, oval) {
          if (this.maxLen > 1) {
            if (val instanceof Array) {
              this.fileList=val.map(item => ({url: item}));
            } else {
              this.fileList = val ? [{url: val}] : [];
            }
          } else {
            this.fileList = val ? [{url: val}] : [];
          }
        },
        deep: true,
        immediate: true
      }

      
    }
  }
</script>

<style lang="scss" scoped>
.img-upload-component {
  ::v-deep  {
    // 删除离开动画
    .el-list-leave-to,
    .el-list-leave-active{
      display: none;
    }
    
  }

}

</style>