cldV2react/src/pages/workbench/Dashboard/components/ReminderList.jsx

import React from 'react'
import { Button } from 'antd'
import consts from '@/consts'
import { useDispatch, connect } from 'umi'
import ProTable from '@ant-design/pro-table'
import { queryReminderList } from '@/services/dashboard'
import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
import CustomModal from '@/components/Modal/src/components/CustomModal'

const ReminderList = props => {
  const dispatch = useDispatch()
  const { dataType, reminderCyclical } = props
  // const [state, setState] = useState({
  //   params: { dataType, reminderCyclical }
  // })
  const clientColumns = [
    {
      title: '客户名称',
      dataIndex: 'clientName',
      width: '7%'
    },
    {
      title: '地区',
      dataIndex: 'districtName',
      width: '12%'
    },
    {
      title: '手机',
      dataIndex: 'telephone',
      width: '10%'
    },
    {
      title: '服务日期',
      dataIndex: 'serviceDate',
      width: '10%'
    },
    {
      title: '服务内容',
      dataIndex: 'serviceContent',
      width: '27%',
      ellipsis: true
    },
    {
      title: '备忘时间',
      dataIndex: 'memoDate',
      width: '10%'
    },
    {
      title: '备忘内容',
      dataIndex: 'memoContent',
      width: '27%',
      ellipsis: true
    }
  ]
  const customerColumns = [
    {
      title: '单位名称',
      dataIndex: 'companyName',
      width: '15%'
    },
    {
      title: '地区',
      dataIndex: 'districtName',
      width: '12%'
    },
    {
      title: '电话',
      dataIndex: 'phone',
      width: '10%'
    },
    {
      title: '服务日期',
      dataIndex: 'serviceDate',
      width: '10%'
    },
    {
      title: '服务内容',
      dataIndex: 'serviceContent',
      width: '25%',
      ellipsis: true
    },
    {
      title: '备忘时间',
      dataIndex: 'memoDate',
      width: '10%'
    },
    {
      title: '备忘内容',
      dataIndex: 'memoContent',
      width: '25%',
      ellipsis: true
    }
  ]
  const businessColumns = [
    {
      title: '商机名称',
      dataIndex: 'name',
      width: '15%'
    },
    {
      title: '单位名称',
      dataIndex: 'customerName',
      width: '15%'
    },
    {
      title: '服务日期',
      dataIndex: 'serviceDate',
      width: '10%'
    },
    {
      title: '服务内容',
      dataIndex: 'serviceContent',
      width: '25%',
      ellipsis: true
    },
    {
      title: '备忘时间',
      dataIndex: 'memoDate',
      width: '10%'
    },
    {
      title: '备忘内容',
      dataIndex: 'memoContent',
      width: '25%',
      ellipsis: true
    }
  ]
  const dataMap = {
    0: {
      key: 'client',
      columns: clientColumns
    },
    1: {
      key: 'customer',
      columns: customerColumns
    },
    2: {
      key: 'business',
      columns: businessColumns
    }
  }

  const titleMap = {
    0: { title: '客户' },
    1: { title: '单位' },
    2: { title: '商机' }
  }

  const closeModal = () => {
    dispatch({
      type: 'single/changeModal'
    })
  }

  return (
    <CustomModal title={titleMap[dataType].title}>
      <div className="mx-4">
        <ProTable
          size="small"
          rowKey={record => record.id}
          columns={dataMap[dataType].columns}
          params={{ dataType, reminderCyclical }}
          scroll={{ y: 400 }}
          request={async params => {
            const { code = -1, data } = await queryReminderList({ ...params })
            return {
              data: data[dataMap[dataType].key],
              success: code === consts.RET_CODE.SUCCESS,
              total: data.total
            }
          }}
          scroll={{ y: 400 }}
          pagination={{ defaultPageSize: 10 }}
          search={false}
          toolBarRender={false}
        />
      </div>
      <div className={styles.modalFooter}>
        <div className="text-right">
          <Button type="button" onClick={closeModal}>
            关闭
          </Button>
        </div>
      </div>
    </CustomModal>
  )
}

export default connect(({ single }) => ({
  visible: single.drawer.visible
}))(ReminderList)