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 } from 'antd'
import { useState } from 'react'
import { useDispatch } from 'umi'
import { Table } from '@arco-design/web-react'
import '@arco-design/web-react/dist/css/arco.css'
import styles from './index.less'

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

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

  // eslint-disable-next-line consistent-return
  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: '参考住宿',
      // width: '15%',
      ellipsis: true
    }
  ]

  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>
        {/* <div className="flex items-center justify-center">
        </div> */}
      </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
            virtualized
            rowKey="id"
            scroll={{ y: 400 }}
            border={false}
            columns={columns}
            data={client}
            pagination={false}
            rowSelection={{
              pureKeys: true,
              onChange: selectedRowKeys => setState({ ...state, selectedKeys: selectedRowKeys })
            }}
          />
        </div>
        {/* <Table
          rowKey="id"
          size="small"
          columns={columns}
          dataSource={client}
          bordered
          scroll={{ y: 400 }}
          pagination={false}
          rowSelection={{
            onChange: selectedRowKeys => setState({ ...state, selectedKeys: selectedRowKeys })
          }}
        /> */}
      </Modal>
    </>
  )
}

export default SyncClient