import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsListProps } from 'types/list'

/**
 * 列表组件
 */
export default class CtsList extends CtsComponent<CtsListProps> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsListProps
  public static propTypes: InferProps<CtsListProps>

  public constructor(props: CtsListProps) {
    super(props)
    this.state = {}
  }

  public render(): JSX.Element {
    let { className, title, titleNote, note, noteClass, isBadge, image, icon, isArrow, noteButtonText, buttonText, onClick } = this.props
    // console.log(title)

    return (
      <View className={classNames('cts-list', className)}>
        <View className='cts-list-item' onClick={onClick}>
          {
            (image || icon) &&
            <View className='cts-list-item-left'>
              {
                image ? <Image className='cts-list-item-image' src={image} mode='widthFix'></Image>
                  : <Text className={icon + ' cts-list-item-icon'}></Text>
              }
            </View>
          }

          <View className='cts-list-item-content'>
            <View className='cts-list-item-title'>{title}</View>
            {titleNote && <View className='cts-list-item-title-note ellipsis'>{titleNote}</View>}
          </View>
          <View className='cts-list-item-right'>
            {
              // 身份信息已实名信息
              noteButtonText && <Text className='real-name'>{noteButtonText}</Text>
            }
            {/* 徽章且存在额外信息，则是“徽章样式”，否则是“普通额外信息样式” */}
            {
              note && <Text className={isBadge ? 'cts-list-item-badge' : 'cts-list-item-note ellipsis ' + noteClass}>{note}</Text>
            }

            {
              // 是否显示右边箭头
              isArrow && <Text className='iconfont iconicon_jiantou'></Text>
            }

            {
              // 是否显示按钮
              buttonText && <Text className='cts-list-item-btn'>{buttonText}</Text>
            }
          </View>
        </View>
      </View>
    )
  }
}

CtsList.defaultProps = {
  title: '',
  titleNote: '',
  note: '',
  noteClass: '',
  isBadge: false,
  image: '',
  icon: '',
  isArrow: true,
  buttonText: '',
  noteButtonText: '',
  onClick() { }
}

CtsList.propTypes = {
  title: PropTypes.string,
  titleNote: PropTypes.string,
  note: PropTypes.string,
  noteClass: PropTypes.string,
  isBadge: PropTypes.bool,
  image: PropTypes.string,
  icon: PropTypes.string,
  isArrow: PropTypes.bool,
  buttonText: PropTypes.string,
  noteButtonText: PropTypes.string,
  onClick: PropTypes.func,
}