import React, { useContext, useEffect, useState } from 'react';
import './index.less'
import { Form } from 'antd'
import { MyContext } from "../../utils/contextManage";
import GComponents from "../GComponent";

export interface ActiveFieldProps {
  // 表单字段信息
  field: any
  // 级联信息
  referRuleInfo: any
  // 表单完整数据
  formDetail: any
  // 表单类型，普通表单和搜索表单处理逻辑不同
  formType?: string
  // 表单内容改变回调
  onChange: (val: any) => void
}

const ActiveField: React.FC<ActiveFieldProps> = (props) => {
  const { state } = useContext(MyContext);
  const { field, referRuleInfo, formDetail = {}, onChange, formType = "form" } = props
  const isZh = state.lang === 'zh-CN'
  const isDisabled = (formType === 'searchForm' || formType === 'copyFromForm')
    ? false
    : !!((formDetail.OBJECTRRN && !field.ISEDITABLE) || field.NAME === 'objectRrn')
  const isRequired = formType === 'searchForm' ? field.ISQUERYMANDATORY : field.ISMANDATORY

  const [CustomerField, setCustomerField] = useState<any>()

  useEffect(() => {
    console.log('state', state, field)
    if (state && state.customerFields && state.customerFields[field.NAME]) {
      setCustomerField(state.customerFields[field.NAME])
    }
  }, [state, field])
  const name = field.NAME.toUpperCase()
  const referRule = referRuleInfo[name] || []
  const isNotShow = field.DISPLAYTYPE === 'hidden'
  if (field.DEDEFAULTVALUE) {
    const obj = {
      [name]: field.DEDEFAULTVALUE
    }
    onChange(obj)
  }
  const typeMap = new Map([
    ['string', 'any'],
    ['integer', 'integer'],
    ['double', 'number'],
    ['date', 'date'],
    ['time', 'any'],
    ['email', 'email'],
    ['url', 'url'],
    ['byte[]', 'any']])
  const rules: any = []
  const dataType = typeMap.get(field.DATATYPE) || 'any'
  const DISPLAYTYPE = field.DISPLAYTYPE.toUpperCase()
  if (isRequired) {
    rules.push({
      required: isRequired,
    })
  }
  const needValidateTypeFieldList = ['REFTEXT', 'TEXT', 'PASSWORD', 'TEXTAREA']
  if (needValidateTypeFieldList.includes(DISPLAYTYPE) && dataType && dataType !== 'any') {
    rules.push({
      type: dataType,
      message: isZh ? '类型不正确' : 'type error'
    })
  }
  if (field.DISPLAYLENGTH) {
    rules.push({
      max: field.DISPLAYLENGTH,
      message: isZh ? '超过字数限制' : 'over length',
      transform(value: any) {
        return value + ''
      }
    })
  }
  const label = isZh ? field.LABELZH : field.LABEL
  let formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  }
  if (!label) {
    formItemLayout = {
      labelCol: { span: 0 },
      wrapperCol: { span: 24 }
    }
  }

  return <Form.Item
    key={field.NAME}
    label={label}
    name={(formType === 'form' || formType === 'addForm') ? field.NAME.toUpperCase() : field.NAME}
    hidden={isNotShow}
    labelAlign="left"
    {...formItemLayout}
    rules={rules}>
    {CustomerField ?
      <CustomerField {...field}
        disabled={isDisabled}
        detail={formDetail}
        referRule={referRule}
        onReferChange={(val: any) => {
          console.log('CustomerField的onReferChange', val);
          onChange(val)
        }} />
      :
      <GComponents {...field}
        disabled={isDisabled}
        detail={formDetail}
        referRule={referRule}
        onReferChange={(val: any) => {
          console.log('GComponents的onReferChange', val);
          onChange(val)
        }} />}

  </Form.Item>
};

export default ActiveField;