cldV2react/src/pages/Customer/Business/components/ChangeStaff/index.jsx

import React from 'react'
import { LinkOne, Switch } from '@icon-park/react'
import { Card, Tooltip } from 'antd'
import { useDispatch } from 'dva'
import consts from '@/consts'
import styles from './index.less'
import { useModal } from '@/components/ModalStore'

const ChangeStaff = props => {
  const dispatch = useDispatch()
  const dispatchModal = useModal()
  const { text = '', dataId, responsibleId, actionPayload = 'business' } = props?.dataSource || {}
  const refreshClient = () => {
    dispatch({
      type: 'refresh/commitAction',
      payload: actionPayload
    })
  }

  const handleConnectCustomer = () => {
    dispatchModal('M_CONNECT_STAFF', {
      onSelect: refreshClient,
      id: dataId,
      postUrl: '/business/change/responsible'
    })
  }

  const notValueRender = (
    <div onClick={handleConnectCustomer} className={styles.notBusinessContent}>
      <LinkOne size="14" />
      <span className="ml-5px">关联负责人</span>
    </div>
  )

  const handleCompanyClick = () => {
    dispatchModal('D_EMPLOYEE_DETAIL', { dataId })
  }
  const normalValueRender = (
    <Card size="small">
      <div className="flex justify-between">
        <div className={styles.nameContent} onClick={handleCompanyClick}>
          {text}
        </div>
        <div className="max-w-55px">
          <Tooltip placement="right" title="更换负责人" className="ml-5px" onClick={handleConnectCustomer}>
            <span className={styles.switchIcon}>
              <Switch />
            </span>
          </Tooltip>
        </div>
      </div>
    </Card>
  )
  return (
    <div className={styles.businessInput}>
      {responsibleId && responsibleId !== consts.ENCRYPTION_ZERO ? normalValueRender : notValueRender}
    </div>
  )
}

export default ChangeStaff