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

import ProTable from '@ant-design/pro-table'
import { Select, Card } from 'antd'
import Iconfont from '@/components/SvgIcon'
import React, { useState, useMemo } from 'react'

const { Option } = Select

const opMap = {
  customer: '新增单位',
  customerService: '单位服务',
  client: '新增客户',
  clientService: '客户服务',
  business: '新增商机',
  businessService: '商机服务'
}
const colorMap = {
  1: 'text-hex-ffc241',
  2: 'text-hex-1dc9b7',
  3: 'text-hex-868e96'
}
const LeaderBoard = ({ loading = false, dataList = [] }) => {
  const [activeOp, setActiveOp] = useState('customer')
  const columns = useMemo(() => {
    const oColumns = [
      {
        title: '排名',
        dataIndex: 'rank',
        align: 'center',
        width: '30%',
        render: (_, record) =>
          record.rank <= 3 ? <Iconfont type="icon-trophy" className={colorMap[record.rank]} /> : ''
      },
      {
        title: '姓名',
        dataIndex: `${activeOp}Name`,
        align: 'center',
        width: '40%'
      },
      {
        title: '新增单位数',
        dataIndex: 'customer',
        align: 'center',
        width: '30%'
      },
      {
        title: '单位服务',
        dataIndex: 'customerService',
        align: 'center',
        width: '30%'
      },
      {
        title: '新增客户',
        dataIndex: 'client',
        align: 'center',
        width: '30%'
      },
      {
        title: '客户服务',
        dataIndex: 'clientService',
        align: 'center',
        width: '30%'
      },
      {
        title: '新增商机',
        dataIndex: 'business',
        align: 'center',
        width: '30%'
      },
      {
        title: '商机服务',
        dataIndex: 'businessService',
        align: 'center',
        width: '30%'
      }
    ]

    let stop = false
    const bColumns = oColumns.reduce((prev, curr, idx) => {
      if (idx < 2) {
        prev.push(curr)
        return prev
      }

      if (!stop && curr.dataIndex.startsWith(activeOp)) {
        stop = true
        prev.push(curr)
        return prev
      }
      return prev
    }, [])
    return bColumns
  }, [activeOp])

  return (
    <Card
      loading={loading}
      bodyStyle={{ padding: loading ? '24px' : 0 }}
      className="shadow-card"
      title={
        <div className="px-4 pt-2 pb-0 flex items-center justify-between">
          <span>排行榜</span>
          <Select defaultValue="client" onChange={e => setActiveOp(e)}>
            <Option value="client">新增客户</Option>
            <Option value="clientService">客户服务</Option>
            <Option value="customer">新增单位</Option>
            <Option value="customerService">单位服务</Option>
            <Option value="business">新增商机</Option>
            <Option value="businessService">商机服务</Option>
            {/* <Option value="开票金额">开票金额</Option>
      <Option value="回款金额">回款金额</Option> */}
          </Select>
        </div>
      }>
      <div className="text-center border border-x-0 p-2">{opMap[activeOp]}排行榜</div>
      <ProTable
        border={true}
        rowKey={record => record.rank}
        columns={columns}
        dataSource={dataList}
        search={false}
        size="small"
        toolBarRender={false}
        pagination={false}
      />
    </Card>
  )
}

export default LeaderBoard