<template>
  <div class="container">
    <div v-for="(url, index) in addList" :key="index" class="img_item">
      <el-image style="width: 100px; height: 100px;border-radius:8px;" fit="cover" :src="url.url" :preview-src-list="onPreview(index)">
        <div slot="error">
          <img src="../../assets/images/image_placeholder.png" style="width: 100px; height: 100px;"/>
        </div>
      </el-image>
      <img src="../../assets/images/close.png" class="image_del" @click="handleRemove(index)"/>
      <!-- <div class="mask-box">
      </div> -->
    </div>
    <div class="upload-box" v-if="addList.length!=count">
      <el-upload :action="uploadImgUrl" multiple :limit="count" :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/images/addPicture.png" class="addPicture"/>
        </div>
      </el-upload>

    </div>
  </div>
</template>
<script>
  import { updateInspectionImage } from "@/api/maintenance/inspectionImage";
  import { updateMaintenanceInfoImage } from "@/api/maintenance/maintenanceInfoImage";

  export default {
    name: "UploadImg",
    props: {
      imgList: {
        type: Array,
        default: function () {
          return [];
        }
      },
      count: {
        type: Number,
        default: 6
      },
      type: {
        type: String,
        default: ''
      },
      tip: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadImage", // 上传的图片服务器地址
        list: "",
        srcList: [],
        showImgList: [],
        addList: []
      };
    },
    created() {

    },
    watch: {
      imgList() {
        this.filterList(this.imgList);
      }
    },
    methods: {
      filterList(imgArr) {
        this.$nextTick(() => {
          let arr = []
          this.showImgList = [];
          this.addList = []
          imgArr.map(item=>{
            let obj = {url: "",imageId:""}
            if(item.response&&item.response.result!='') {
              arr.push(item.response.result);
              obj.url = item.response.result;
            } else {
              arr.push(item.url);
              obj.url = item.url;
              obj.imageId = item.imageId;
            }
            this.showImgList.push(obj)
            this.addList.push(obj)
          });
          // console.log(arr)
          this.list = arr.join(';')
        });
      },
      handleSuccess(res, file, fileList) {
        // console.log(fileList)
        this.addList.push({url:res.url})
        this.$emit("changeImg", this.addList,this.type);
        // console.log("上传成功", res.result);

        // 提示最多上传6张图片
        if (this.addList.length == this.count) {
          this.$message.warning(`最多上传${this.count}张图片`);
        }
      },

      handleRemove(i) {
        let obj = this.addList[i];
        // 删除巡检图片表里当前图片
        if(this.type=='instoreImg'){//巡检信息页面删除图片
          updateInspectionImage(obj).then(response => {
            this.$modal.msgSuccess("删除成功");
          });
        }else if(this.type="maintenInfoStoreImg"){//维保信息页面删除图片
          updateMaintenanceInfoImage(obj).then(response => {
            this.$modal.msgSuccess("删除成功");
          });
        }
          // console.log(this.addList[i]);
        //   console.log(i);
        this.addList.splice(i,1);
        this.filterList(this.addList);
        this.$emit("professionImg", this.addList,this.type);
        console.log("type"+this.type)
      },
      //预览图片
      onPreview(i) {
        let tempImgList = this.list.split(';');
        let temp = [];
        for (let t = 0; t < i; t++) {
          temp.push(tempImgList.shift());
        }
        return tempImgList.concat(temp);
      },

      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: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
    border-radius: 8px;
    .addPicture {
      width: 60px;
      height: 60px;
    }
  }
</style>
