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

type PageOwnProps = {
  className?: string
  text: string,
  images: string[],
  title?: string,
  editable?: boolean
  onEdit?: any,
  onDelete?: any,
  itemId?: any,
  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)
    }
  }

  handleOnEdit = () => {
    this.props.onEdit(this.props.itemId)
  }
  handleOnDelete = () => {
    this.props.onDelete(this.props.itemId)
  }

  render() {
    const { text, images, title, editable } = this.props
    const imageClassName = (images && images.length > 1) ? 'sd-graphic2-image-small' : 'sd-graphic2-image-big'
    return (
      <View className={'sd-graphic2 ' + (this.props.className || '')}>
        {
          title && <View className='sd-graphic2-title'>{this.props.title}</View>
        }
        {
          text.length > 0 &&
          <View className='sd-graphic2-text' >{text}</View>
        }
        {
          images.length > 0 &&
          <View className='sd-graphic2-images'>
            {
              images.map((item, index) => {
                return <View className={imageClassName}
                  key={index}>
                  <View className='sd-graphic2-image-item'>
                    <Image className='sd-graphic2-image'
                      onClick={this.viewImage.bind(this, item)} mode='aspectFill'
                      src={item} />
                  </View>
                </View>
              })
            }
          </View>
        }
        {
          editable &&
          <View className='sd-graphic2-editable'>
            <Text className='sd-graphic2-edit' onClick={this.handleOnEdit}>编辑</Text>
            <Text className='sd-graphic2-edit' onClick={this.handleOnDelete}>删除</Text>
          </View>
        }
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>