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

type PageOwnProps = {
  className?: string
  identification?: any // 元素id
  avatar: string // 图片
  title: string // 文字
  size: string // 图片尺寸
  margin: string // 间距
  circular?: boolean // 圆
  direction?: 'horizontal' | 'vertical'
  onClick?: any
}


type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }
  render() {
    const { avatar, className, title, size, direction, margin, circular } = this.props
    return (
      <View className={'sd-avatar-title ' + ((direction === 'vertical') ? 'sd-avatar-title-vertical ' : '') + (className || '')} >
        <Image
          style={`width:${size}rpx;height:${size}rpx; margin-${direction === 'vertical' ? 'bottom' : 'right'}:${margin}rpx;${circular ? 'border-radius:50%' : ''}`}
          src={avatar || ''} />
        <Text className='sd-ell sd-avatar-title-txt'>{title || ''}</Text>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>