import consts from '@/consts'
import ProTable from '@ant-design/pro-table'
import { queryReminderList } from '@/services/dashboard'
import { useModal } from '@/components/ModalStore'
import { Modal } from 'antd'
const ReminderList = props => {
  const { dataType, reminderCyclical, ...resetModalProps } = props

  const dispatchModal = useModal()

  const clientColumns = [
    {
      title: '客户名称',
      dataIndex: 'clientName',
      ellipsis: true,
      width: '10%',
      render: (clientName, record) => (
        <span
          onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })}
          className="text-primary cursor-pointer hover:text-hex-967bbd">
          {clientName}
        </span>
      )
    },
    {
      title: '单位名称',
      dataIndex: 'companyName',
      width: '15%',
      ellipsis: true,
      render: (companyName, record) => (
        <span
          onClick={() =>
            dispatchModal('D_COMPANY_DETAIL', {
              dataId: record.companyId,
              orderIds: state.orderIds
            })
          }
          className="text-primary cursor-pointer hover:text-hex-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={() => dispatchModal('D_COMPANY_DETAIL', { dataId: 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={() => dispatchModal('D_BUSINESS_DETAIL', { dataId: record.id, orderIds: state.orderIds })}
          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: '商机' }
  }

  return (
    <Modal
      {...resetModalProps}
      title={titleMap[dataType].title}
      width="90vw"
      footer={false}
      getContainer={() => document.getElementById('root')}>
      <div className="mx-4">
        <ProTable
          size="small"
          rowKey={record => record.id}
          columns={dataMap[dataType].columns}
          params={{ dataType, reminderCyclical }}
          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>
    </Modal>
  )
}

export default ReminderList