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

type PageOwnProps = {
  children?: any // 替换note
  className?: string

  otherStyle?: 'white' | 'dark'

  shopLogo: string
  shopName: string
  extraText: string
  data: {
    number: number
    note: string
    bright?: boolean
  }[]
  userName: string
  userAvatar: string
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  render() {
    const {
      shopLogo,
      shopName,
      extraText,
      data,
      userName,
      userAvatar,
      otherStyle
    } = this.props

    const className = `sd-friend-card  ${this.props.className || ''}  ${otherStyle ? `sd-friend-card-${otherStyle}` : ''}`

    return (
      <View className={className}>
        {/* 店铺 */}
        <View className='sd-friend-card-shop sd-flex sd-align-center'>
          {/* logo */}
          <Image className='sd-friend-card-shop-logo' src={shopLogo} />
          <View >
            {/* 店铺名 */}
            <View className='sd-friend-card-shop-name sd-ell'>{shopName}</View>
            {/* 补充信息 */}
            <View className='sd-friend-card-shop-extra sd-ell'>{extraText}</View>
          </View>
        </View>
        {/* 数据 */}
        <View className='sd-friend-card-data sd-flex'>
          {
            data.map((e, index) => {
              return <View key={index}
                className={`sd-friend-card-data-item  ${e.bright ? 'sd-friend-card-data-item-bright' : ''}`}>
                <View className='sd-friend-card-data-num'> {e.number}</View>
                <View className='sd-friend-card-data-note'>{e.note}</View>
              </View>
            })
          }
        </View>
        {/* 老板 */}
        <View className='sd-friend-card-footer sd-flex sd-align-center'>
          <Image className='sd-friend-card-user-avatar' src={userAvatar} />
          <Text className='sd-friend-card-user-name'>{userName}</Text>
        </View>
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>