import React, { Component }  from 'react'
import {Image} from '@tarojs/components'
import {Props,State} from 'types/Img'
import {styleToObj} from "../../utils/dom";
import config from '../../utils/config'
import taro from "@tarojs/taro"

export default class Img extends Component<Props, State> {

  state = {
    show: false,
    size: {
      w: 0,
      h: 0
    },
    attr: {
      className: '',
      src: '',
      style: ''
    }
  }

  componentWillMount(): void {
    const {data} = this.props
    if (!data) {
      return
    }
    const style = styleToObj(data.attr && data.attr.style ? data.attr.style : '')
    const size = {
      w: 0,
      h: 0
    }
    if (style.width) {
      size.w = parseInt(style.width)
      size.h = parseInt(style.height)
      this.setState({
        size: size,
        show: true
      })
    }
    // 设置公式图片
    this.setState({
      attr: {
        src: data.attr.src,
        className: data.attr.class
      }
    });
  }

  options = {
    addGlobalClass: true
  }

  imgClick = (src) => {
    if(this.props.onImgClick){
      this.props.onImgClick(src)
    }
  }

  render() {
    const {attr, size} = this.state
    const {data} = this.props
    let style
    if (data) {
      style = styleToObj(data.attr && data.attr.style ? data.attr.style : '')
      if (size.w > 0 && size.h > 0) {
        style.width = size.w + 'px'
        style.height = size.h + 'px'
      }
      style.fontSize = 'inherit'
      if (!this.state.show) {
        style.width = 0 + 'px'
        style.height = 0 + 'px'
      }
    }
    return (
      data && <Image
        className={config.classPrefix+attr.className}
        onClick={() => {
          this.imgClick(attr.src)
        }}
        lazyLoad={taro.getEnv() != 'WEB'}
        src={attr.src}
        style={style}
        onLoad={(event) => {
          if(this.state.size.w > 0) {
            return;
          }
          this.setState({
            show: true,
            size: {
              w: event.detail.width as number,
              h: event.detail.height as number,
            }
          })
        }}
        mode="widthFix"
      />
    )
  }
}