cangku/frontend/src/pages/MarketingEvents/index.jsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  Button,
  DatePicker,
  Form,
  Input,
  Segmented,
  Select,
  Spin,
  Table,
  Tag,
} from 'antd';
import {
  ReloadOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import { SycmBusinessPanel, SycmDashboardMetric, SycmPage } from '../../components/Common';
import {
  getMarketingEventsList,
  getMarketingEventsLatestDate,
  getMarketingEventsSummary,
} from '../../api/marketingEvents';
import './style.css';

const { RangePicker } = DatePicker;

function formatTimestamp(ts) {
  if (!ts) return '-';
  const num = Number(ts);
  if (!Number.isFinite(num)) return '-';
  const date = new Date(num > 1e12 ? num : num * 1000);
  if (Number.isNaN(date.getTime())) return '-';
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, '0');
  const d = String(date.getDate()).padStart(2, '0');
  const hh = String(date.getHours()).padStart(2, '0');
  const mm = String(date.getMinutes()).padStart(2, '0');
  return `${y}-${m}-${d} ${hh}:${mm}`;
}

function formatPrice(value) {
  if (value === null || value === undefined || value === '') return '-';
  const num = Number(value);
  if (!Number.isFinite(num)) return '-';
  return `¥${num.toFixed(2)}`;
}

function formatNumber(value) {
  if (value === null || value === undefined) return '-';
  const num = Number(value);
  if (!Number.isFinite(num)) return '-';
  return num.toLocaleString('zh-CN');
}

const STATUS_MAP = {
  501: { label: '报名成功', color: 'success' },
  502: { label: '审核中', color: 'processing' },
  503: { label: '已拒绝', color: 'error' },
  504: { label: '已取消', color: 'default' },
  505: { label: '已结束', color: 'warning' },
};

function getStatusInfo(status) {
  if (STATUS_MAP[status]) return STATUS_MAP[status];
  return { label: `状态 ${status}`, color: 'default' };
}

const MarketingEvents = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);
  const [statusCounts, setStatusCounts] = useState({ all: 0 });
  const [pagination, setPagination] = useState({ current: 1, pageSize: 20 });
  const [sorter, setSorter] = useState({ field: 'activity_goods_start_time', order: 'descend' });
  const [statusFilter, setStatusFilter] = useState('all');
  const [groupByGoods, setGroupByGoods] = useState(true);
  const [queryFilters, setQueryFilters] = useState({});
  const [latestDate, setLatestDate] = useState('');
  const [summary, setSummary] = useState(null);
  const [summaryLoading, setSummaryLoading] = useState(false);

  const fetchLatestDate = useCallback(async () => {
    try {
      const res = await getMarketingEventsLatestDate();
      if (res?.data?.date) {
        setLatestDate(res.data.date);
        return res.data.date;
      }
    } catch {
      // 忽略错误
    }
    return '';
  }, []);

  const fetchSummary = useCallback(async (date) => {
    setSummaryLoading(true);
    try {
      const res = await getMarketingEventsSummary({ date });
      if (res?.data) {
        setSummary(res.data);
      }
    } catch {
      setSummary(null);
    } finally {
      setSummaryLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchLatestDate().then((date) => {
      if (date) fetchSummary(date);
    });
  }, [fetchLatestDate, fetchSummary]);

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const params = {
        page: pagination.current,
        pageSize: pagination.pageSize,
        sortBy: sorter.field,
        sortOrder: sorter.order === 'ascend' ? 'ASC' : 'DESC',
        ...queryFilters,
      };
      if (statusFilter !== 'all') {
        params.status = statusFilter;
      }
      const result = await getMarketingEventsList(params);
      const data = result?.data;
      if (data) {
        setDataSource(data.list || []);
        setTotal(data.total || 0);
        if (data.statusCounts) {
          setStatusCounts(data.statusCounts);
        }
        if (data.filterDate) {
          setLatestDate(data.filterDate);
          fetchSummary(data.filterDate);
        }
      }
    } catch {
      setDataSource([]);
      setTotal(0);
    } finally {
      setLoading(false);
    }
  }, [pagination, sorter, statusFilter, queryFilters, fetchSummary]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  const handleTableChange = (pag, _filters, sort) => {
    setPagination({ current: pag.current, pageSize: pag.pageSize });
    if (sort.field) {
      setSorter({ field: sort.field, order: sort.order || 'descend' });
    }
  };

  const handleReset = () => {
    form.resetFields();
    setQueryFilters({});
    setStatusFilter('all');
    setPagination({ current: 1, pageSize: 20 });
    setSorter({ field: 'activity_goods_start_time', order: 'descend' });
  };

  const handleFinish = (values) => {
    const filters = {};
    if (values.shopName) filters.shopName = values.shopName;
    if (values.activityType) filters.activityType = values.activityType;
    if (values.activityName) filters.activityName = values.activityName;
    if (values.activityId) filters.activityId = values.activityId;
    if (values.goodsName) filters.goodsName = values.goodsName;
    if (values.goodsId) filters.goodsId = values.goodsId;
    if (values.dateRange?.length === 2) {
      filters.dateStart = values.dateRange[0].format('YYYY-MM-DD');
      filters.dateEnd = values.dateRange[1].format('YYYY-MM-DD');
    }
    setQueryFilters(filters);
    setPagination((prev) => ({ ...prev, current: 1 }));
  };

  const statusOptions = useMemo(() => [
    { label: `全部 ${statusCounts.all || 0}`, value: 'all' },
    { label: `报名成功 ${statusCounts[501] || 0}`, value: 501 },
    { label: `审核中 ${statusCounts[502] || 0}`, value: 502 },
    { label: `已拒绝 ${statusCounts[503] || 0}`, value: 503 },
    { label: `已取消 ${statusCounts[504] || 0}`, value: 504 },
    { label: `已结束 ${statusCounts[505] || 0}`, value: 505 },
  ], [statusCounts]);

  // 按商品聚合：同一商品多个活动时，最低价活动作为主行优先展示，其余折叠进展开行
  const displayData = useMemo(() => {
    const priceOf = (row) => {
      const num = Number(row?.minPrice);
      return Number.isFinite(num) ? num : Number.POSITIVE_INFINITY;
    };
    if (!groupByGoods) {
      return dataSource.map((row) => ({ ...row, activityCount: 1, childActivities: null }));
    }
    const groups = new Map();
    dataSource.forEach((row) => {
      const key = String(row.goodsId || row.id);
      if (!groups.has(key)) groups.set(key, []);
      groups.get(key).push(row);
    });
    const list = [];
    groups.forEach((rows) => {
      const sorted = [...rows].sort((left, right) => priceOf(left) - priceOf(right));
      const [primary, ...rest] = sorted;
      list.push({
        ...primary,
        activityCount: sorted.length,
        childActivities: rest.length ? rest : null,
      });
    });
    return list;
  }, [dataSource, groupByGoods]);

  const summaryMetrics = useMemo(() => {
    if (!summary) return [];
    return [
      { key: 'totalRecords', label: '活动记录数', value: formatNumber(summary.totalRecords) },
      { key: 'successCount', label: '报名成功', value: formatNumber(summary.successCount) },
      { key: 'successRate', label: '报名成功率', value: `${summary.successRate}%` },
      { key: 'goodsCount', label: '参与商品数', value: formatNumber(summary.goodsCount) },
      { key: 'shopCount', label: '参与店铺数', value: formatNumber(summary.shopCount) },
      { key: 'activityIdCount', label: '活动数', value: formatNumber(summary.activityIdCount) },
      { key: 'activityTypeCount', label: '活动类型', value: formatNumber(summary.activityTypeCount) },
      { key: 'priceRange', label: '价格区间', value: summary.globalMinPrice !== '-' ? `${formatPrice(summary.globalMinPrice)} ~ ${formatPrice(summary.globalMaxPrice)}` : '-' },
    ];
  }, [summary]);

  const columns = useMemo(() => [
    {
      title: '商品图片',
      dataIndex: 'thumbUrl',
      key: 'thumbUrl',
      width: 80,
      fixed: 'left',
      render: (value, record) => (
        value ? (
          <img
            className="marketing-events-thumb"
            src={value}
            alt={record.goodsName || '商品图片'}
            loading="lazy"
          />
        ) : (
          <span className="marketing-events-thumb is-empty">暂无</span>
        )
      ),
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 200,
      ellipsis: true,
      render: (value, record) => (
        <div className="marketing-events-goods-cell">
          {value ? <span className="marketing-events-goods-name" title={value}>{value}</span> : '-'}
          <span className="marketing-events-goods-id">ID: {record.goodsId || '-'}</span>
        </div>
      ),
    },
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName',
      width: 200,
      ellipsis: true,
      render: (value, record) => (
        <div className="marketing-events-goods-cell">
          {value ? <span title={value}>{value}</span> : '-'}
          <span className="marketing-events-goods-id">ID: {record.activityId || '-'}</span>
          {record.activityCount > 1 ? (
            <Tag color="blue" style={{ marginRight: 0 }}>共{record.activityCount}个活动 · 已按最低价优先</Tag>
          ) : null}
        </div>
      ),
    },
    {
      title: '活动类型',
      dataIndex: 'activityType',
      key: 'activityType',
      width: 140,
      ellipsis: true,
      render: (value) => value || '-',
    },
    {
      title: '店铺',
      dataIndex: 'shopName',
      key: 'shopName',
      width: 120,
      ellipsis: true,
      render: (value) => value || '-',
    },
    {
      title: '报名时间',
      dataIndex: 'enrollTime',
      key: 'enrollTime',
      width: 160,
      sorter: true,
      render: (value) => formatTimestamp(value),
    },
    {
      title: '活动开始',
      dataIndex: 'activityStartTime',
      key: 'activityStartTime',
      width: 160,
      sorter: true,
      render: (value) => formatTimestamp(value),
    },
    {
      title: '活动结束',
      dataIndex: 'activityEndTime',
      key: 'activityEndTime',
      width: 160,
      sorter: true,
      render: (value) => formatTimestamp(value),
    },
    {
      title: '最低价',
      dataIndex: 'minPrice',
      key: 'minPrice',
      width: 100,
      align: 'right',
      render: (value) => formatPrice(value),
    },
    {
      title: '最高价',
      dataIndex: 'maxPrice',
      key: 'maxPrice',
      width: 100,
      align: 'right',
      render: (value) => formatPrice(value),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      fixed: 'right',
      render: (value) => {
        const info = getStatusInfo(value);
        return <Tag color={info.color}>{info.label}</Tag>;
      },
    },
  ], []);

  const childActivityColumns = [
    { title: '活动名称', dataIndex: 'activityName', width: 200, ellipsis: true, render: (value, record) => (
      <div className="marketing-events-goods-cell">
        {value ? <span title={value}>{value}</span> : '-'}
        <span className="marketing-events-goods-id">ID: {record.activityId || '-'}</span>
      </div>
    ) },
    { title: '活动类型', dataIndex: 'activityType', width: 140, ellipsis: true, render: (value) => value || '-' },
    { title: '报名时间', dataIndex: 'enrollTime', width: 160, render: formatTimestamp },
    { title: '活动开始', dataIndex: 'activityStartTime', width: 160, render: formatTimestamp },
    { title: '活动结束', dataIndex: 'activityEndTime', width: 160, render: formatTimestamp },
    { title: '最低价', dataIndex: 'minPrice', width: 100, align: 'right', render: formatPrice },
    { title: '最高价', dataIndex: 'maxPrice', width: 100, align: 'right', render: formatPrice },
    { title: '状态', dataIndex: 'status', width: 100, render: (value) => {
      const info = getStatusInfo(value);
      return <Tag color={info.color}>{info.label}</Tag>;
    } },
  ];

  return (
    <SycmPage className="marketing-events-page">
      <SycmBusinessPanel className="marketing-events-panel" aria-label="营销活动内容区">
        <div className="marketing-events-panel__heading">
          <h2>营销活动</h2>
          <span>查看拼多多平台活动报名记录</span>
          {latestDate && (
            <span className="marketing-events-data-date">最新数据日期：{latestDate}</span>
          )}
        </div>

        <Spin spinning={summaryLoading}>
          <div className="marketing-events-summary">
            {summaryMetrics.map((item) => (
              <SycmDashboardMetric
                key={item.key}
                label={item.label}
                value={item.value}
                help={false}
              />
            ))}
            {!summary && !summaryLoading && (
              <span className="marketing-events-summary__empty">暂无汇总数据</span>
            )}
          </div>
        </Spin>

        <Form
          form={form}
          className="marketing-events-filter"
          layout="horizontal"
          colon={false}
          onFinish={handleFinish}
        >
          <Form.Item label="店铺名称" name="shopName">
            <Input allowClear placeholder="输入店铺名称" />
          </Form.Item>
          <Form.Item label="活动类型" name="activityType">
            <Input allowClear placeholder="输入活动类型" />
          </Form.Item>
          <Form.Item label="活动名称" name="activityName">
            <Input allowClear placeholder="输入活动名称" />
          </Form.Item>
          <Form.Item label="活动ID" name="activityId">
            <Input allowClear placeholder="输入活动ID" />
          </Form.Item>
          <Form.Item label="商品名称" name="goodsName">
            <Input allowClear placeholder="输入商品名称" />
          </Form.Item>
          <Form.Item label="商品ID" name="goodsId">
            <Input allowClear placeholder="输入商品ID" />
          </Form.Item>
          <Form.Item label="活动时间" name="dateRange">
            <RangePicker allowClear placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
          </Form.Item>
          <div className="marketing-events-filter__actions">
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>查询</Button>
            <Button htmlType="button" icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
          </div>
        </Form>

        <div className="marketing-events-table-toolbar">
          <Segmented
            className="marketing-events-status-switch"
            value={statusFilter}
            options={statusOptions}
            onChange={(value) => {
              setStatusFilter(value);
              setPagination((prev) => ({ ...prev, current: 1 }));
            }}
          />
          <Segmented
            value={groupByGoods ? 'group' : 'flat'}
            options={[
              { label: '按商品聚合（最低价优先）', value: 'group' },
              { label: '按活动明细', value: 'flat' },
            ]}
            onChange={(value) => setGroupByGoods(value === 'group')}
          />
        </div>

        <Spin spinning={loading}>
          <Table
            className="marketing-events-table"
            rowKey="id"
            columns={columns}
            dataSource={displayData}
            onChange={handleTableChange}
            expandable={groupByGoods ? {
              expandedRowRender: (record) => (
                <Table
                  className="marketing-events-child-table"
                  rowKey="id"
                  size="small"
                  pagination={false}
                  columns={childActivityColumns}
                  dataSource={record.childActivities || []}
                />
              ),
              rowExpandable: (record) => Boolean(record.childActivities?.length),
            } : undefined}
            pagination={{
              current: pagination.current,
              pageSize: pagination.pageSize,
              total,
              showSizeChanger: true,
              pageSizeOptions: ['20', '50', '100'],
              showTotal: (t) => `共 ${t} 条`,
            }}
            scroll={{ x: 1600 }}
            locale={{ emptyText: loading ? '加载中...' : '暂无活动记录' }}
            size="small"
          />
        </Spin>
      </SycmBusinessPanel>
    </SycmPage>
  );
};

export default MarketingEvents;