<template>
  <div class="container">
    <div v-for="(url, index) in addList" :key="index" class="img_item">
      <el-image style="width: 265px; height: 100px;border-radius:8px;" fit="cover" :src="url.url" :preview-src-list="[url.url]">
        <div slot="error">
          <img src="../../assets/image/image_placeholder.png" style="width: 100px; height: 100px;"/>
        </div>
      </el-image>
      <img src="../../assets/image/close.png" class="image_del" @click="handleRemove(index)"/>
    </div>
    <div class="upload-box" v-if="addList.length!=count">
      <el-upload :action="uploadImgUrl" multiple :limit="count" accept="image/*" :file-list="showImgList" :show-file-list="false" :on-exceed="exceedLimit" :on-success="handleSuccess" :before-upload="beforeUpload">
        <div class="add-picture">
          <div v-if="tip!=''" style="color:#999;margin:0 10px;line-height: 20px;">{{tip}}</div>
          <img v-else src="../../assets/image/addPicture.png" class="addPicture"/>
        </div>
      </el-upload>
    </div>
  </div>
</template>
<script>

export default {
  name: "UploadImg",
  props: {
    imgList: {
      type: Array,
      default: []
    },
    count: {
      type: Number,
      default: 6
    },
    type: {
      type: String,
      default: ''
    },
    tip: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/oss/fileupload", // 上传的图片服务器地址
      list: "",
      srcList: [],
      showImgList: [],
      addList: []
    };
  },
  created() {
    // this.imgList = []
    this.filterList(this.imgList);
  },
  watch: {
    imgList() {
      this.filterList(this.imgList);
    }
  },
  methods: {
    filterList(imgArr) {
      this.$nextTick(() => {
        let arr = []
        this.showImgList = [];
        this.addList = []
        if(imgArr){
          imgArr.map(item=>{
            let obj = {url: ""}
            if(item.url&&item.url!='') {
              arr.push(item.url);
              obj.url = item.url;
            } else{
              arr.push(item);
              obj.url = item;
            }
            this.showImgList.push(obj)
            if(obj.url!=undefined){
              this.addList.push(obj)
            }
          });
        }
        console.log(this.addList)
        this.list = arr.join(';')
      });
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      let that = this
      // this.$refs.form.clearValidate('bannerImg');//清除验证
      this.addList.push({url:res.result})
      this.$emit("changeImg", this.addList, this.type, this.index);
    },
    // 删除
    handleRemove(i) {
      this.addList.splice(i, 1);
      this.filterList(this.addList);
      this.$emit("changeImg", this.addList, this.type, this.index);
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG、PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    exceedLimit() {
      this.$message.error(`最多上传${this.count}张图片`);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
}
.img_item {
  position: relative;
  margin-right: 10px;
  display: inline-block;
  .image_del {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    width: 20px;
    height: 20px;
    color: red;
    cursor: pointer;
  }
}
.add-picture {
  width: 265px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  border-radius: 8px;
  .addPicture {
    width: 60px;
    height: 60px;
  }
}
</style>
