<template ref="UploadImage1">
  <div class="finish_room">
    <div class="finish_room2">
      <div :images="photo" v-if="show" class="finish_room_photo">
        <div :key="index" v-for="(item, index) in photo" class="room_img">
          <img :src="item" />
          <div v-if="!disabled" @click="deleteImg(index)" class="im-button">
            <div class="im-close"></div>
            <div class="im-close1"></div>
          </div>
        </div>
      </div>
      <div v-if="photo.length < limit" v-loading="loading" class="room_add_img">
        <slot name="upload"></slot>
        <input :disabled="disabled" @change="add_img" type="file" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Setting from "~/setting";

export default {
  props: {
    UploadImage1Url: {
      type: String,
      default: "/upload/otherImage"
    },
    show: {
      type: Boolean,
      default: () => true
    },
    limit: {
      type: Number,
      default() {
        return 1;
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false;
      }
    },
    isCompress: {
      type: Boolean,
      default() {
        return false;
      }
    },
    value: {
      type: [String, Array, File, Blob],
      default() {
        return [];
      }
    }
  },
  data: function() {
    return {
      photo: [],
      loading: false,
      upLoadImgUrl: this.UploadImage1Url
    };
  },
  watch: {
    photo() {
      if (this.photo.length > 0) {
        if (this.limit == 1) {
          this.$emit("input", this.photo[0]);
        } else {
          this.$emit("input", this.photo);
        }
      }
    },
    UploadImage1Url(val) {
      this.upLoadImgUrl = val;
    },
    value: {
      immediate: true,
      handler: function() {
        if (typeof this.value == "string") {
          if (this.value == "") {
            this.photo = [];
          } else {
            this.photo = [this.value];
          }
        } else if (this.value instanceof Array) {
          this.photo = this.value;
        } else {
          try {
            let fileReader = new FileReader();
            fileReader.readAsDataURL(this.value);
            fileReader.onload = e => {
              this.photo = [e.target.result];
            };
          } catch (e) {
            console.log(e.message);
          }
        }
      }
    }
  },

  methods: {
    deleteImg(index) {
      this.photo.splice(index, 1);
      if (this.limit == 1) {
        this.$emit("input", "");
      } else {
        this.$emit("input", this.photo);
      }
      this.$emit("update:value", null);
    },
    compress(img) {
      var url = null;
      var canvas = document.createElement("canvas");
      var scale = img.height / img.width;
      canvas.width = 720;
      canvas.height = 720 * scale;

      var ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      url = canvas.toDataURL("image/jpeg");
      return url;
    },
    dataURItoBlob(dataURI) {
      let byteString = window.atob(dataURI.split(",")[1]);
      let mimeString = dataURI
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      let ab = new ArrayBuffer(byteString.length);
      let ia = new Uint8Array(ab);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new window.Blob([ab], { type: mimeString });
    },
    add_img(event) {
      let file = event.target.files[0];
      // /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/
      if (/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(event.target.value)) {
        let MAXSIZE = 10 * 1024 * 1024;
        let size = file.size;
        if (size > MAXSIZE) {
          event.target.value = "";
          this.$notify.error({
            title: "上传图片错误",
            message: "上传图片不能超过10M"
          });
          return;
        }
        this.loading = true;
        let reader = new FileReader();
        let self = this;
        reader.readAsDataURL(file);
        let img = new Image();
        reader.onload = function(e) {
          img.src = this.result;
          img.onload = function() {
            let base = e.target.result;
            let fileItem = file;
            if (self.isCompress) {
              base = self.compress(img);
              fileItem = self.dataURItoBlob(base);
            }

            let formdata = new window.FormData();
            formdata.append("file", fileItem);
            formdata.append("app_type", "pc");
            formdata.append("app_type_name", "PC");
            // formdata.append("path", "storeRegister");

            // console.log(self.$store.state, "---");
            axios({
              method: "POST",
              url: Setting.apiBaseURL + self.upLoadImgUrl,
              data: formdata,
              timeout: 1000000,
              headers: {
                "Content-Type": "multipart/form-data"
              }
            })
              .then(res => {
                event.target.value = "";
                let data = JSON.parse(res.data);
                let url = Setting.uplodBaseURL + data.data.pic_path;
                self.photo.push(url);
                self.loading = false;
              })
              .catch(e => {
                event.target.value = "";
                self.loading = false;
                this.$message.error(e);
              });
          };
        };
      } else {
        event.target.value = "";
        this.$notify.error({
          title: "上传图片错误",
          message: "请上传gif|jpg|jpeg|png|GIF|JPG|PNG格式图片"
        });
      }
    }
  }
};
</script>
<style>
.finish_room {
  /*width: 140px;*/
  /*height: 165px;*/
}

img {
  height: 100%;
}

.finish_room2 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: wrap;
}

.finish_room2 > div {
  display: flex;
  flex-wrap: wrap;
}

.finish_room2 .margeImg {
  margin-left: 10px;
}

.finish_room2 .room_img {
  width: 152px;
  height: 152px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  margin-right: 10px;
  /* margin-left: 10px; */
  margin-bottom: 10px;
}

.finish_room2 .room_img:before {
  /*content: "";*/
  /*width: 0;*/
  /*height: 100%;*/
  /*!*background: #000;*!*/
  /*padding: 14px 18px;*/
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 50%;*/
  /*opacity: 0;*/
}

.finish_room2 .room_img:hover:before {
  width: 100%;
  left: 0;
  opacity: 0.5;
}

.finish_room2 .room_img .box-content {
  width: 100%;
  padding: 14px 18px;
  color: #fff;
  position: absolute;
  top: 38%;
  left: 0;
}

.finish_room2 .room_img .icon {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-top: -20px;
}

.finish_room2 .room_img .icon li {
  display: inline-block;
}

.finish_room2 .room_img .icon li i {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-right: 25px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.5s ease 0s;
}

@media only screen and (max-width: 990px) {
  .finish_room2 .room_img {
  }
}

.finish_room2 .deleteImg {
  color: red;
  position: absolute;
  top: 0px;
  left: 80px;
  cursor: pointer;
}

.finish_room2 .room_img img {
  cursor: pointer;
  width: 152px;
  height: 152px;
}

.finish_room2 > .room_img span {
  position: absolute;
  width: auto;
  height: auto;
  right: 5px;
  bottom: 3px;
}

.finish_room2 .im-button {
  position: absolute;
  top: -14px;
  right: -18px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.finish_room2 .room_img:hover .icon li i {
  opacity: 0.5;
}

.finish_room2 .room_img:hover img {
  opacity: 0.5;
}

.finish_room2 .room_img:hover .im-button {
  opacity: 1;
}

.finish_room2 .im-close {
  transform: rotate(-45deg);
  line-height: 0px;
  left: 6px;
  bottom: 13px;
  display: inline-block;
  width: 15px;
  height: 2px;
  background: #fff;
  position: absolute;
}

.finish_room2 .im-close1 {
  left: 5px;
  bottom: 13px;
  display: inline-block;
  width: 15px;
  height: 2px;
  background: #fff;
  position: absolute;
  transform: rotate(45deg);
}

.room_add_img {
  /* margin-top: 10px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 1px solid #e1e1e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; */
  position: relative;
  z-index: 10;
  cursor: pointer;
  margin-bottom: 10px;
}

/* .room_add_img > span:nth-child(1) {
  width: 30px;
  height: 30px;
  overflow: hidden;
}

.room_add_img > span:nth-child(2) {
  margin-bottom: 10px;
} */

.room_add_img input {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 0;
}
</style>
