cldV2react/src/pages/Customer/Client/components/ConnectClient/index.jsx

import { Input, Button, Spin, message } from 'antd'
import React, { useState, useEffect, useRef } from 'react'
import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
import { useDebounceFn } from 'ahooks'
import { useDispatch } from 'dva'
import { apiAddClient, apiChangeClient, queryClient } from '@/services/customer'
import consts from '@/basic/consts'
import { formatValues } from '@/components/LazyCascader'
import AddClient from '../AddClient'

const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true }) => {
  const dispatch = useDispatch()
  const scrollRef = useRef()
  const [state, setState] = useState({
    laoding: true,
    client: [],
    searchVal: '',
    current: 1,
    pageSize: 10,
    total: 0
  })
  const initData = async params => {
    const { data: { client, total } = { client: [], total: 0 }, code = -1 } = await queryClient(
      params
    )
    if (code === consts.RET_CODE.SUCCESS) {
      if (params?.current === 1) {
        scrollRef.current?.scrollTo({ top: 0 })
        // 请求的是第一页或者搜索框
        setState({ ...state, client, total, laoding: false, searchVal: params?.search })
      } else {
        setState({
          ...state,
          client: state.client.concat(client),
          total,
          searchVal: params?.search,
          laoding: false,
          current: params?.current || 1
        })
      }
    }
  }

  useEffect(() => {
    initData({ current: 1, pageSize: 10 })
  }, [])
  const onChange = e => {
    const { value = '' } = e.target || e.currentTarget
    initData({ search: value, current: 1, pageSize: state.pageSize })
  }

  const { run: handleInputChange } = useDebounceFn(onChange)
  const closeModal = () => {
    dispatch({
      type: 'single/changeModal'
    })
  }

  const addConfirm = async values => {
    const payload = formatValues(values)
    const { code = -1, msg = '新增成功' } = await apiAddClient(payload)
    if (code === consts.RET_CODE.SUCCESS) {
      if (Object.hasOwnProperty.call(values, `${preUrl}Id`)) {
        message.success('新增成功并且绑定成功')
        onSelect(values.name)
        closeModal()
      } else {
        message.success(msg)
        initData()
      }
    }
  }

  // 商机/软件锁关联联系人
  const connectClient = async clientId => {
    const { code = -1 } = await apiChangeClient(preUrl, { id: dataId, clientId })
    if (code === consts.RET_CODE.SUCCESS) {
      onSelect()
      closeModal()
    }
  }

  const handleListScroll = () => {
    // 未滚动到底部
    if (
      scrollRef.current.scrollHeight - scrollRef.current.clientHeight <=
      scrollRef.current.scrollTop
    ) {
      // 已到底部

      state.current * state.pageSize < state.total &&
        initData({ current: state.current + 1, pageSize: state.pageSize, search: state.searchVal })
    }
  }
  // const { run: listScroller } = useThrottleFn(handleListScroll)

  return (
    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
      <div className={styles.modalHeader}>
        <Input
          prefix={<SearchOutlined />}
          className={styles.inputSearch}
          placeholder="输入联系人名称搜索"
          onChange={handleInputChange}
        />
        <span className={styles.closeIcon}>
          <CloseOutlined onClick={closeModal} />
        </span>
      </div>
      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
        <Spin spinning={state.laoding}>
          {state.client.map(item => (
            <div key={item.id} className={styles.card}>
              <span className="w-1/6">{item.clientName}</span>
              <span className="w-1/6">{item.position}</span>
              <span className="w-1/6">{item.telephone}</span>
              <span className="w-1/2 flex justify-between">
                <span>{item.companyName}</span>
                <Button type="primary" size="small" onClick={() => connectClient(item.id)}>
                  选择ta
                </Button>
              </span>
            </div>
          ))}
        </Spin>
      </div>
      {showFooter ? (
        <div className={styles.modalFooter}>
          <AddClient
            onConfirm={addConfirm}
            dataId={dataId}
            dataType={preUrl}
            buttonProps={{ ghost: true }}
            btnTitle={'添加并关联到新联系人'}
          />
        </div>
      ) : null}
    </div>
  )
}

export default ConnectClient