
import { Input, Text, Textarea, View } from '@tarojs/components'
import { memo } from 'react'
import './index.scss'

interface ListParams{
  label: string // 左边label
  onInput?: (ev: Object) => void // 输入框输入
  onClick?: () => any // 点击列表
  placeholder?: string // 提示文本
  children?: any // 插槽
  type?: string // 类型：1.input,2.textarea,3.select,
  primordialType?: 'text'|'number'|'idcard'|'digit'
  value?: any
  style?: object // 整行样式
  labelStyle?: object // label样式
  contentStyle?: object
  required?: boolean
}

// 表单列表
const FromList = (props: ListParams) => {
  const { type = 'input', value = '', style = {}, labelStyle = {}, contentStyle = {}, required = false } = props

  return (
    <View style={style} className="form-list">
      <View style={labelStyle} className={`form-list-label ${required && 'form-list-label-required'}`}>{props.label}</View>
      <View onClick={props?.onClick} className="form-list-right">
        {
          props.children
          ?? <View style={contentStyle} onClick={props?.onClick} className="form-list-right-meet">
            {
              type == 'input'
                ? <View className="form-list-input">
                  <Input value={value} placeholder-class="phcolor" type={props.primordialType || 'text'} onInput={props?.onInput} placeholder={props.placeholder} />
                  {value
                  && <View><Text onClick={() => props.onInput && props.onInput({ detail: { value: '' } })} className="iconfont icon-qingkong" /></View>
                  }
                </View>
                : type == 'textarea'
                  ? <Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />
                  : <>
                    {
                      props.value
                        ? <View>{value}</View>
                        : <View className="form-list-right-placeholder">
                          {props.placeholder}
                        </View>
                    }
                    <View className="form-list-right-enter"><Text className="iconfont icon-a-moreback"></Text></View>
                  </>
            }
          </View>
        }
      </View>
    </View>
  )
}
export default memo(FromList)
