<template>
    <div class="pr uploader-wrap">
        <p class="loading-percent" v-if="percent != 100">
          <span :style="{width: percent + '%'}"></span>
        </p>
        <el-upload
            class="img-uploader"
            :class="{active: img}"
            :action="uploadUrl"
            ref="upload"
            :show-file-list="false"
            :data="uploadData"
            name="files"
            :on-progress="handleProgress"
            :on-exceed="handleExceed"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="img" :src="img">
            <div v-if="img" class="isUpload">
                <i class="info icon icon-shangchuantishi"></i>
                <p class="reload">重新上传</p>
            </div>
            <div v-if="!img" class="noUpload">
                <i class="info icon icon-shangchuantishi"></i>
                <p>{{info}}</p>
            </div>
        </el-upload>
        <i v-if="img" class="pa icon icon-guanbi close" @click="close"></i>
    </div>
</template>

<script>
export default {
  name: "launchUpload",
  props: ["img", "info", "contentType"],
  data() {
    return {
      uploadData: {
        project: "hooli",
        contentType: this.contentType
      },
      percent: 0,
      uploadUrl: this.$apis.api_upload_files
    };
  },
  created() {
    let { uploadData } = this;
    Object.assign(uploadData, this.$net.commonParams());
    uploadData.signToken = this.$net.paramsSign(uploadData, this.uploadUrl);
    this.uploadData = uploadData;
  },
  methods: {
    // 上传之前验证图片
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt4M = file.size / 1024 / 1024 < 4;
      if (!isJPG) {
        this.$Toast("上传图片只能是 JPG、PNG 格式!");
      }
      if (!isLt4M) {
        this.$Toast("上传图片大小不能超过 4MB!");
      }
      this.$emit("fileName", file.name);
      return isJPG && isLt4M;
    },
    // 上传时
    handleProgress(event) {
      this.percent = event.percent;
    },
    // 图片上传成功
    handleAvatarSuccess(res) {
      this.$emit("value", res.data.host + res.data.url[0], res.data.url[0]);
    },
    // 超出图片上传个数
    handleExceed() {
      this.$Toast("每次仅能上传1张图片");
    },
    // 删除
    close() {
      this.$emit("img", "", "");
      // this.img = "";
    }
  }
};
</script>

<style lang="less">
.uploader-wrap {
  height: 100%;
  .loading-percent {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    span {
      display: flex;
      height: 2px;
      background: #ff523d;
    }
  }
  .close {
    top: 15px;
    right: 15px;
    color: #fff;
    z-index: 2;
  }
  .img-uploader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .el-upload {
      width: 60%;
      height: 60%;
      position: relative;
      img {
        max-width: 100%;
        height: 100%;
      }
      .isUpload,
      .noUpload {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
      }
      .info {
        font-size: 30px;
        color: #999;
        margin-bottom: 20px;
      }
      .reload {
        color: #fff;
        z-index: 3;
      }
      .isUpload {
        position: absolute;
        top: 0;
        left: 0;
        .info {
          color: #fff;
          z-index: 3;
        }
      }
      p {
        font-size: 18px;
        font-weight: 400;
        color: #999;
      }
    }
  }
  .img-uploader.active:after {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
