<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-20 13:44:22
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-01-02 14:47:08
 -->
<!--
  单个上传组件
   <post-upload
   :uploadLimit="uploadLimit"
   :limitFlag="limitFlag"
   :width="width"
   :height="height"
    v-model="imgsrc">
  </post-upload>
   import postUpload from '@/components/post-upload.vue';
 -->
<template>
  <div class="single-upload-wrap">
    <el-upload
      class="avatar-uploader"
      :disabled="disabled"
      :action="uploadUrl()"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img
        v-if="value"
        :src="value"
        class="avatar"
        @mouseover="showImage(value)"
      />
      <i
        v-else
        class="el-icon-plus avatar-uploader-icon"
      ></i>
    </el-upload>
    <p class="upload-tip w-500">
      图片规格630*800px，大小不超过{{uploadLimit}}M，仅限JPG格式。
    </p>
    <p class="upload-tip">为了确保二维码位置的准确，建议<a
        class="color-2F54EB"
        href="https://report-1251519181.cos.ap-shanghai.myqcloud.com/haoban/20200102144544/模板.psd"
        download="post.psd"
      > 下载模板</a> 基于模板进行海报设计。</p>
    <p class="upload-tip">如果设计师还没有设计好图片，可以先跳过该步骤，先保存活动配置。</p>
    <!-- 图片预览 -->
    <vue-gic-img-preview
      :imgUrl="imgUrl"
      :imgShowFlag="imgShowFlag"
      @hideImage="hideImage"
    ></vue-gic-img-preview>
  </div>
</template>
<script>
import vueGicImgPreview from '@/components/vue-gic-img-preview.vue';
import errMsg from '@/common/js/error';
export default {
  name: 'single-upload',
  components: {
    vueGicImgPreview
  },
  props: {
    value: {
      // 传入 input value
      type: String,
      default: ''
    },
    uploadLimit: {
      type: Number,
      default: 2
    },
    limitFlag: {
      type: [Number, String],
      default: 2 // 1: 根据大于宽高，2：根据固定宽高
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      projectName: '', // 当前项目名
      imgShowFlag: false, // 是否弹框显示,true: 显示；false: 不显示
      imgUrl: '' // 传递的图片 src
    };
  },
  beforeMount() {
    const that = this;
    let host = window.location.origin;
    if (host.indexOf('localhost') != -1) {
      that.baseUrl = 'http://gicdev.demogic.com';
    } else {
      that.baseUrl = host;
    }

    // that.upUrl = that.baseUrl + '/api-plug/upload-img?wxFlag=1'
  },
  methods: {
    /**
     * 上传图片
     */
    uploadUrl() {
      const that = this;
      let host = window.location.origin;
      let baseUrl;
      if (host.indexOf('localhost') != '-1') {
        baseUrl = 'http://gicdev.demogic.com';
      } else {
        baseUrl = host;
      }
      that.upUrl = `${baseUrl}/sharing-core-web/upload?requestProject=share-config&wxFlag=1`;
      return that.upUrl;
    },

    /**
     * 上传图片
     */
    handleAvatarSuccess(res, file, type) {
      const that = this;
      if (res.errorCode == 1) {
        that.$emit('input', res.result.url);
      } else {
        errMsg.errorMsg(res);
      }
    },
    beforeAvatarUpload(file) {
      const that = this;
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg';
      const isLt2M = file.size / 1024 / 1024 < that.uploadLimit;
      if (!isJPG) {
        that.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        that.$message.error(`上传图片大小不能超过 ${that.uploadLimit}MB!`);
      }
      return (
        isJPG &&
        isLt2M &&
        new Promise(function(resolve, reject) {
          let reader = new FileReader();
          reader.onload = function(event) {
            let image = new Image();
            image.onload = function() {
              /* eslint-disable */
              let width = this.width;
              let height = this.height;
              if (that.limitFlag == 2 && (width !== that.width || height !== that.height)) {
                that.$message.error(`图片尺寸必须为${that.width}*${that.height}px!`);
                reject();
              }
              if (that.limitFlag == 1 && (width < that.width || height < that.height)) {
                that.$message.error(`图片尺寸必须≥${that.width}*${that.height}px!`);
                reject();
              }
              resolve();
            };
            image.src = event.target.result;
            // that.$emit('update:value',event.target.result)
          };
          reader.readAsDataURL(file);
        })
      );
    },

    /**
     * 上传图片预览
     */
    showImage(src) {
      const that = this;
      if (!src || src == '') {
        return false;
      }
      that.imgShowFlag = true;
      that.imgUrl = src;
    },
    hideImage(val) {
      const that = this;
      that.imgShowFlag = val;
    }
  }
  // mounted() {}
};
</script>
<style lang="less" scoped>
.w-500 {
  width: 500px;
}
.avatar-uploader {
  /deep/ .el-upload {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}

/* flex */
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-column {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.flex-row {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: rgba(245, 247, 250, 1);
}
.avatar {
  max-width: 80px;
  max-height: 80px;
  display: block;
}

.upload-tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
  line-height: 20px;
}

.color-2F54EB {
  color: #2F54EB;
}
</style>
