<template>
  <div class="pic-wrap" :class="imgStyleComputed">
    <img
      :src="thumbnialSrc"
      :style="imgStyleComputed"
      :class="`img-style ${imgClassComputed}`"
      :alt="thumbnialSrc"
      v-if="!isLoading && !isError"
    />
    <!-- 加载loading -->
    <img :src="loading_pic" alt="" class="spe-pic loading-pic" v-if="isLoading && needLoading" />
    <!-- 加载失败 -->
    <img :src="loading_fail_pic" alt="" class="spe-pic" v-if="isError" />
  </div>
</template>

<script>
/*
 * @Author: Liao.xiuli
 * @Date: 2021-09-18 11:18:59
 * @Last Modified by: Liao.xiuli
 * @Last Modified time: 2022-07-22 15:00:41
 */
import { judgeFileType } from "@packages/utils";
import { loading_pic,loading_fail_pic } from "@packages/utils/cdn"

export default {
  name: "WlPic",
  props: {
    src: {
      type: String,
      default: "",
    },
    needCos: {
      type: Boolean,
      default: false,
    },
    cosSuffix: {
      type: String,
      default: "imageView2/1/w/100/h/100/q/85",
    },
    round: {
      type: Boolean,
      default: false,
    },
    picClass: {
      type: String,
      default: "",
    },
    needLoading: {
      type: Boolean,
      default: false,
    },
    fit: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isLoading: true,
      isError: false,
      loading_fail_pic,
      loading_pic,
    };
  },
  computed: {
    thumbnialSrc() {
      const fileType = judgeFileType(this.src);
      //如果是本地图片，即base64的图片，就不用添加图片后缀
      return fileType !== "image" || !this.needCos ? this.src : this.turnThumbnial(this.src);
    },
    imgStyleComputed() {
      return {
        borderRadius: this.round ? "50%" : "",
        "object-fit": this.fit,
      };
    },
    imgClassComputed() {
      return this.picClass ? this.picClass : "img-default-style";
    },
  },
  methods: {
    turnThumbnial(url) {
      if (!url) return url;
      const file_type = url.split(".").pop();
      if (file_type === "svg") return url;
      const cosSuffix = this.cosSuffix ? `?${this.cosSuffix}` : "";
      return `${url}${cosSuffix}`;
    },
  },
  watch: {
    src: {
      handler(val) {
        const newImg = new Image();
        newImg.src = val;
        newImg.onerror = () => {
          console.log(123);
          this.isLoading = false;
          // this.isError = true;
        };
        newImg.onload = () => {
          this.isLoading = false;
          this.isError = false;
        };
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes onRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pic-wrap {
  width: 100%;
  height: 100%;
  @extend %flex-middle-center;
  .img-style {
    display: block;
  }
  .img-default-style {
    width: 100%;
    height: 100%;
  }
  .spe-pic {
    width: 30%;
    min-width: j(20);
    min-height: j(20);
    max-width: j(80);
    max-height: j(80);
    &.loading-pic {
      animation: onRotate 5s infinite;
    }
  }
}
</style>
