/***
 * H5图片自适应渲染组件利用 img onload事件,未经使用 需要验证
 * 钟是志
 * 2020年4月15日 15:11:20
 *
 * */

import React from 'react';
import PropTypes from 'prop-types';
import demoImage from './2331.png';

export default class ImageLoader extends React.Component {
  componentDidMount() {
    const {width, height} = this.props;
    this.image.onload = () => {
      const { clientWidth, clientHeight } = this.image;
      let isWidthBig = clientWidth >= clientHeight;
      if(isWidthBig){ // 图片宽更大的时候
        this.image.style.width = width;
        this.image.style.height = 'auto';
      }else{  // 图片高更大的时候
        this.image.style.width = 'auto';
        this.image.style.height = height;
      }
      this.image.style.visibility = 'visible';
    };
    this.image.onerror = () => {
      this.image.style.visibility = 'visible';
    }
  }

  render() {
    const { width, height, url, divStyle, onClick } = this.props;
    return (<div style={{
      width,
      height,
      lineHeight: height,
      ...divStyle,
    }}
    onClick={onClick}
    >
      <img src={url}
           alt={'预览图片'}
           style={{ visibility: 'hidden'}}
           ref={(image)=> this.image = image}
      />
    </div>);
  }
}

ImageLoader.propTypes = {
  width: PropTypes.string.isRequired, // 图片显示的宽
  height: PropTypes.string.isRequired,  // 图片显示的高
  url: PropTypes.string.isRequired, // 图片src地址
  divStyle: PropTypes.object, // 外部div的样式
};
ImageLoader.defaultProps = {
  height: '50px',
  width: '100%',
  url: demoImage,
  divStyle: {
    textAlign: 'center',
    margin: '0 auto',
  }
};


