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

type PageOwnProps = {
  className?: string
  title: string
  require?: boolean
  extraIcon?: { value: string, color: string, size: number }
  onIconClick?: any
}


type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {
  static options = {
    addGlobalClass: true
  }

  handleClick = () => {
    this.props.onIconClick()
  }
  render() {
    const { title, require, extraIcon = { value: '', size: 0, color: '' } } = this.props

    return (
      <View className={'sd-form-title ' + (this.props.className || '')} >
        <View>{
          require && <Text className='sd-form-title-require'>*</Text>
        }
          <Text>{title}</Text>
        </View>
        {
          extraIcon.value &&
          <AtIcon
            onClick={this.handleClick}
            value={extraIcon.value}
            size={extraIcon.size}
            color={extraIcon.color} />
        }
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>