import React from 'react';
import {inject, observer} from 'mobx-react';
import {WeaZmage} from 'ecCom';
import {toJS} from 'mobx';

@inject('weesoStore')
@observer
export default class ImagesContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      img: this.props.values && this.props.values.imgUrl
    }
  }
  
  render() {
    let {values, weesoStore, index} = this.props;
    let {imageResult, addSubdomainUrl} = weesoStore;
    imageResult = toJS(imageResult);
    values = toJS(values);
    let
      imgWidth = Number(values.width),
      imgHeight = Number(values.height);
    
    let imgSet = [];
    imageResult && imageResult.length != 0 && imageResult.map(item => {
      imgSet.push({
        src: item.imgUrl,
        onError: () => {
          this.setState({img: '/spa/esearch/images/default.png'})
        }
      })
    })
    return (
      <div className="content-images-image"
           style={{width: imgHeight== '' ? 240 : (imgHeight>160 ? (imgWidth*160)/imgHeight : imgWidth)}}>
          <WeaZmage ecId={`${this && this.props && this.props.ecId || ''}_WeaZmage@8qjcf5`} src={addSubdomainUrl(this.state.img)}
                    imageSet={imgSet}
                    onError={() => {
                      this.setState({img: '/spa/esearch/images/default.png'})
                    }}
                    page={index}
          />
        <p className="image-title-bg"></p>
        <p title={values && values.title} className="image-title-content" dangerouslySetInnerHTML={{__html: `<span>${values && values.title}</span>`}} ></p>
      </div>
    )
  }
}