import React, { useState, useEffect, useMemo, useContext } from 'react'
import { Input, message, ConfigProvider } from 'antd'
import Icon, { PlusOutlined } from '@ant-design/icons'
import * as icons from '@ant-design/icons'
import { GetFieldValueFromTable } from '../../../../apis/process'
import styles from './index.less'

const iconList = Object.keys(icons).filter((item) => typeof icons[item] === 'object')
const initUserInfo = {
  fullName: '【本人姓名】',
  Phone: '【本人电话】',
  depart: { name: '【本人部门】' }
}
const loaclPaths = ['【本人姓名】', '【本人电话】', '【本人部门】']

const debounce = (fn) => {
  let t = null
  return function (e) {
    const context = this
    const args = arguments
    if (t) {
      clearTimeout(t)
    }
    t = setTimeout(function () {
      fn.call(context, args)
    }, 200)
  }
}

const TextInput = (props) => {

  const preview = sessionStorage.getItem('FormRender')
  const userInfo = preview === 'preview' ? initUserInfo : window?.globalConfig?.userInfo || initUserInfo
  const { value, onChange, schema, addons } = props
  const { title, disabled, placeholder, presetValue, addonBefore, addonAfter, maxLength, rules, uniqueVerify, tableName, fieldName, isStoreID, textDefalut } = schema

  const handleChange = (e) => {
    if (addons) {
      onChange(e.target.value)
    }
  }

  const valueShow = useMemo(() => {
    if (isStoreID) {
      if (textDefalut === '【本人姓名】') {
        return userInfo.fullName
      }
      if (textDefalut === '【本人部门】') {
        return userInfo.depart.name
      }
    }
    return value
  }, [textDefalut, value, isStoreID])

  useEffect(() => {
    let value = presetValue
    if (preview !== 'preview') {
      if (loaclPaths.includes(value)) {
        if (value === '【本人姓名】') {
          if (isStoreID) {
            value = userInfo.OID + ''
          } else {
            value = userInfo.fullName
          }
        } else if (value === '【本人部门】') {
          if (isStoreID) {
            value = userInfo.depart.OID + ''
          } else {
            value = userInfo.depart.name
          }
        } else if (value === '【本人电话】') {
          value = userInfo.Phone
        }
      }
    }
    if (addons) {
      addons.setValue(addons.dataPath, value || '')
    } else {
      onChange(value || '')
    }
  }, [presetValue])

  useEffect(() => {
    if (uniqueVerify === '表名/字段名' && tableName && fieldName) {
      if (addons) {
        let getValue = async (params) => {
          const [rule, value, callback] = params
          const { code, data, msg } = await GetFieldValueFromTable(tableName, fieldName, `${fieldName}=${value}`)
          if (Array.isArray(data) && data.length) {
            callback(new Error(`${title}已重复,请重新输入`));
          } else {
            callback()
          }
        }
        let uniqueRules = [
          {
            validator: debounce(getValue)
          }
        ]
        addons.setSchemaByPath(addons.dataPath, { ...schema, rules: uniqueRules })
      }
    }
  }, [uniqueVerify, tableName, fieldName])

  return (
    <div className={styles.textInput} isdisabled={JSON.stringify(disabled)}>
      <Input
        style={{ color: loaclPaths.includes(presetValue) ? 'blue' : '' }}
        disabled={disabled}
        value={valueShow}
        maxLength={maxLength}
        placeholder={disabled ? (placeholder || '') : (placeholder || '请输入内容')}
        onChange={handleChange}
        addonBefore={iconList.includes(addonBefore) ? <Icon style={{ color: 'pink' }} component={icons[addonBefore]} /> : addonBefore}
        addonAfter={iconList.includes(addonAfter) ? <Icon component={icons[addonAfter]} /> : addonAfter}
      />
    </div>
  )

}

export default TextInput