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 CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
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 { toggleDrawer, setDrawerProps } = useModal()
  const activeKeyMap = {
    0: { key: 'clientName', title: '客户', id: 'clientId' },
    1: { key: 'customerName', title: '单位', id: 'customerId' },
    2: { key: 'businessName', title: '商机', id: 'businessId' }
  }
  const [state, setState] = useState({
    orderIds: [],
    activeKey: '0',
    total: 0
  })
  const showDrawer = id => {
    let children = null
    if (state.activeKey === '0') {
      children = <ClientDetail dataId={id} orderIds={state.orderIds} />
    }
    if (state.activeKey === '1') {
      children = <CompanyDetail dataId={id} orderIds={state.orderIds} />
    }
    setDrawerProps({
      zIndex: 1001,
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children
    })
    toggleDrawer()
  }
  const columns = [
    {
      dataIndex: activeKeyMap[state.activeKey].key,
      title: `${activeKeyMap[state.activeKey].title}名称`,
      width: '15%',
      render: (text, record) => (
        <span
          onClick={() => showDrawer(record[activeKeyMap[state.activeKey].id])}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {text}
        </span>
      )
    },
    {
      dataIndex: 'status',
      title: '服务类型',
      width: '8%',
      render: type => servicelogEnum[type]
    },
    {
      dataIndex: 'date',
      title: '服务日期',
      width: '9%',
      valueType: 'date'
    },
    {
      dataIndex: 'mark',
      width: '38%',
      ellipsis: true,
      title: '服务内容'
    },
    {
      dataIndex: 'staffName',
      title: '创建人',
      width: '7%'
    }
  ]

  return (
    <ProTable
      size="small"
      params={{ dataType: state.activeKey, cyclical, dataPermission, staffIds }}
      rowKey={record => record.id}
      scroll={{ y: 400 }}
      bordered={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 = {
    orderIds: []
  }
  const showDrawer = id => {
    setDrawerProps({
      zIndex: 1001,
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <ClientDetail 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 columnsMap = {
    0: [
      {
        dataIndex: 'clientName',
        title: '客户名称',
        width: '10%',
        render: (clientName, record) => (
          <span
            onClick={() => showDrawer(record.id)}
            className="text-primary cursor-pointer hover:text-[#967bbd]">
            {clientName}
          </span>
        )
      },
      {
        dataIndex: 'companyName',
        title: '单位名称',
        ellipsis: true,
        width: '16%'
      },
      {
        dataIndex: 'districtName',
        title: '地区',
        width: '15%',
        ellipsis: true,
        renderText: text => text && text?.replaceAll(' / ', ' , ')
      },
      {
        dataIndex: 'phone',
        title: '手机',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'qq',
        title: 'QQ',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'staffName',
        title: '创建人',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        ellipsis: true,
        width: '7%'
      }
    ],
    1: [
      {
        dataIndex: 'companyName',
        title: '单位名称',
        width: '16%',
        render: (companyName, record) => (
          <span
            onClick={() => showDrawerComapny(record.id)}
            className="text-primary cursor-pointer hover:text-[#967bbd]">
            {companyName}
          </span>
        )
      },
      {
        dataIndex: 'districtName',
        title: '地区',
        width: '15%',
        ellipsis: true,
        renderText: text => text && text?.replaceAll(' / ', ' , ')
      },
      {
        dataIndex: 'nature',
        title: '单位性质',
        ellipsis: true,
        width: '14%'
      },
      {
        dataIndex: 'phone',
        title: '单位电话',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'staffName',
        title: '创建人',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        ellipsis: true,
        width: '7%'
      }
    ],
    2: [
      {
        dataIndex: 'name',
        title: '商机名称',
        width: '15%'
      },
      {
        dataIndex: 'customerName',
        title: '单位名称',
        ellipsis: true,
        width: '20%'
      },
      {
        dataIndex: 'businessStatusName',
        title: '商机状态',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'price',
        title: '商机金额',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'staffName',
        title: '创建人',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        ellipsis: true,
        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"
              bordered={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