<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <van-image
    :src="src"
    :fit="getFit"
    :alt="alt"
    :round="round"
    :width="widthValue"
    :height="heightValue"
    :radius="radius"
    :lazy-load="lazyLoad"
    :show-loading="showLoading"
    @click="onClick"
    @error="onError"
    @load="onLoad"
    :style="style"
  >
    <!-- 自定义加载中的提示内容 -->
    <slot name="loading" slot="loading" />
    <!-- 自定义加载失败时的提示内容 -->
    <slot name="error" slot="error" />
  </van-image>
</template>

<script>
import { Image } from 'vant';

export default {
  name: 'image',
  components: {
    VanImage: Image
  },
  props: {
    /**
     * 	图片链接
     */
    src: String,
    /**
     * 图片填充模式
     * widthFix:【扩展】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变（对应小程序widthFix）
     * heightFix:【扩展】缩放模式，高度不变，宽自动变化，保持原图宽高比不变 （高度以传入的高度为准）
     * contain:保持宽高缩放图片，使图片的长边能完全显示出来 （对应小程序aspectFit）
     * cover:保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 (对应小程序aspectFill)
     * fill:拉伸图片，使图片填满元素 (对应小程序scaleToFill)
     * none:  保持图片原有尺寸
     * scale-down:取none或contain中较小的一个  (未实现)
     */
    fit: {
      type: String,
      default: 'fill'
    },
    /**
     * 替代文本
     */
    alt: String,
    /**
     * 是否显示为圆形
     */
    round: Boolean,
    /**
     * 宽度，默认单位为px
     */
    width: [Number, String],
    /**
     * 高度，默认单位为px
     */
    height: [Number, String],
    radius: [Number, String],
    /**
     * 是否开启图片懒加载，须配合 Lazyload 组件使用
     */
    lazyLoad: Boolean,
    /**
     * 是否展示图片加载失败提示
     */
    showError: {
      type: Boolean,
      default: true
    },
    /**
     *
     */
    showLoading: {
      type: Boolean,
      default: true
    },
    /**
     * 背景颜色
     */
    backgroundColor: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 高度
      heightValue: this.height,
      // 宽度
      widthValue: this.width
    };
  },
  computed: {
    /**
     * 顶层样式
     */
    style () {
      const style = {};
      // 去掉图片的一个象互点
      // style.display = 'flex'

      if (this.backgroundColor) {
        style.backgroundColor = this.backgroundColor;
      }
      return style;
    },
    getImageClass () {
      let imageClass = ' yp-image';
      if (this.data.round) {
        imageClass += ' yp-image--round ';
      }
      return imageClass;
    },
    /**
     * 获得图片的填充方式 （对应微信小程序的转化）
     */
    getFit() {
    /**
     * 图片填充模式
     * widthFix:【扩展】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变（对应小程序widthFix）
     * heightFix:【扩展】缩放模式，高度不变，宽自动变化，保持原图宽高比不变 （高度以传入的高度为准）
     * contain:保持宽高缩放图片，使图片的长边能完全显示出来 （对应小程序aspectFit）
     * cover:保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 (对应小程序aspectFill)
     * fill:拉伸图片，使图片填满元素 (对应小程序scaleToFill)
     * none:  保持图片原有尺寸
     * scale-down:取none或contain中较小的一个  (未实现)
     */
      if (this.fit === 'widthFix' || this.fit === 'heightFix') {
        return 'fill';
      }
      return this.fit;
    },

  },
  watch: {

    height: {
      immediate: true,
      handler(height) {
        this.heightValue = height;
      }
    },
    width: {
      immediate: true,
      handler(width) {
        this.widthValue = width;
      }
    }
  },
  methods: {
    /**
     * 点击图片时触发
     */
    onClick(event) {
      this.$emit('click', event);
    },
    /**
     * 图片加载失败时触发
     */
    onError(event) {
      this.$emit('error', event);
    },
    /**
     * 图片加载完毕时触发
     */
    onLoad(event) {
      this.$emit('load', event);
      //   heightFix:缩放模式，高度不变，宽自动变化，保持原图宽高比不变 （高度以传入的高度为准）
      if (this.fit === 'heightFix') {
        // 原始图片宽
        var imgwidth = event.target.naturalWidth;
        // 原始图片高
        var imgheight = event.target.naturalHeight;
        // 宽高比
        var newImgWidth = imgwidth * this.height / imgheight;

        this.widthValue = newImgWidth;
      } else if (this.fit === 'widthFix') {
        // widthFix:缩放模式，宽度不变，高度自动变化，保持原图宽高比不变（对应小程序widthFix）
        // 原始图片宽
        var imgwidth = event.target.naturalWidth;
        // 原始图片宽
        var imgheight = event.target.naturalHeight;
        var newImgWidth = this.width;

        if (newImgWidth <= 0 || newImgWidth === '') {
          newImgWidth = event.target.clientWidth; // 屏幕度宽度
        }

        // 宽高比
        const newImgHeight = imgheight * newImgWidth / imgwidth;

        this.heightValue = newImgHeight;
        this.widthValue = newImgWidth;
      } else {
        this.heightValue = this.height;
        this.widthValue = this.width;
      }
    },
  }
};
</script>
