cldV2react/src/pages/Customer/Company/components/AddCompany/CompanyFormItem.jsx

import consts from '@/consts'
import { queryCompany } from '@/services/customer'
import { useDebounceFn } from 'ahooks'
import { Input, Alert, Popover } from 'antd'
import { useState } from 'react'
import { useModal } from '@/components/ModalStore'

export const validateEnum = {
  Success: 'success',
  Warning: 'warning',
  Error: 'error',
  Validating: 'validating'
}
const CompanyFormItem = ({ value, onChange, validateFn }) => {
  const dispatchModal = useModal()
  const [state, setState] = useState({
    inputVal: value,
    visible: false,
    list: null
  })
  const triggerChange = changedValue => {
    onChange?.(changedValue)
  }

  const queryList = async search => {
    if (!search) return
    const { code = -1, data } = await queryCompany({
      current: 1,
      pageSize: 10,
      search,
      waiver: true
    })
    if (code === consts.RET_CODE.SUCCESS) {
      const { customer = [] } = data
      setState({ ...state, list: customer, visible: !!customer?.length })
      if (customer?.length) {
        validateFn(validateEnum.Warning)
      } else {
        validateFn(validateEnum.Success)
      }
    }
  }

  const { run: handleQueryList, cancel: cancelQuerying } = useDebounceFn(queryList, { wait: 600 })

  const handleOnInputChange = async e => {
    const val = e.target.value || ''
    if (!val) {
      cancelQuerying()
      setState({ ...state, inputVal: val, list: null, visible: false })
      validateFn(validateEnum.Error)
    } else {
      setState({ ...state, inputVal: val })
      validateFn(validateEnum.Validating)
      handleQueryList(val)
    }
    triggerChange(val)
  }

  const { visible, list, inputVal } = state
  return (
    <Popover
      placement="bottom"
      visible={list && list.length && visible}
      onVisibleChange={e => setState({ ...state, visible: e })}
      title={
        <Alert
          message="已存在同名单位，请确认是否继续添加"
          type="warning"
          style={{ padding: '5px', margin: '10px 0' }}
        />
      }
      trigger="click"
      content={
        <ul className="list-none">
          {list?.map(item => {
            return (
              <p key={item.id}>
                <span
                  className="text-primary cursor-pointer hover:text-hex-967bbd"
                  onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: item.id })}>
                  {item.companyName}
                </span>
                <span className="mx-1">/</span>
                <span>{item.districtName?.replaceAll(' / ', ',')}</span>
              </p>
            )
          })}
        </ul>
      }>
      <Input
        type="text"
        autoComplete="false"
        value={inputVal}
        placeholder="请输入单位全称"
        onChange={handleOnInputChange}
      />
    </Popover>
  )
}

export default CompanyFormItem