import React, { Fragment, useEffect } from 'react';
import clsx from 'clsx'
import SearchInput from '@/components/searchInput'
import { Row, Col, Tooltip } from 'antd'
import styles from './style.module.less'

/**
 *  name: '成员', // 名称
    colSpan: 24, // 一行占用多宽
    key: 'members', // 枚举
    type: 'radio',
    inputTip: '', // 输入时候的提示信息
    disabled: true, // 是否禁用
    required: true, // 是否必填
    nameKey: '' // 编辑现实的文案
    childrenRouteInput: '' // input显示的值  原路径是key，编辑变成{key : ''}
    childrenRoute: '' // label显示的值   原路径是key下面的字符串 编辑时候变成obj 层级下，默认title  eg： in: '' ,in:{'title':''}
    textInput: true, // 是否查看状态下 true是展示文本可编辑
    textInputName: 'xx' // 编辑状态下name名称
    multiple: true/false // 是否可以多选
    tipShow: true/false // 是否现实提示信息
    tipRender: 渲染的模板
    layout: vertical/ horizontal 布局是上下还是左右 默认左右
    textInputRender: (d) =>  (<div><span>123123</span></div>), // 特殊渲染
    options: isOpenExternalNetworkEnum //select情况下的option渲染
    optionRender: optionRender: (d) =>  (<div><span>{d.title}{d.name}123</span></div>) // 特殊渲染option
*/

export default function FromChooseItem(props) {
  const {
    viewInEdit = false, // 编辑状态
    viewInEditChange,  // 修改编辑状态 有该方法就默认为查看编辑状态
    renderFormList, // 渲染form表单list
    labelWidth = null,  // label的宽度
    valueData = {}, // 数据
    horizontalSpacing = 16,
    verticalSpacing = 20,
    vsToFormLineTop = false,
    rowProps = {
      gutter: [horizontalSpacing, verticalSpacing],
    },
    colProps,
    onChange,
    children
  } = props
  return (
    <div className={clsx(styles.fromChooseItem, 'mainForm')} style={{ paddingTop: vsToFormLineTop ? verticalSpacing : '' }}>
      <Row {...rowProps}>
        {
          renderFormList.map(t => (
            <Fragment key={t.name}>
              <Col {...colProps} span={t.colSpan} className={clsx(styles.colBox, t.layout === 'vertical' && styles.vertical)}>
                <span
                  className={clsx(styles.name, 'mainFormName')}
                  style={{ width: labelWidth || '88px' }}
                >
                  {
                    t.required && !viewInEditChange ?
                    <span className={clsx(styles.required, styles.width8)}>*</span>
                    :
                    <span className={styles.width8}></span>
                  }
                  {viewInEditChange ? `${t.textInputName || t.name}` : t.name}
                  {t.inputTip && <Tooltip title={t.inputTip}>
                    <i className='iconfont icon' style={{ color: 'var(--font-3)' }}>&#xce675;</i>
                  </Tooltip>}
                  {(viewInEditChange || t.onlyText) ? '：' : ''}
                </span>
                <div className={styles.input}>
                  <SearchInput
                    renderFormData={t}
                    valueData={valueData}
                    viewInEdit={viewInEdit}
                    viewInEditChange={viewInEditChange}
                    onChange={(key, e) => onChange(key, e)}
                  />
                </div>
              </Col>
              {t.tipShow &&
                <div style={{display: 'inline-block', width: '100%', textAlign: 'left', paddingLeft: labelWidth, marginLeft: '22px' }}>
                  {t.tipRender}
                </div>
              }
              {children}
            </Fragment>
          ))
        }
      </Row>
    </div>
  );
}
