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

import nextIcon from './goto.png';
import './ListItem.scss'

/**
 * props属性
 */
interface IProps {
  /**
   * name
   */
  name: string;
  value?: string;
  goto?: boolean;
  gotoDesc?: string;
  size?: string;
  bordered?: boolean;
  handleClick?: () => void
}

/**
 * 组件内部属性
 */
interface IState {

}

export default class ListItem extends Component<IProps, IState> {

  render() {
    let {
      name,
      value,
      goto,
      gotoDesc,
      size,
      bordered,
      handleClick
    } = this.props
    return (
      <View>
        <View
          className={`com-list-item ${[size]}`}
          onClick={handleClick}
          style={{ borderBottom: bordered ? '1px solid #ebebeb' : 0 }}
        >
          <View className={'item-left'}>
            {/* 条目名称 */}
            <View className={"item-left-name"}>
              {name}
            </View>
            {/* 条目值 */}
            {
              value ?
                <View className='item-left-value'>
                  {value}
                </View>
                : null
            }
          </View>
          {
            goto ?
              <View className={"item-right"}>
                {/* next按钮说明文字 */}
                {
                  gotoDesc ?
                    <View className={'next-text'}>{gotoDesc}</View>
                    : null
                }
                <Image src={nextIcon}
                  className={'next-icon'}
                />
              </View>
              : null
          }
        </View>
      </View>
    )
  }
}