<template>
  <div class="uploadTest">
    <div
      class="wran-hasImg wran"
      :style="{width:width+'px',height:height+'px'}"
      v-show="!hasImg"
      @click="add($event)"
    >
      <div class="add-wran">
        <i class="iconfont icon-add action"></i>
      </div>
    </div>
    <div v-show="hasImg" class="wran-hasNotImg wran" :style="{width:width+'px',height:height+'px'}">
      <i class="iconfont icon-delete action" @click="del($event)"></i>
      <img ref="curImg" class="curImg" :style="{width:width+'px',height:height+'px'}" />
      <div class="mask"></div>
    </div>
    <input
      ref="uploadDom"
      type="file"
      id="inputBox"
      style="border:none;display:none;"
      @change="selectImageURL"
      accept="image/*"
    />
  </div>
</template>
<script>
import Axios from "axios";
export default {
  name: "upload", // 內(nèi)飾
  props: {
    y: {
      // 嵌套多張圖片時(shí)的標(biāo)記
      type: Number,
      default: 0
    },
    index: {
      // 多張圖片時(shí)的標(biāo)記
      type: Number,
      default: 0
    },
    url: {
      // 云服務(wù)地址
      type: String,
      default: "https://dev.huaweidun.com:812/api/Tools/WebUpload"
    },
    imgBackFlag: {
      // 是否回顯圖片
      type: Boolean,
      default: false
    },
    propCurrentImg: {
      // 傳入圖片地址
      type: String,
      default: ""
    },
    width: {
      // 寬度
      type: Number,
      default: 100
    },
    height: {
      // 高度
      type: Number,
      default: 100
    },
    maxSize: {
      // 最大尺寸
      // 可接收?qǐng)D片最大尺寸 單位 MB
      type: Number,
      default: 250
    },
    minSize: {
      // 可接收最小尺寸
      type: Number,
      default: 0
    },
    //jpg仅胞，png乳幸，tif，gif
    accept: {
      type: Array,
      default: () => ["jpg", "png", "gif"]
    }
  },
  data() {
    return {
      hasImg: false,
      currentImg: ""
    };
  },
  created() {},
  mounted() {
    if (this.imgBackFlag && this.propCurrentImg != "") {
      this.hasImg = this.imgBackFlag;
      this.$refs.curImg.src = this.propCurrentImg;
    }
  },
  watch: {
    propCurrentImg(newV, oldV) {
      if (this.imgBackFlag) {
        this.hasImg = this.imgBackFlag;
        if (this.propCurrentImg) {
          this.$refs.curImg.src = this.propCurrentImg;
        } else {
          this.$refs.curImg.src = null;
          this.$refs.uploadDom.value = "";
          this.hasImg = false;
        }
      }
    }
  },
  methods: {
    add(e) {
      if (this.hasImg) {
      } else {
        this.$refs.uploadDom.click();
      }
    },
    del(e) {
      this.$refs.curImg.src = null;
      this.$refs.uploadDom.value = "";
      this.hasImg = false;
      this.$emit("on-delete", "內(nèi)容已清空", this.index, this.y);
    },
    // 上傳圖片
    selectImageURL(e) {
      let file = e.target.files[0];
      let fileName = e.target.value;
      let fileType = fileName
        .substring(fileName.lastIndexOf(".") + 1, fileName.length)
        .toLowerCase();
      if (this.accept.includes(fileType)) {
        // console.log("該類(lèi)型可以用  ", fileType);
        this.sizeFormate(e, file, fileType);
      } else {
        this.$emit(
          "on-format-error",
          file,
          "文件格式錯(cuò)誤！當(dāng)前格式" + fileType + "可接收類(lèi)型",
          JSON.stringify(this.accept),
          this.index
        );
        this.$refs.uploadDom.value = "";
      }
    },
    sizeFormate(e, file, fileType) {
      // console.log("file ", file);
      let fileSize = 0;
      let bFomateMB = 1024 * 1024; //1M
      if (file) {
        fileSize = file.size;
        // console.log("fileSize ", fileSize);
        let curSizeMb = fileSize / bFomateMB;
        // 判斷當(dāng)前 文件大小 是否大于 maxSize
        if (curSizeMb > this.maxSize) {
          // console.log("文件不能大于" + this.maxSize + "MB植榕！");
          this.$emit(
            "on-exceeded-size",
            file,
            "上傳文件不能大于" + this.maxSize + "MB",
            this.index
          );
          this.$refs.uploadDom.value = "";
          // 判斷當(dāng)前文件 大小 是否 小于0
        } else if (curSizeMb <= 0) {
          // console.log("文件大小不能為0MB！");
          this.$emit("on-exceeded-size", file, "文件大小不能為0MB");
          this.$refs.uploadDom.value = "";
        } else {
          /* 圖片傳輸 部分 */
          // param.append("chunk", "0"); // 添加form表單中其他數(shù)據(jù)
          // console.log(param.get("file")); // FormData私有類(lèi)對(duì)象，訪問(wèn)不到祈餐，可以通過(guò)get判斷值是否傳進(jìn)去
          let config = {
            headers: { "Content-Type": "multipart/form-data" }
          };
          // 添加請(qǐng)求頭
          let img = new Image();
          let timestamp = Date.parse(new Date());
          Axios.get(this.url)
            .then(res => {
              // console.log("res ", JSON.stringify(res.data));
              let param = new FormData(); // 創(chuàng)建form對(duì)象
              param.append("name", file.name);
              param.append(
                "key",
                `${res.data.dir}${file.name}${timestamp}.${fileType}`
              );
              param.append("policy", res.data.policy);
              param.append("OSSAccessKeyId", res.data.accessid);
              param.append("success_action_status", 200);
              param.append("signature", res.data.signature);
              param.append("callback", res.data.callback);
              param.append("dir", res.data.dir);
              param.append("file", file); // 通過(guò)append向form對(duì)象添加數(shù)據(jù)
              let uploadUrl = res.data.host;
              // console.log(uploadUrl, res.data.host)
              let img = new Image();
              Axios.post(uploadUrl, param)
                .then(res2 => {
                  // console.log("res2222.data.imgUrl ", res2.data.imgUrl);
                  if (res2.data.status === "Ok") {
                    // console.log("res2.data.imgUrl ", res2.data.imgUrl);
                    let successImgUrl = res2.data.imgUrl;
                    this.$emit(
                      "on-success",
                      successImgUrl,
                      file,
                      this.index,
                      this.y
                    );
                    img.onload = () => {
                      this.hasImg = true;
                      console.log("this.hasImg ", this.hasImg);
                      this.$nextTick(() => {
                        console.log("this.$refs.curImg. ", this.$refs.curImg);
                        this.$refs.curImg.src = successImgUrl;
                      });
                      // this.$refs.curImg.src = successImgUrl;
                      img.onload = null;
                    };
                    img.src = successImgUrl;
                  }
                })
                .catch(err => {
                  // console.log(err);
                });
            })
            .catch(res => {});
        }
      } else {
        // console.log("文件不存在");
      }
    }
  }
};
</script>
<style scoped lang="less">
@font-face {
  font-family: "iconfont";
  src: url("http://at.alicdn.com/t/font_1744626_0tlyf9dhykx.eot?t=1586424643369"); /* IE9 */
  src: url("http://at.alicdn.com/t/font_1744626_0tlyf9dhykx.eot?t=1586424643369#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMUAAsAAAAABwwAAALIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBdIFnATYCJAMMCwgABCAFhG0HNhstBsiemjzaRMtKisYAS5+VAHhDfrn2vs3mrikiKmD3gap4POu6GsESwTFoFvrMWLMU8IEcR6gnyaCK9mgPKJ007UyFc0/Gl4eH+73nvn8XBdYis42iOYs2rsBOLxvQzJLXGom1yXzi3mkTKJD5LMtljnH+qQswDiigsTZ1kRRIgt4wdsELPAwE8BAjC3W8fA2oTbJHEYCWksildiFMkiynEL1hYaIzlFHFvjgHsBB9n/5QEAoErcSe2Ln4HNDd18dXBE8Zu8YDEiTLOQGwZQADsgASaLIxPaiGGIN5qOvdpTqJiKVixpJIbCh15w8PEAionF3tBQDSkFF4KInHAwFfSJ+6mgGADrMdCEOYHlRItPrakLQ7bKzW9pYOXhS1PnP3tca7YB6+B9cJ6t610u8MumQeWhmOKwOq3u1Wex3sh1adzzfF3ht3sZpHbU1WT3lfbI1Dk2l9q97fJ7wQz7eP7KJv+b9F8aB8t40sRcLhYu+el+PgLBp2yEzO9Fo6PPt8i0q67SRn8iUnZdIFAw8Teyjvch2Rcco7XPGzf4NjMT61cfWvahIAvObVGIWMU4nhFVAEMMmvlQysk4bMtnBqYk9s5VgO7cZN8DB8MGD7A3xO1wffvpOogoRBcBMNpiSRJT0LGk9F0Cm18JCpdbmnQONqKKsAGeYBiJ91CD4OwPxckCX9A5oQ/9D5BcNDf+xs6CklhruPCtcQsGXBw76UoWuzblzbQzTLXc3LIuYIOk1inJ+TV869ooQuMWViHp1PWsgOlYJbwHHIc+FRlRS+HbvMJhe5uY6mFx1bpaCuRgpcBgLMYoEN84lSGDQ33crneyAyk3NpB6HOPwJqKmmf5cuRN4D8qi4HER7lmQlzkXOTTIg5KFFgLaAf5HKCjTb3S4HPHHNNSE5cyHUaOYaqj7fXFv+3BcCDvRtHEaVIPBMEzQA5DEQ=")
      format("woff2"),
    url("http://at.alicdn.com/t/font_1744626_0tlyf9dhykx.woff?t=1586424643369")
      format("woff"),
    url("http://at.alicdn.com/t/font_1744626_0tlyf9dhykx.ttf?t=1586424643369")
      format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url("http://at.alicdn.com/t/font_1744626_0tlyf9dhykx.svg?t=1586424643369#iconfont")
      format("svg"); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-add:before {
  content: "\e81a";
}
.icon-delete:before {
  content: "\e7b2";
}
.wran-hasImg {
  position: relative;
  border: 1px solid #ccc;
  .add-wran {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    .icon-add {
      font-size: 30px;
      &:hover {
        font-size: 35px;
        cursor: pointer;
      }
    }
  }
}
.wran-hasNotImg {
  position: relative;
  .curImg {
  }
  .icon-delete {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: rgb(255, 255, 255);
    display: none;
  }
  &:hover .icon-delete {
    display: block;
    z-index: 99999;
  }
  &:hover .mask {
    display: block;
    opacity: 1;
  }
  .mask {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
  }
}
.uploadTest {
  cursor: pointer;
}
</style>