canrd-main / canrd-erp-front · Files

import { postIntegralGroupExchangeRecords } from '@/services/request';
import { ModalForm, ProTable } from '@ant-design/pro-components';
import { Button, DatePicker, Space, Tabs, message } from 'antd';
import dayjs from 'dayjs';
import React, { useState } from 'react';
import '../index.less';

interface PointsExchangeRecordsModalProps {
  setVisible: (visible: boolean) => void;
  record: any;
}

// Define a type for the records data
type RecordsDataType = {
  exchangeRecords: any[];
  collectedRecords: any[];
  pendingRecords: any[];
};

const PointsExchangeRecordsModal: React.FC<PointsExchangeRecordsModalProps> = ({
  setVisible,
  record,
}) => {
  const [activeTab, setActiveTab] = useState('1');

  // Separate date ranges for each tab
  const [exchangeDateRange, setExchangeDateRange] = useState<any[]>([]);
  const [collectedDateRange, setCollectedDateRange] = useState<any[]>([]);
  const [pendingDateRange, setPendingDateRange] = useState<any[]>([]);

  const [loading, setLoading] = useState(false);
  const [recordsData, setRecordsData] = useState<RecordsDataType>({
    exchangeRecords: [], // 兑换记录
    collectedRecords: [], // 已领取积分
    pendingRecords: [], // 待领取积分
  });

  // Function to fetch records data from API with date parameters
  const fetchRecordsData = async (params: {
    startTime?: string | null;
    endTime?: string | null;
    tabKey: string;
  }) => {
    try {
      setLoading(true);
      const { startTime, endTime, tabKey } = params;

      // Prepare API request data
      const requestDto: any = {
        id: Number(record.id),
      };

      // Add date range if provided
      if (startTime) requestDto.startTime = startTime;
      if (endTime) requestDto.endTime = endTime;

      console.log(`Fetching data for tab: ${tabKey}`);

      // Use postIntegralGroupExchangeRecords instead of postIntegralUserExchangeRecords
      const response = await postIntegralGroupExchangeRecords({
        data: requestDto,
      });

      if (response && response.data) {
        // Update only the data for the active tab
        setRecordsData((prevData: RecordsDataType) => {
          const newData = { ...prevData };

          switch (tabKey) {
            case '1': // 兑换记录
              newData.exchangeRecords = response.data.exchangeRecords || [];
              break;
            case '2': // 已领取积分
              newData.collectedRecords = response.data.collectedRecords || [];
              break;
            case '3': // 待领取积分
              newData.pendingRecords = response.data.pendingRecords || [];
              break;
          }

          return newData;
        });
      } else {
        message.error('获取积分记录失败');
      }
    } catch (error) {
      console.error(error);
      message.error('获取积分记录失败');
    } finally {
      setLoading(false);
    }
  };

  // Initial data fetch for all tabs
  React.useEffect(() => {
    const loadAllTabs = async () => {
      try {
        setLoading(true);
        const requestDto = {
          id: Number(record.id),
        };

        const response = await postIntegralGroupExchangeRecords({
          data: requestDto,
        });

        if (response && response.data) {
          setRecordsData({
            exchangeRecords: response.data.exchangeRecords || [],
            collectedRecords: response.data.collectedRecords || [],
            pendingRecords: response.data.pendingRecords || [],
          });
        } else {
          message.error('获取积分记录失败');
        }
      } catch (error) {
        console.error(error);
        message.error('获取积分记录失败');
      } finally {
        setLoading(false);
      }
    };

    loadAllTabs();
  }, [record.id]);

  const handleTabChange = (key: string) => {
    setActiveTab(key);
  };

  // Get current date range based on active tab
  const getCurrentDateRange = () => {
    switch (activeTab) {
      case '1':
        return exchangeDateRange;
      case '2':
        return collectedDateRange;
      case '3':
        return pendingDateRange;
      default:
        return [];
    }
  };

  // Set date range for current tab
  const handleDateRangeChange = (dates: any) => {
    switch (activeTab) {
      case '1':
        setExchangeDateRange(dates);
        break;
      case '2':
        setCollectedDateRange(dates);
        break;
      case '3':
        setPendingDateRange(dates);
        break;
    }
  };

  const handleSearchClick = () => {
    const dateRange = getCurrentDateRange();
    // Only get the dates that are actually selected
    const startTime = dateRange?.[0]
      ? dayjs(dateRange[0]).format('YYYY-MM-DD')
      : null;
    const endTime = dateRange?.[1]
      ? dayjs(dateRange[1]).format('YYYY-MM-DD')
      : null;

    fetchRecordsData({
      startTime,
      endTime,
      tabKey: activeTab,
    });
  };

  const handleClearClick = () => {
    // Clear date range for current tab
    switch (activeTab) {
      case '1':
        setExchangeDateRange([]);
        break;
      case '2':
        setCollectedDateRange([]);
        break;
      case '3':
        setPendingDateRange([]);
        break;
    }

    // Fetch data without date filters
    fetchRecordsData({
      startTime: null,
      endTime: null,
      tabKey: activeTab,
    });
  };

  // 兑换记录表格列定义
  const exchangeColumns = [
    {
      title: '兑换日期',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 30,
    },
    {
      title: '扣除积分',
      dataIndex: 'delta',
      key: 'delta',
      width: 20,
    },
    {
      title: '操作人',
      dataIndex: 'createByName',
      key: 'createByName',
      width: 20,
    },
    {
      title: '积分用途',
      dataIndex: 'remark',
      key: 'remark',
      width: 100,
    },
  ];

  // 已领取积分表格列定义
  const collectedColumns = [
    {
      title: '订单号',
      dataIndex: 'sourceId',
      key: 'sourceId',
    },
    {
      title: '领取积分',
      dataIndex: 'delta',
      key: 'delta',
    },
    {
      title: '领取日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  // 待领取积分表格列定义
  const pendingColumns = [
    {
      title: '订单号',
      dataIndex: 'sourceId',
      key: 'sourceId',
    },
    {
      title: '领取积分',
      dataIndex: 'delta',
      key: 'delta',
    },
    {
      title: '过期日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  // Render date picker and search buttons for current tab
  const renderDateRangePicker = () => {
    return (
      <Space style={{ marginBottom: 16 }}>
        <DatePicker.RangePicker
          value={getCurrentDateRange()}
          onChange={handleDateRangeChange}
          allowEmpty={[true, true]}
        />
        <Button type="primary" onClick={handleSearchClick}>
          搜索
        </Button>
        <Button onClick={handleClearClick}>重置</Button>
      </Space>
    );
  };

  return (
    <div className="prepaid-index">
      <ModalForm
        width={1000}
        open
        title="积分兑换记录"
        submitter={false}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false);
          },
        }}
      >
        <Tabs activeKey={activeTab} onChange={handleTabChange}>
          <Tabs.TabPane tab="兑换记录" key="1">
            {renderDateRangePicker()}
            <ProTable
              headerTitle={false}
              search={false}
              options={false}
              pagination={{
                pageSize: 10,
              }}
              loading={loading && activeTab === '1'}
              dataSource={recordsData.exchangeRecords}
              columns={exchangeColumns}
              rowKey="id"
            />
          </Tabs.TabPane>
          <Tabs.TabPane tab="已领取积分" key="2">
            {renderDateRangePicker()}
            <ProTable
              headerTitle={false}
              search={false}
              options={false}
              pagination={{
                pageSize: 10,
              }}
              loading={loading && activeTab === '2'}
              dataSource={recordsData.collectedRecords}
              columns={collectedColumns}
              rowKey="id"
            />
          </Tabs.TabPane>
          <Tabs.TabPane tab="待领取积分" key="3">
            {renderDateRangePicker()}
            <ProTable
              headerTitle={false}
              search={false}
              options={false}
              pagination={{
                pageSize: 10,
              }}
              loading={loading && activeTab === '3'}
              dataSource={recordsData.pendingRecords}
              columns={pendingColumns}
              rowKey="id"
            />
          </Tabs.TabPane>
        </Tabs>
      </ModalForm>
    </div>
  );
};

export default PointsExchangeRecordsModal;