cldV2react/src/pages/Product/Road/Enterprise/components/AddEnterprise/EnterpriseSearchSelect.jsx

import { Select } from 'antd'
import React, { useState } from 'react'
import { useDebounceFn } from 'ahooks'
import consts from '@/consts'
import { queryRoadpricingListV2 } from '@/services/product'
import { validateEnum } from '@/pages/Customer/Company/components/AddCompany/CompanyFormItem'

const EnterpriseSearchSelect = ({ value, onChange, disabled }) => {
  const { Option } = Select
  const [state, setState] = useState({
    inputVal: value,
    roadlist: null
  })
  const triggerChange = changedValue => {
    onChange?.(changedValue)
  }
  const { roadlist, inputVal } = state
  const queryRoadList = async search => {
    if (!search) return
    const { code = -1, data } = await queryRoadpricingListV2({
      current: 1,
      pageSize: 10,
      search,
      projectType: 1
    })
    if (code === consts.RET_CODE.SUCCESS) {
      const { list = [] } = data
      setState({ ...state, roadlist: list })
    }
  }
  const { run: handleQueryList, cancel: cancelQuerying } = useDebounceFn(queryRoadList, {
    wait: 250
  })

  const handleOnSearch = async value => {
    if (value) {
      await handleQueryList(value)
      setState({ ...state, inputVal: value })
    } else {
      setState({ ...state, inputVal: value, roadlist: null })
    }
  }

  const handleOnChange = async val => {
    setState({ ...state, inputVal: val })
    triggerChange(val)
  }
  const options = roadlist?.map(item => ({ label: item.realName, value: item.ID }))
  return (
    <Select
      showSearch
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      placeholder="请输入企业名称"
      value={inputVal}
      options={options}
      disabled={disabled}
      allowClear
      onSearch={handleOnSearch}
      onChange={handleOnChange}
      notFoundContent={null}
    />
  )
}

export default EnterpriseSearchSelect