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

import React, { useState } from 'react'
import ProTable from '@ant-design/pro-table'
import CustomModal from '@/components/Modal/src/components/CustomModal'
import { queryRatioPanelsList, queryServiceRatioPanelsList } from '@/services/dashboard'
import consts from '@/consts'
import { servicelogEnum } from '@/pages/Customer/Company/components/CompanyDetail/LowerList'
// import ClientDetail from '@/pages/Customer/Client/components/ClientDetail'
import { Badge } from 'antd'
import { cardTypeMap } from '../consts'
// import { useModal } from '@/components/Modal'

const dataTypeEunm = {
  0: {
    key: 'client',
    title: '新增联系人'
  },
  1: {
    key: 'customer',
    title: '新增客户'
  },
  2: {
    key: 'business',
    title: '新增商机'
  },
  3: {
    key: 'service',
    title: '新增服务记录'
  }
}

const renderBadge = (count, active = false) => {
  return active ? (
    <Badge
      count={count}
      style={{
        marginTop: -2,
        marginLeft: 4,
        color: '#531dab',
        backgroundColor: '#f9f0ff'
      }}
    />
  ) : null
}

/** 服务环比数据Tab切换表格 */
const ServiceRatioPanels = ({ staffIds, cyclical, dataPermission }) => {
  const activeKeyMap = {
    0: { key: 'clientName', title: '联系人' },
    1: { key: 'customerName', title: '客户' },
    2: { key: 'businessName', title: '商机' }
  }
  const [state, setState] = useState({
    activeKey: '0',
    total: 0
  })
  const columns = [
    {
      dataIndex: activeKeyMap[state.activeKey].key,
      title: `${activeKeyMap[state.activeKey].title}名称`,
      width: '20%'
    },
    {
      dataIndex: 'status',
      title: '服务类型',
      width: '15%',
      render: type => servicelogEnum[type]
    },
    {
      dataIndex: 'date',
      title: '服务日期',
      width: '15%',
      valueType: 'date'
    },
    {
      dataIndex: 'mark',
      width: '45%',
      title: '服务内容'
    }
  ]

  return (
    <ProTable
      size="small"
      params={{ dataType: state.activeKey, cyclical, dataPermission, staffIds }}
      rowKey={record => record.id}
      scroll={{ y: 400 }}
      border={true}
      columns={columns}
      search={false}
      toolbar={{
        settings: false,
        menu: {
          type: 'tab',
          activeKey: state.activeKey,
          items: [
            {
              key: '0',
              label: (
                <span>
                  联系人
                  {renderBadge(state.total, state.activeKey === '0')}
                </span>
              )
            },
            {
              key: '1',
              label: (
                <span>
                  客户
                  {renderBadge(state.total, state.activeKey === '1')}
                </span>
              )
            },
            {
              key: '2',
              label: (
                <span>
                  商机
                  {renderBadge(state.total, state.activeKey === '2')}
                </span>
              )
            }
          ],
          onChange: key => {
            setState({ ...state, activeKey: key })
            // redoHeight()
          }
        }
      }}
      pagination={{ defaultPageSize: 10, showQuickJumper: true }}
      request={async params => {
        const { code = -1, data } = await queryServiceRatioPanelsList(params)
        setState({ ...state, total: data.total || 0 })
        return {
          data: data.log,
          success: code === consts.RET_CODE.SUCCESS,
          total: data.total
        }
      }}
    />
  )
}

const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission }) => {
  // const { toggleDrawer, setDrawerProps } = useModal()
  // const [state, setState] = useState({
  //   orderIds: []
  // })
  // const showDrawer = id => {
  //   setDrawerProps({
  //     zIndex: '1200',
  //     closable: true,
  //     onClose: () => toggleDrawer(),
  //     bodyStyle: {
  //       height: '100vh',
  //       overflowY: 'hidden'
  //     },
  //     children: <ClientDetail dataId={id} orderIds={state.orderIds} />
  //   })
  //   toggleDrawer()
  // }
  const columnsMap = {
    0: [
      {
        dataIndex: 'clientName',
        title: '联系人名称',
        width: '13%',
        render: (clientName, record) => (
          <span
            onClick={() => showDrawer(record.id)}
            className="text-primary cursor-pointer hover:text-[#967bbd]">
            {clientName}
          </span>
        )
      },
      {
        dataIndex: 'companyName',
        title: '客户名称',
        width: '20%'
      },
      {
        dataIndex: 'districtName',
        title: '地区',
        width: '15%'
      },
      {
        dataIndex: 'phone',
        title: '手机',
        width: '5%'
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        width: '7%'
      },
      {
        dataIndex: 'qq',
        title: 'QQ',
        width: '5%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        width: '7%'
      }
    ],
    1: [
      {
        dataIndex: 'companyName',
        title: '客户名称',
        width: '20%'
      },
      {
        dataIndex: 'districtName',
        title: '地区',
        width: '15%'
      },
      {
        dataIndex: 'nature',
        title: '客户性质',
        ellipsis: true,
        width: '15%'
      },
      {
        dataIndex: 'phone',
        title: '客户电话',
        width: '5%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        width: '10%'
      }
    ],
    2: [
      {
        dataIndex: 'name',
        title: '商机名称',
        width: '15%'
      },
      {
        dataIndex: 'customerName',
        title: '客户名称',
        width: '20%'
      },
      {
        dataIndex: 'businessStatusName',
        title: '商机状态',
        width: '5%'
      },
      {
        dataIndex: 'price',
        title: '商机金额',
        width: '5%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        width: '7%'
      }
    ]
  }

  return (
    <CustomModal title={`卡片详情(${dataTypeEunm[dataType].title})`}>
      <div className="pb-4">
        {dataType === cardTypeMap.SERVICE ? (
          <ServiceRatioPanels
            cyclical={retioCyclical}
            dataPermission={dataPermission}
            staffIds={staffIds}
          />
        ) : (
          <div className="mx-4">
            <ProTable
              size="small"
              border={true}
              pagination={{ defaultPageSize: 10 }}
              rowKey={record => record.id}
              scroll={{ y: 400 }}
              columns={columnsMap[dataType]}
              params={{ dataType, dataPermission, cyclical: retioCyclical, staffIds }}
              request={async params => {
                const { code = -1, data } = await queryRatioPanelsList(params)
                return {
                  data: data[dataTypeEunm[dataType].key],
                  success: code === consts.RET_CODE.SUCCESS,
                  total: data.total
                }
              }}
              search={false}
              toolBarRender={false}
            />
          </div>
        )}
      </div>
      {/* <div className={styles.modalFooter}>
        <div className="text-right">
          <Button type="button" onClick={closeModal}>
            关闭
          </Button>
        </div>
      </div> */}
    </CustomModal>
  )
}

export default RatioPanels