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

type PageOwnProps = {
  className?: string
  avatars: string[],
  desc?: string,
  onClick?: any,
  maxNumber?: number,
  iconColor?: string
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  handleClick = () => {
    this.props.onClick()
  }

  render() {
    const { desc } = this.props
    const avatars = this.props.avatars || []
    const length = this.props.maxNumber || 7
    const iconColor = this.props.iconColor || 'rgba(0, 0, 0, 0.65)'
    if (avatars.length > length) {
      avatars.length = length - 1
      avatars.push('http://ft-image.oss-cn-beijing.aliyuncs.com/103.png')
    }
    const images = [...avatars]
    return (
      <SdFormid onClick={this.handleClick} >
        <View className={'sd-avatars ' + (this.props.className || '')}>
          {
            images.map(item => {
              return <Image className='sd-avatars-img' src={item} key={item} />
            })
          }
          <View className='sd-avatars-contnet' >
            {desc}
          </View>
          <AtIcon value='chevron-right' size='24' color={iconColor} />
        </View>
      </SdFormid>

    )
  }
}

export default Index as ComponentClass<PageOwnProps>