import React from 'react'
import { Input, Select, DatePicker, Icon, InputNumber, Switch, Checkbox, TimePicker } from 'antd'
import DropDownPagination from '../common/DropDownPagination'
import CascaderInput from '../common/CascaderInput'
import TreeSelectInput from '../common/TreeSelectInput'
import ScannerComponent from '../common/ScannerComponent'
import FromModal from '../form/FormModal'
import CheckToInput from '../common/CheckToInput'
import moment from 'moment'
import {
  getParseValue,
} from '../utils/common'
const CheckboxGroup = Checkbox.Group
const Option = Select.Option
const { MonthPicker, RangePicker } = DatePicker
const { TextArea } = Input

let compositioning = false
const getControl = (colConfig, record, thisRef) => {
  const models = window.g_app ? window.g_app._store.getState() : {}

  let {
    controlType,
    field,
    value,
    disabled,
    promptInfo,
    style,
    caseType,
    isRequire,
    onChange,
    showFormCode,
    showFormId,
    editFormCode,
    data,
    onBlur
  } = colConfig || {}
  // 文本输入框
  if (value) {
    value = getParseValue(value, thisRef.props.login?.user,null,null,thisRef);
  }
  if (controlType === 1) {
    const isShowSrcBtn = showFormCode && showFormId
    const inputProps = {
      placeholder: promptInfo,
      style: { width: isShowSrcBtn ? '80%' : '100%', ...style },
      value,
      disabled,
      onChange: e => {
        if (e !== null && e !== undefined) {
          let tmpValue = (e && e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
          if (tmpValue && caseType && caseType === 1) {
            if (!compositioning) {
              tmpValue = tmpValue.toString().toUpperCase()
            }
          }
          else if (tmpValue && caseType && caseType === 2) {
            if (!compositioning) {
              tmpValue = tmpValue.toString().toLowerCase()
            }
          }
          if (typeof onChange === 'function') {
            onChange({
              field,
              value: tmpValue,
              colConfig,
              thisRef
            })
          }
        }
      },
      onCompositionStart: e => {
        compositioning = true
      },
      onCompositionEnd: e => {
        compositioning = false
      },
      onBlur: () => {
        if (!disabled) {
          let tmpValue = value
          if (tmpValue) {
            tmpValue = tmpValue.toString().replace(/(^\s*)|(\s*$)/g, '')
          }
          if (typeof onChange === 'function') {
            onChange({
              field,
              value: tmpValue,
              colConfig,
              thisRef
            })
          }
        }
        if (typeof onBlur === 'function') {
          onBlur({
            field,
            colConfig,
            thisRef
          })
        }
      },
      onPressEnter: (e) => {
        if (!disabled) {
          let tmpValue = value
          if (tmpValue) {
            tmpValue = tmpValue.toString().replace(/(^\s*)|(\s*$)/g, '')
          }
          if (typeof onChange === 'function') {
            onChange({
              field,
              value: tmpValue,
              colConfig,
              thisRef
            })
          }
        }
        const onPressEnter = data ? data.onPressEnter : null
        if (typeof onPressEnter === 'function') {
          onPressEnter({
            field,
            colConfig,
            e,
            thisRef
          })
        }
      }
    }
    return (
      <>
        <Input {...inputProps} />
        {
          isShowSrcBtn
            ? (
              <FromModal formCode={showFormCode} data={{ id: showFormId, isShow: true }}>
                <Icon type='info-circle' style={{ marginLeft: 8, fontSize: 20 }} />
              </FromModal>
            )
            : null
        }
      </>
    )
  }
  // 时间控件：日期选择 ==> date: 日
  else if (controlType === 2) {
    const datePickerProps = {
      title: promptInfo,
      disabled,
      style,
      allowClear: !isRequire,
      value: value ? moment(value) : null,
      onChange: (e, datestring) => {
        if (typeof onChange === 'function') {
          onChange({
            field,
            value: datestring,
            colConfig,
            thisRef
          })
        }
      },
      onBlur: () => {
        if (typeof onBlur === 'function') {
          onBlur({
            field,
            colConfig,
            thisRef
          })
        }
      }
    }
    return <><DatePicker {...datePickerProps} /></>
  }
  // 单选下拉
  else if (controlType === 3) {
    const enums = models.app ? models.app.enums : null
    const enumName = data ? data.enumName : null
    const options = data && !enumName && data.options ? data.options.split(',') : []
    typeof value === 'string' && (value = +value)
    const selectProps = {
      title: promptInfo,
      disabled,
      value,
      showSearch: true,
      optionFilterProp: 'children',
      allowClear: !isRequire,
      style: { width: '100%', minWidth: 80, ...style },
      onChange: (e) => {
        const tmpValue = (e && e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
        if (typeof onChange === 'function') {
          onChange({
            field,
            value: tmpValue,
            colConfig,
            thisRef
          })
        }
      },
      onBlur: () => {
        if (typeof onBlur === 'function') {
          onBlur({
            field,
            colConfig,
            thisRef
          })
        }
      }
    }
    return (
      <>
        <Select {...selectProps}>
          {
            enumName && enums && enums[enumName] && enums[enumName].options ? enums[enumName].options.map(t => {
              return <Option value={t.value} key={field + t.value} >{t.label}</Option>
            }) : null
          }
          {
            options && options.length ? options.map((item, key) => {
              const paris = item.split(':')
              return <Option key={key} value={+paris[1]}>{paris[0]}</Option>
            }) : null
          }
        </Select>
      </>
    )
  }
  // 开关控件：Switch
  else if (controlType === 4) {
    const switchProps = {
      title: promptInfo,
      style,
      disabled,
      checked: value,
      checkedChildren: '是',
      unCheckedChildren: '否',
      onChange: e => {
        const tmpValue = (e && e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
        if (typeof onChange === 'function') {
          onChange({
            field,
            value: tmpValue,
            colConfig,
            thisRef
          })
        }
      },
      onBlur: () => {
        if (typeof onBlur === 'function') {
          onBlur({
            field,
            colConfig,
            thisRef
          })
        }
      }
    }

    return <><Switch {...switchProps} /></>
  }
  // 复选框控件：CheckBox
  else if (controlType === 5) {
    const enums = models.app ? models.app.enums : null
    const enumName = data ? data.enumName : null
    if (enumName) {
      const checkOptions = enumName && enums && enums[enumName] && enums[enumName].options ? enums[enumName].options : null
      const tmp = value ? value.split('_') : []
      const tmpValues = []
      tmp.forEach((n, i) => {
        if (n !== '') tmpValues.push(+n)
      })

      const checkboxGroupProps = {
        title: promptInfo,
        style,
        options: checkOptions,
        disabled,
        value: tmpValues,
        onChange: (e) => {
          const tmpValue = e
          if (typeof onChange === 'function') {
            onChange({
              field,
              value: tmpValue ? ('_' + tmpValue.join('_') + '_') : '',
              colConfig,
              thisRef
            })
          }
        },
        onBlur: () => {
          if (typeof onBlur === 'function') {
            onBlur({
              field,
              colConfig,
              thisRef
            })
          }
        }
      }

      return <><CheckboxGroup {...checkboxGroupProps} /></>
    }
    else {
      const switchProps = {
        title: promptInfo,
        style,
        disabled,
        checked: value,
        checkedChildren: '是',
        unCheckedChildren: '否',
        onChange: e => {
          const tmpValue = (e && e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
          if (typeof onChange === 'function') {
            onChange({
              field,
              value: tmpValue,
              colConfig,
              thisRef
            })
          }
        },
        onBlur: () => {
          if (typeof onBlur === 'function') {
            onBlur({
              field,
              colConfig,
              thisRef
            })
          }
        }
      }
      return <><Switch {...switchProps} /></>
    }
  }
  // 多行输入：TextArea
  else if (controlType === 6) {
    const textAreaProps = {
      rows: 2,
      placeholder: promptInfo,
      style,
      value,
      disabled,
      onChange: e => {
        if (e !== null && e !== undefined) {
          let tmpValue = (e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
          if (tmpValue && caseType && caseType === 1) {
            tmpValue = tmpValue.toString().toUpperCase()
          }
          else if (tmpValue && caseType && caseType === 2) {
            tmpValue = tmpValue.toString().toLowerCase()
          }
          if (typeof onChange === 'function') {
            onChange({
              field,
              value: tmpValue,
              colConfig,
              thisRef
            })
          }
        }
      },
      onBlur: () => {
        if (typeof onBlur === 'function') {
          onBlur({
            field,
            colConfig,
            thisRef
          })
        }
      }
    }
    return <><TextArea {...textAreaProps} /></>
  }
  // 数字输入：InputNumber
  else if (controlType === 7) {
    const editFormData = editFormCode ? (data ? data.editFormData : null) : null
    const inputNumberProps = {
      placeholder: promptInfo,
      disabled,
      value,
      style: { width: editFormCode ? '80%' : '100%', ...style },
      onChange: e => {
        if (e !== null && e !== undefined) {
          let tmpValue = ''
          if (e.target && e.target.value && !isNaN(e.target.value)) {
            tmpValue = +e.target.value
          } else if (!isNaN(e)) {
            tmpValue = +e
          } else {
            tmpValue = null
          }
          if (typeof onChange === 'function') {
            onChange({
              field,
              value: tmpValue,
              colConfig,
              thisRef
            })
          }
        }
      },
      onBlur: () => {
        if (typeof onBlur === 'function') {
          onBlur({
            field,
            colConfig,
            thisRef
          })
        }
      }
    }
    return (
      <>
        <InputNumber {...inputNumberProps} />
        {
          editFormCode
            ? (
              <FromModal
                formCode={editFormCode}
                data={editFormData}>
                <Icon type='edit' style={{ marginLeft: 8, fontSize: 20 }} />
              </FromModal>
            )
            : null
        }
      </>
    )
  }
  // 时分秒控件：TimePicker ==> 17:55:55
  else if (controlType === 8) {
    return (
      <>
        <TimePicker
          title={promptInfo}
          disabled={disabled}
          allowClear={!isRequire}
          style={style}
          value={value ? moment(value, (value.indexOf('-') > -1 ? 'YYYY-MM-DD HH:mm:ss' : 'HH:mm:ss')) : null}
          onChange={(e, datestring) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: datestring,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 分页下拉
  else if (controlType === 9) {
    const { api, onLoadData, onSelect, onSearchRef } = data || {}
    return (
      <>
        <DropDownPagination
          api={api}
          value={value}
          disabled={disabled}
          style={style}
          record={record}
          colConfig={colConfig}
          showFormCode={showFormCode}
          thisRef={thisRef}
          showFormId={showFormId}
          placeholder={promptInfo}
          onLoadData={onLoadData}
          onSelect={onSelect}
          data={data}
          onChange={({ value }) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: value,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
          onSearchRef={onSearchRef}
        />
      </>
    )
  }
  // 时间控件：区间选择精确到日
  else if (controlType === 10) {
    const temps = value ? value.split(',') : null
    return (
      <>
        <RangePicker
          title={promptInfo}
          allowClear={!isRequire}
          disabled={disabled}
          style={style}
          value={temps && temps.length ? [moment(temps[0]), moment(temps[1])] : null}
          onChange={(e, datestring) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: (datestring && datestring.length === 2 && datestring[0] && datestring[1] ? datestring.join(',') : null),
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 下拉树选择
  else if (controlType === 11) {
    const { api, onLoadData, onSelect } = data || {}
    return (
      <>
        <TreeSelectInput
          api={api}
          data={data}
          value={value}
          record={record}
          colConfig={colConfig}
          thisRef={thisRef}
          onLoadData={onLoadData}
          onSelect={onSelect}
          onChange={({ value }) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: value,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 下拉多选
  else if (controlType === 12) {
    const enums = models.app ? models.app.enums : null
    const enumName = data ? data.enumName : null
    const checkedData = []
    const options = data && !enumName && data.options ? data.options.split(',') : []
    const tmp = value ? value.split('_') : []
    const tempValue = []
    tmp.forEach((n, i) => {
      if (n !== '') tempValue.push(n)
    })
    // 根据枚举名称获取树数据
    if (enumName && enums && enums[enumName] && enums[enumName].options && enums[enumName].options.length) {
      enums[enumName].options.forEach(t => {
        checkedData.push({
          label: t.label,
          value: t.value,
          key: t.value
        })
      })
    }
    if (options && options.length) {
      options.forEach(item => {
        const paris = item.split(':')
        checkedData.push({
          label: paris[0],
          value: +paris[1],
          key: +paris[1]
        })
      })
    }

    return (
      <>
        <CheckToInput
          checkedData={checkedData}
          value={tempValue}
          promptInfo={promptInfo}
          style={{ width: '100%', ...style }}
          disabled={disabled}
          onChange={(changeValue) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: changeValue && changeValue.length ? ('_' + changeValue.join('_') + '_') : null,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 扫描
  else if (controlType === 13) {
    const { api, onSelect, onScan, onPressEnter } = data || {}
    return (
      <>
        <ScannerComponent
          api={api}
          value={value}
          disabled={disabled}
          style={style}
          colConfig={colConfig}
          showFormCode={showFormCode}
          thisRef={thisRef}
          showFormId={showFormId}
          placeholder={promptInfo}
          onSelect={onSelect}
          data={data}
          onChange={({ value }) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
          onScan={(scanParam) => {
            if (typeof onScan === 'function') {
              onScan({
                ...scanParam,
                field,
                colConfig,
                thisRef
              })
            }
            if (typeof onPressEnter === 'function') {
              onPressEnter({
                ...scanParam,
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 系统序列号控件
  else if (controlType === 14) {
    const codeRuleType = data.codeRuleType
    return (
      <>
        <Input
          placeholder={promptInfo}
          disabled={disabled}
          style={codeRuleType ? { width: '80%' } : { width: '100%' }}
          value={value}
          onChange={(e) => {
            if (e !== null && e !== undefined) {
              let tmpValue = (e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
              if (tmpValue && caseType && caseType === 1) {
                tmpValue = tmpValue.toString().toLowerCase()
              }
              else if (tmpValue && caseType && caseType === 2) {
                tmpValue = tmpValue.toString().toUpperCase()
              }
              if (typeof onChange === 'function') {
                onChange({
                  field,
                  value: tmpValue,
                  colConfig,
                  thisRef
                })
              }
            }
          }}
          onBlur={() => {
            if (!disabled) {
              let tmpValue = value
              if (tmpValue) {
                tmpValue = tmpValue.toString().replace(/(^\s*)|(\s*$)/g, '')
              }
              if (typeof onChange === 'function') {
                onChange({
                  field,
                  value: tmpValue,
                  colConfig,
                  thisRef
                })
              }
            }
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
        {
          codeRuleType
            ? (
              <Icon
                type='info-circle'
                style={{ marginLeft: 8, fontSize: 20 }}
                onClick={() => {
                  if (typeof data.onGetCodeRule === 'function') {
                    data.onGetCodeRule((code) => {
                      if (typeof onChange === 'function') {
                        onChange({
                          field,
                          value: code,
                          colConfig,
                          thisRef
                        })
                      }
                    }, codeRuleType)
                  }
                }}
              />
            )
            : null
        }
      </>
    )
  }
  // 时间控件：年月日时分秒 ==> DatePicker showTime
  else if (controlType === 15) {
    return (
      <>
        <DatePicker
          placeholder={promptInfo}
          format='YYYY-MM-DD HH:mm:ss'
          showTime
          allowClear={!isRequire}
          disabled={disabled}
          style={style}
          value={value ? moment(value) : null}
          onChange={(e, datestring) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: datestring,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  } 
  else if (controlType === 108) {
    return (
      <>
        <DatePicker
          placeholder={promptInfo}
          format={data.datetimeformate}
          showTime
          allowClear={!isRequire}
          disabled={disabled}
          style={style}
          value={value ? moment(value) : null}
          onChange={(e, datestring) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: datestring,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 密码控件
  else if (controlType === 16) {
    return (
      <>
        <Input
          placeholder={promptInfo}
          disabled={disabled}
          style={style}
          value={value}
          type='password'
          onChange={(e) => {
            if (e !== null && e !== undefined) {
              let tmpValue = (e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
              if (tmpValue && caseType && caseType === 1) {
                tmpValue = tmpValue.toString().toLowerCase()
              }
              else if (tmpValue && caseType && caseType === 2) {
                tmpValue = tmpValue.toString().toUpperCase()
              }
              if (typeof onChange === 'function') {
                onChange({
                  field,
                  value: tmpValue,
                  colConfig,
                  thisRef
                })
              }
            }
          }}
          onBlur={() => {
            if (!disabled) {
              let tmpValue = value
              if (tmpValue) {
                tmpValue = tmpValue.toString().replace(/(^\s*)|(\s*$)/g, '')
              }
              if (typeof onChange === 'function') {
                onChange({
                  field,
                  value: tmpValue,
                  colConfig,
                  thisRef
                })
              }
            }
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 级联组件
  else if (controlType === 17) {
    const { api, onLoadData, onSelect } = data || {}
    return (
      <>
        <CascaderInput
          api={api}
          value={value}
          disabled={disabled}
          style={style}
          record={record}
          colConfig={colConfig}
          showFormCode={showFormCode}
          thisRef={thisRef}
          showFormId={showFormId}
          placeholder={promptInfo}
          onLoadData={onLoadData}
          onSelect={onSelect}
          data={data}
          onChange={({ value }) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: value,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 月份选择
  else if (controlType === 18) {
    const monthPickerProps = {
      title: promptInfo,
      disabled,
      style,
      allowClear: !isRequire,
      value: value ? moment(value) : null,
      onChange: (e, datestring) => {
        const monthFormat = moment(datestring).format('YYYY-MM-DD')
        if (typeof onChange === 'function') {
          onChange({
            field,
            value: monthFormat,
            colConfig,
            thisRef
          })
        }
      },
      onBlur: () => {
        if (typeof onBlur === 'function') {
          onBlur({
            field,
            colConfig,
            thisRef
          })
        }
      }
    }
    return <><MonthPicker {...monthPickerProps} /></>
  }
  // 月份区间
  else if (controlType === 19) {
    const temps = value ? value.split(',') : null
    return (
      <>
        <RangePicker
          mode={['month', 'month']}
          format='YYYY-MM'
          title={promptInfo}
          allowClear={!isRequire}
          disabled={disabled}
          style={style}
          value={temps && temps.length ? [moment(temps[0]), moment(temps[1])] : null}
          onChange={(e, dateStrings) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: dateStrings.filter(ds => !!ds).join(',') || null,
                colConfig,
                thisRef
              })
            }
          }}
          onPanelChange={value => {
            if (typeof onChange === 'function') {
              const dateStrings = value.map(val => moment(moment(val).format('YYYY-MM')).format('YYYY-MM-DD'))
              onChange({
                field,
                value: dateStrings.join(',') || null,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 年份选择
  else if (controlType === 20) {
    const yearPickerProps = {
      title: promptInfo,
      disabled,
      style,
      allowClear: !isRequire,
      value: value ? moment(value) : null,
      mode: 'year',
      format: 'YYYY',
      placeholder: '请选择年份',
      onChange: (e, year) => {
        if (typeof onChange === 'function') {
          onChange({
            field,
            value: year || null,
            colConfig,
            thisRef
          })
        }
      },
      onPanelChange: (date) => {
        const monthFormat = date ? moment(moment(date).format('YYYY')).format('YYYY-MM-DD') : null
        if (typeof onChange === 'function') {
          onChange({
            field,
            value: monthFormat,
            colConfig,
            thisRef
          })
        }
      }
    }
    return <><DatePicker {...yearPickerProps} /></>
  }
  // 年份区间
  else if (controlType === 21) {
    const temps = value ? value.split(',') : null
    const handleChangeEvent = (e, value) => {
      if (typeof onChange === 'function') {
        const dateStrings = value.map(val => val ? moment(moment(val).format('YYYY')).format('YYYY-MM-DD') : null)
        if (dateStrings[0] && dateStrings[1]) {
          if (moment(dateStrings[0]).isAfter(dateStrings[1])) {
            dateStrings.reverse()
          }
        }
        onChange({
          field,
          value: dateStrings.filter(ds => !!ds).join(',') || null,
          colConfig,
          thisRef
        })
      }
    }
    return (
      <>
        <RangePicker
          mode={['year', 'year']}
          format='YYYY'
          title={promptInfo}
          allowClear={!isRequire}
          disabled={disabled}
          style={style}
          value={temps && temps.length ? [moment(temps[0]), moment(temps[1])] : null}
          onChange={handleChangeEvent}
          onPanelChange={value => handleChangeEvent(null, value)}
          onCalendarChange={value => handleChangeEvent(null, value)}
        />
      </>
    )
  }
  // 年月日时分秒区间
  else if (controlType === 22) {
    const temps = value ? value.split(',') : null
    return (
      <>
        <RangePicker
          showTime
          title={promptInfo}
          allowClear={!isRequire}
          disabled={disabled}
          style={style}
          value={temps && temps.length ? [moment(temps[0]), moment(temps[1])] : null}
          onChange={(e, dateStrings) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: dateStrings.filter(ds => !!ds).join(',') || null,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // 年月日时分区间
  else if (controlType === 23) {
    const temps = value ? value.split(',') : null
    return (
      <>
        <RangePicker
          showTime={{ format: 'HH:mm' }}
          format='YYYY-MM-DD HH:mm'
          title={promptInfo}
          allowClear={!isRequire}
          disabled={disabled}
          style={style}
          value={temps && temps.length ? [moment(temps[0]), moment(temps[1])] : null}
          onChange={(e, dateStrings) => {
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: dateStrings.filter(ds => !!ds).join(',') || null,
                colConfig,
                thisRef
              })
            }
          }}
          onBlur={() => {
            if (typeof onBlur === 'function') {
              onBlur({
                field,
                colConfig,
                thisRef
              })
            }
          }}
        />
      </>
    )
  }
  // controlType === 100 ~ 107 默认是 Input 组件，用于处理不同类型文本
  return (
    <>
      <Input
        placeholder={promptInfo}
        disabled={disabled}
        style={style}
        value={value}
        onChange={(e) => {
          if (e !== null && e !== undefined) {
            let tmpValue = (e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e))
            if (tmpValue && caseType && caseType === 1) {
              tmpValue = tmpValue.toString().toLowerCase()
            }
            else if (tmpValue && caseType && caseType === 2) {
              tmpValue = tmpValue.toString().toUpperCase()
            }
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: tmpValue,
                colConfig,
                thisRef
              })
            }
          }
        }}
        onBlur={() => {
          if (!disabled) {
            let tmpValue = value
            if (tmpValue) {
              tmpValue = tmpValue.toString().replace(/(^\s*)|(\s*$)/g, '')
            }
            if (typeof onChange === 'function') {
              onChange({
                field,
                value: tmpValue,
                colConfig,
                thisRef
              })
            }
          }
          if (typeof onBlur === 'function') {
            onBlur({
              field,
              colConfig,
              thisRef
            })
          }
        }}
      />
    </>
  )
}

export default getControl
