<template>
  <div class="avatar-upload">
    <div class="img-container mr20">
      <el-image v-if="imgUrl" :src="imgUrl" class="img">
        <div slot="placeholder">
          加载中...
        </div>

        <div slot="error">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>

      <div v-else class="img-no"></div>
    </div>

    <div class="upload-container">
      <div v-text="title" class="title mb8"></div>
      <el-upload
        action="#"
        accept="image/jpeg,image/png"
        :show-file-list="false"
        :before-upload="handleBeforeAvatarUpload"
        :http-request="handleUploadImg"
      >
        <template slot="trigger">
          <el-button plain :loading="loading" class="mb8 mr8">
            选择文件...
          </el-button>
        </template>
        <span v-text="fileName"></span>
        <div slot="tip" class="tip-text">最大文件大小为 2MB。</div>
      </el-upload>
    </div>
  </div>
</template>

<script>
import ExtService from "@/api/ext";

export default {
  name: "AvatarUpload",
  props: {
    // 标题；
    title: {
      type: String,
      default: "标题；",
    },
    bizTyp: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false,

      // 上传文件名称；
      fileName: "",

      imgUrl: null,
      imgId: null,
    };
  },
  methods: {
    handleBeforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 jpg、jpeg 和 png 格式！");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB！");
      }
      return isJPG && isLt2M;
    },

    handleUploadImg(elArgs) {
      if (this.bizTyp) {
        const file = elArgs.file;
        this.fileName = file.name;
        this.imgId = "";
        this.imgUrl = "";
        this.changeEmit();

        const _this = this;
        _this.loading = true;
        ExtService.attachedFileUpload([file], "feature")
          .then((val) => {
            _this.imgId = val.data.fileId;
            _this.imgUrl = val.data.fileUrl;

            _this.changeEmit();
          })
          .catch((err) => {
            _this.fileName = "";
            _this.$message.error(err);
          })
          .finally(() => {
            _this.loading = false;
          });
      }
    },

    changeEmit() {
      this.$emit("change", {
        imgId: this.imgId,
        imgUrl: this.imgUrl,
      });
    },

    /**
     * 重置；
     */
    reset() {
      this.fileName = "";
      this.imgUrl = "";
      this.imgId = "";

      this.changeEmit();
    },

    /**
     * 设置头像信息；
     */
    setInfo(imgId, imgUrl) {
      this.imgId = imgId;
      this.imgUrl = imgUrl;
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-upload {
  display: flex;

  .mr20 {
    margin-right: 20px;
  }

  .mb8 {
    margin-bottom: 8px;
  }

  .mr8 {
    margin-right: 8px;
  }

  .img-container {
    .img {
      width: auto;
      height: 104px;
      border-radius: 6px;
      border: 1px solid #d9d9d9;
    }

    .img-no {
      width: 180px;
      height: 104px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
    }
  }

  .upload-container {
    .title {
      font-weight: 600;
    }

    .tip-text {
      color: #818181;
    }
  }
}
</style>
