import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './index.scss'
import { ComponentClass } from 'react'
import SdFormid from '../sdFormid';

interface DataInterface {
  type: number,
  value: string
}
type PageOwnProps = {
  className?: string
  content: DataInterface[],
  title: string,
  onClickImage?: (event: any) => any,
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}
class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  viewImage = (e) => {
    if (this.props.onClickImage) {
      this.props.onClickImage(e)
    }
  }

  render() {
    const { content = [], title } = this.props
    return (
      <View className={'sd-space-graphic ' + (this.props.className || '')}>
        {
          title && <View className='sd-space-graphic-title'>{this.props.title}</View>
        }

        <View className='sd-space-graphic-content'>
          {
            content.map((item, index) => {
              return <View key={index}>
                {
                  item.type === 1 &&
                  <SdFormid onClick={this.viewImage.bind(this, item.value)}>
                    <Image
                      className='sd-space-graphic-image' mode='widthFix'
                      src={item.value} />
                  </SdFormid>
                }
                {
                  item.type === 2 &&
                  <View className={'sd-space-graphic-text ' + (index === 0 ? 'sd-space-graphic-text-top' : '')} >{item.value}</View>
                }
              </View>
            })
          }
        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>