canrd-main / canrd-erp-front · Files

import { postIntegralUserExchangeRecords } from '@/services';
import { formatDateTime } from '@/utils';
import { Empty, Modal, Table, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import '../index.less';

interface PointsExchangeRecordsModalProps {
  setVisible: (visible: boolean) => void;
  userInfoObj: {
    uid: string;
    phone?: string;
    nickname?: string;
    realName?: string;
    [key: string]: any;
  };
  onClose: () => void;
}

interface RecordItem {
  createByName: string | null;
  createTime: string;
  delta: number;
  remark: string | null;
  sourceId: string | null;
}

interface RecordsData {
  exchangeRecords: RecordItem[];
  collectedRecords: RecordItem[];
  pendingRecords: RecordItem[];
}

const PointsExchangeRecordsModal: React.FC<PointsExchangeRecordsModalProps> = ({
  setVisible,
  userInfoObj,
  onClose,
}) => {
  const [activeTab, setActiveTab] = useState<string>('1');
  const [loading, setLoading] = useState<boolean>(false);
  const [recordsData, setRecordsData] = useState<RecordsData>({
    exchangeRecords: [],
    collectedRecords: [],
    pendingRecords: [],
  });

  const uid = userInfoObj?.uid;
  const phone = userInfoObj?.phone;

  // Function to fetch records data from API
  const fetchRecordsData = async () => {
    try {
      setLoading(true);
      const response = await postIntegralUserExchangeRecords({
        data: {
          id: Number(uid),
          phone: phone,
        },
      });

      if (response && response.data) {
        setRecordsData({
          exchangeRecords: response.data.exchangeRecords || [],
          collectedRecords: response.data.collectedRecords || [],
          pendingRecords: response.data.pendingRecords || [],
        });
      }
    } catch (error) {
      console.error('Failed to fetch exchange records:', error);
    } finally {
      setLoading(false);
    }
  };

  // Fetch records data when component mounts
  useEffect(() => {
    if (uid || phone) {
      fetchRecordsData();
    }
  }, [uid, phone]);
  // Exchange records columns
  const exchangeRecordsColumns = [
    {
      title: '兑换日期',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text: string) => formatDateTime(text),
    },
    {
      title: '扣除积分',
      dataIndex: 'delta',
      key: 'delta',
      render: (delta: number) => (
        <span style={{ color: delta < 0 ? 'red' : 'green' }}>{delta}</span>
      ),
    },
    {
      title: '操作人',
      dataIndex: 'createByName',
      key: 'createByName',
      render: (text: string | null) => text || '-',
    },
    {
      title: '积分用途',
      dataIndex: 'remark',
      key: 'remark',
      render: (text: string | null) => text || '-',
    },
  ];

  // Collected records columns
  const collectedRecordsColumns = [
    {
      title: '订单号',
      dataIndex: 'sourceId',
      key: 'sourceId',
      render: (text: string | null) => text || '-',
    },
    {
      title: '领取积分',
      dataIndex: 'delta',
      key: 'delta',
      render: (delta: number) => (
        <span style={{ color: delta > 0 ? 'green' : 'red' }}>{delta}</span>
      ),
    },
    {
      title: '领取日期',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text: string) => formatDateTime(text),
    },
  ];

  // Pending records columns
  const pendingRecordsColumns = [
    {
      title: '订单号',
      dataIndex: 'sourceId',
      key: 'sourceId',
      render: (text: string | null) => text || '-',
    },
    {
      title: '领取积分',
      dataIndex: 'delta',
      key: 'delta',
      render: (delta: number) => (
        <span style={{ color: delta > 0 ? 'green' : 'red' }}>{delta}</span>
      ),
    },
    {
      title: '过期日期',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text: string) => formatDateTime(text),
    },
  ];

  // Tab items
  const tabItems = [
    {
      key: '1',
      label: '兑换记录',
      children: (
        <Table
          columns={exchangeRecordsColumns}
          dataSource={recordsData.exchangeRecords.map((item, index) => ({
            ...item,
            key: `exchange-${index}`,
          }))}
          pagination={{ pageSize: 5 }}
          loading={loading && activeTab === '1'}
          locale={{
            emptyText: <Empty description="暂无兑换记录" />,
          }}
        />
      ),
    },
    {
      key: '2',
      label: '已领取积分',
      children: (
        <Table
          columns={collectedRecordsColumns}
          dataSource={recordsData.collectedRecords.map((item, index) => ({
            ...item,
            key: `collected-${index}`,
          }))}
          pagination={{ pageSize: 5 }}
          loading={loading && activeTab === '2'}
          locale={{
            emptyText: <Empty description="暂无已领取积分记录" />,
          }}
        />
      ),
    },
    {
      key: '3',
      label: '待领取积分',
      children: (
        <Table
          columns={pendingRecordsColumns}
          dataSource={recordsData.pendingRecords.map((item, index) => ({
            ...item,
            key: `pending-${index}`,
          }))}
          pagination={{ pageSize: 5 }}
          loading={loading && activeTab === '3'}
          locale={{
            emptyText: <Empty description="暂无待领取积分记录" />,
          }}
        />
      ),
    },
  ];

  return (
    <Modal
      open={true}
      title="积分兑换记录"
      width={800}
      onCancel={() => {
        setVisible(false);
        onClose();
      }}
      footer={null}
      destroyOnClose
    >
      <Tabs
        activeKey={activeTab}
        onChange={(key) => setActiveTab(key)}
        items={tabItems}
      />
    </Modal>
  );
};

export default PointsExchangeRecordsModal;