<template>
  <div class="container">
    <div class="image-box" v-if="imageUrl!=''">
      <el-image fit="cover" :src="imageUrl" style="width: 100px; height: 100px;border-radius:8px;" :preview-src-list="[imageUrl]">
        <div slot="error">
          <img src="../../assets/image/image_placeholder.png" />
        </div>
      </el-image>
      <img src="../../assets/image/close.png" class="image_del" @click="dele()"/>
    </div>
    <div class="upload-box" v-if="imageUrl==''">
      <el-upload
        :action="uploadImgUrl"
        :show-file-list="multity"
        :multiple="multity"
        :limit="count"
        :on-exceed="exceedLimit"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
      >
        <!-- <el-button size="mini" type="primary">点击上传</el-button> -->
        <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: "Upload",
  props: {
    url: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: ''
    },
    tip: {
        type: String,
        default: ''
    },
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/oss/fileupload", // 上传的图片服务器地址
      multity: false,
      imageUrl: this.url,
      count: 0,
    };
  },
  created() {
    console.log("sdfasdf")
    if(this.url) {
      //this.imageUrl = this.url;
    }
  },
  watch: {
    url(curVal, oldVal) {
      this.imageUrl = curVal;
    }
  },
  methods: {
    handleSuccess(res, file) {
      this.imageUrl = res.result;
      this.$emit('imageUrl',this.imageUrl,this.type)
      console.log("上传成功", res.result);
    },
    handleError(err, file, fileList) {
      console.log('image upload error', err)
    },
    dele() {
      this.imageUrl = "";
    },
    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("超出文件上传最大数");
    },
  },
};
</script>

<style lang="scss" scoped>
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.container {
  display: flex;
  flex-direction: row;
}
.image-box {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-right: 10px;
  position: relative;
}
.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;
    }
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-close-icon {
  position: absolute;
  color: #666;
  top: 2px;
  cursor: pointer;
  z-index: 99;
  right: 2px;
  float: right;
}
.el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.avatar-close-icon:hover {
  position: absolute;
  color: red;
  top: 2px;
  z-index: 99;
  right: 2px;
  float: right;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
}
.overflow_img {
  display: none;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>