pay-admin/src/pages/asset/activities/modals/ActivityShow.tsx

import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import {
  ActivitiesPublishStatusEnum,
  ActivitiesPublishTypeEnum,
  ActivitiesStatusEnum,
} from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space, Spin } from 'antd';
import { useState } from 'react';

export default function Show(props: MyBetaModalFormProps) {
  const [show, setShow] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [hasLoaded, setHasLoaded] = useState(false);

  const getShow = () => {
    if (props?.item?.id && !loading && !hasLoaded) {
      setLoading(true);
      setHasLoaded(true);
      Apis.Activity.Activities.Show({
        id: props?.item?.id,
      })
        .then((res: any) => {
          setShow(res?.data);
        })
        .catch(() => {
          setHasLoaded(false); // 如果请求失败，允许重试
        })
        .finally(() => {
          setLoading(false);
        });
    }
  };

  return (
    <MyModal
      title={props.title || '查看'}
      width={800}
      onOpen={getShow}
      node={
        <ProCard>
          <Spin spinning={loading}>
            <ProDescriptions
              // bordered
              column={1}
              size="small"
            >
              <ProDescriptions.Item label=" 关联项目">
                {show?.activity_projects
                  ?.map((project: any) => project?.asset_project?.name)
                  .join(', ') || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="活动标题">
                {show?.title || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="活动时间">
                <Space>
                  <renderTextHelper.Tag
                    Enums={ActivitiesStatusEnum}
                    value={props?.item?.status}
                    key="status"
                  />
                  {show?.start_time || '-'} 至 {show?.end_time || '-'}
                </Space>
              </ProDescriptions.Item>
              <ProDescriptions.Item label="发布时间">
                <Space>
                  <renderTextHelper.Tag
                    Enums={ActivitiesPublishStatusEnum}
                    value={props?.item?.publish_status}
                    key="publish_status"
                  />
                  <renderTextHelper.Tag
                    Enums={ActivitiesPublishTypeEnum}
                    value={props?.item?.publish_type}
                    key="publish_type"
                  />
                  {show?.publish_time || '-'}
                </Space>
              </ProDescriptions.Item>
              <ProDescriptions.Item label="活动封面">
                {show?.cover_image?.[0]?.url ? (
                  <img
                    src={show?.cover_image?.[0]?.url}
                    alt={show?.title || '-'}
                    style={{
                      width: 160,
                      height: 90,
                      objectFit: 'cover',
                    }}
                  />
                ) : (
                  '-'
                )}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="活动内容">
                <div
                  style={{
                    border: '1px solid #ccc',
                    borderRadius: '6px',
                    padding: '12px',
                    maxHeight: '300px',
                    width: '100%',
                    overflow: 'auto',
                    backgroundColor: '#fafafa',
                  }}
                  dangerouslySetInnerHTML={{
                    __html: show?.content || '暂无内容',
                  }}
                />
              </ProDescriptions.Item>
              <ProDescriptions.Item label="创建时间">
                {show?.created_at || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="最近修改">
                {show?.updated_at || '-'}
              </ProDescriptions.Item>
            </ProDescriptions>
          </Spin>
        </ProCard>
      }
    />
  );
}