
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
  value?: any
  style?: object // 整行样式
  labelStyle?: object // label样式
  contentStyle?: object
  required?: boolean
  showIcon?: boolean // 是否显示右边的箭头，type=select
}
const FromListCertification = (props: ListParams) => {
  const { type = 'input', value = '', style = {}, labelStyle = {}, contentStyle = {}, required = false, showIcon = true } = props

  return (
    <View style={style} className="From-list-certification">
      <View style={labelStyle} className={`From-list-certification-label ${required && 'From-list-certification-label-required'}`}>{props.label}</View>
      <View onClick={props?.onClick} className="From-list-certification-right">
        {
          props.children
          ?? <View style={contentStyle} onClick={props?.onClick} className="From-list-certification-right-meet">
            {
              type == 'input'
                ? <View className="From-list-certification-input">
                  <Input value={value} placeholder-class="phcolor" 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="From-list-certification-right-placeholder">
                          {props.placeholder}
                        </View>
                    }
                    <View className="From-list-certification-right-enter">
                      {showIcon && <Text className="iconfont icon-a-moreback"></Text>}
                    </View>
                  </>
            }
          </View>
        }
      </View>
    </View>
  )
}
// 表单列表
const FromList = memo(FromListCertification)

export default FromList
