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

import React, { useState } from 'react'
import consts from '@/consts'
import { connect } from 'umi'
import ProTable from '@ant-design/pro-table'
import { useModal } from '@/components/Modal'
import { queryReminderList } from '@/services/dashboard'
// import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
import CustomModal from '@/components/Modal/src/components/CustomModal'
import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
import Detail from '@/pages/Customer/Business/components/BusinessDetail'

const ReminderList = props => {
  // const dispatch = useDispatch()
  const { dataType, reminderCyclical } = props
  const { toggleDrawer, setDrawerProps } = useModal()
  const [state] = useState({
    orderIds: []
  })
  // const [state, setState] = useState({
  //   params: { dataType, reminderCyclical }
  // })
  // 展示客户
  const showDrawer = id => {
    setDrawerProps({
      zIndex: 1001,
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh'
        // overflowY: 'hidden'
      },
      children: <ContactDetail dataId={id} orderIds={state.orderIds} />
    })
    toggleDrawer()
  }
  // 展示单位
  const showDrawerComapny = id => {
    setDrawerProps({
      zIndex: 1001,
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh'
        // overflowY: 'hidden'
      },
      children: <CompanyDetail dataId={id} orderIds={state.orderIds} />
    })
    toggleDrawer()
  }
  // 展示商机详情
  const showDrawerBusiness = (id, isCompany = false) => {
    setDrawerProps({
      zIndex: 1001,
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: isCompany ? (
        <CompanyDetail dataId={id} />
      ) : (
        <Detail dataId={id} orderIds={state.orderIds} />
      )
    })
    toggleDrawer()
  }
  const clientColumns = [
    {
      title: '客户名称',
      dataIndex: 'clientName',
      ellipsis: true,
      width: '10%',
      render: (clientName, record) => (
        <span
          onClick={() => showDrawer(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {clientName}
        </span>
      )
    },
    {
      title: '单位名称',
      dataIndex: 'companyName',
      width: '15%',
      ellipsis: true,
      render: (companyName, record) => (
        <span
          onClick={() => showDrawerComapny(record.companyId)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {companyName}
        </span>
      )
    },
    {
      title: '地区',
      dataIndex: 'districtName',
      ellipsis: true,
      width: '15%',
      renderText: text => text?.replaceAll(' / ', ' , ')
    },
    {
      title: '手机',
      dataIndex: 'telephone',
      ellipsis: true,
      width: '10%'
    },
    {
      title: '服务日期',
      dataIndex: 'serviceDate',
      ellipsis: true,
      width: '8%'
    },
    {
      title: '服务内容',
      dataIndex: 'serviceContent',
      width: '26%',
      ellipsis: true
    },
    {
      title: '备忘时间',
      dataIndex: 'memoDate',
      width: '10%',
      ellipsis: true
    },
    {
      title: '备忘内容',
      dataIndex: 'memoContent',
      width: '27%',
      ellipsis: true
    }
  ]
  const customerColumns = [
    {
      title: '单位名称',
      dataIndex: 'companyName',
      width: '15%',
      ellipsis: true,
      render: (companyName, record) => (
        <span
          onClick={() => showDrawerComapny(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {companyName}
        </span>
      )
    },
    {
      title: '地区',
      dataIndex: 'districtName',
      width: '15%',
      ellipsis: true,
      renderText: text => text?.replaceAll(' / ', ' , ')
    },
    {
      title: '电话',
      dataIndex: 'phone',
      width: '10%',
      ellipsis: true
    },
    {
      title: '服务日期',
      dataIndex: 'serviceDate',
      width: '8%',
      ellipsis: true
    },
    {
      title: '服务内容',
      dataIndex: 'serviceContent',
      width: '24%',
      ellipsis: true
    },
    {
      title: '备忘时间',
      dataIndex: 'memoDate',
      width: '10%',
      ellipsis: true
    },
    {
      title: '备忘内容',
      dataIndex: 'memoContent',
      width: '22%',
      ellipsis: true
    }
  ]
  const businessColumns = [
    {
      title: '商机名称',
      dataIndex: 'name',
      width: '15%',
      ellipsis: true,
      render: (text, record) => (
        <span
          onClick={() => showDrawerBusiness(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {text}
        </span>
      )
    },
    {
      title: '单位名称',
      dataIndex: 'customerName',
      width: '15%',
      ellipsis: true
    },
    {
      title: '服务日期',
      dataIndex: 'serviceDate',
      width: '8%',
      ellipsis: true
    },
    {
      title: '服务内容',
      dataIndex: 'serviceContent',
      width: '27%',
      ellipsis: true
    },
    {
      title: '备忘时间',
      dataIndex: 'memoDate',
      width: '10%',
      ellipsis: true
    },
    {
      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)