cldV2react/src/pages/Customer/Company/components/CompanyDetail/SyncClient.jsx

import consts from '@/consts'
import { syncToClient } from '@/services/customer'
import { Copy } from '@icon-park/react'
import { Button, Checkbox, message, Modal, Table } from 'antd'
import { useState, useMemo } from 'react'
import { useDispatch } from 'umi'
import { VList } from 'virtuallist-antd'
import styles from './index.less'

const SyncClient = ({ customer, client, actionPayload }) => {
  const dispatch = useDispatch()
  const [state, setState] = useState({
    visible: false,
    loading: false,
    selectedKeys: null,
    checkValues: ['district', 'address']
  })

  const refreshCompany = () => {
    dispatch({
      type: 'refresh/commitAction',
      payload: actionPayload
    })
  }

  const handleOnConfirm = async () => {
    const { checkValues, selectedKeys } = state
    if (!checkValues?.length) {
      return message.error('同步选项至少选中一个')
    }
    if (!selectedKeys?.length) {
      return message.warning('请选择需要同步的客户')
    }
    const params = { customerId: customer.id, clientIds: selectedKeys }
    checkValues?.forEach(item => {
      params[item] = true
    })
    const { code = -1 } = await syncToClient(params)
    if (code === consts.RET_CODE.SUCCESS) {
      refreshCompany()
      setState({ ...state, visible: false, loading: false })
      return message.success('同步成功')
    }
  }

  const columns = [
    {
      dataIndex: 'clientName',
      title: '客户名称',
      width: '15%',
      ellipsis: true
    },
    {
      dataIndex: 'districtName',
      title: '客户地区',
      width: '15%',
      ellipsis: true,
      renderText: text => text?.replaceAll(' / ', ',')
    },
    {
      dataIndex: 'address',
      title: '地址',
      width: '20%',
      ellipsis: true
    },
    {
      dataIndex: 'ride',
      title: '乘车路线',
      width: '20%',
      ellipsis: true
    },
    {
      dataIndex: 'landmarks',
      title: '地标建筑',
      width: '15%',
      ellipsis: true
    },
    {
      dataIndex: 'stay',
      title: '参考住宿',
      ellipsis: true
    }
  ]

  const vList = useMemo(() => {
    return VList({
      height: 400,
      vid: 'sync_client'
    })
  }, [])

  const { checkValues, visible, loading } = state
  return (
    <>
      <Button
        size="small"
        ghost
        type="primary"
        loading={loading}
        onClick={() => setState({ ...state, visible: true, loading: true })}
      >
        <Copy theme="two-tone" fill={['#333', '#886ab5']} />
        <span className="ml-1">同步地址信息</span>
      </Button>
      <Modal
        width="70%"
        title={`同步 ${customer.companyName} 信息`}
        // getContainer={false}
        visible={visible}
        onCancel={() => setState({ ...state, visible: false, loading: false })}
        onOk={handleOnConfirm}
      >
        <div className="rounded-3 p-4 mb-2 pt-0">
          <Checkbox.Group defaultValue={checkValues} onChange={e => setState({ ...state, checkValues: e })}>
            <div className="flex flex-nowrap">
              <Checkbox value="district">
                <div className="w-100px text-left">地区</div>
              </Checkbox>
              <div>{customer.districtName?.replaceAll(' / ', ',')}</div>
            </div>
            <div className="flex flex-nowrap">
              <Checkbox value="address">
                <div className="w-100px text-left">地址</div>
              </Checkbox>
              <div>{customer.address}</div>
            </div>
            <div className="flex flex-nowrap">
              <Checkbox value="ride">
                <div className="w-100px text-left">乘车路线</div>
              </Checkbox>
              <div>{customer.ride}</div>
            </div>
            <div className="flex flex-nowrap">
              <Checkbox value="landmarks">
                <div className="w-100px text-left">地标建筑</div>
              </Checkbox>
              <div>{customer.landmarks}</div>
            </div>
            <div className="flex flex-nowrap">
              <Checkbox value="stay">
                <div className="w-100px text-left">参考住宿</div>
              </Checkbox>
              <div>{customer.stay}</div>
            </div>
          </Checkbox.Group>
        </div>
        <div className={styles.tableSyncClient}>
          <Table
            rowKey="id"
            size="small"
            columns={columns}
            dataSource={client}
            pagination={false}
            scroll={{ y: 400 }}
            components={vList}
            rowSelection={{
              onChange: selectedRowKeys => setState({ ...state, selectedKeys: selectedRowKeys })
            }}
          />
        </div>
      </Modal>
    </>
  )
}

export default SyncClient