pay-admin/src/pages/banner/modals/BannerShow.tsx

import { MyBetaModalFormProps, renderTextHelper } from '@/common';
import { MyModal } from '@/components/MyModal';
import { BannersRedirectTypeEnum, BannersTypeEnum } from '@/gen/Enums';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Image, Space, Typography } from 'antd';

const { Text } = Typography;

export default function info(props: MyBetaModalFormProps) {
  // 根据类型渲染内容
  const renderContent = () => {
    const { type, source } = props?.item || {};
    if (!source || !Array.isArray(source) || source.length === 0) {
      return <Text type="secondary">暂无内容</Text>;
    }

    switch (type) {
      case 'Text':
        return (
          <div
            style={{
              padding: '12px',
              backgroundColor: '#f5f5f5',
              borderRadius: '6px',
              maxWidth: '100%',
              wordBreak: 'break-word',
            }}
          >
            <Text>{source?.[0]?.text}</Text>
          </div>
        );

      case 'Image':
        return (
          <Image.PreviewGroup>
            {source.map((res: any, index: number) => (
              <Space key={index} style={{ paddingRight: 10 }}>
                <Image height={80} src={res?.url || ''} />
              </Space>
            ))}
          </Image.PreviewGroup>
        );

      case 'Video':
        return (
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: '8px',
              maxWidth: '100%',
            }}
          >
            {source.map((res: any, index: number) => (
              <video
                key={index}
                width={240}
                height={180}
                controls
                style={{
                  objectFit: 'cover',
                  borderRadius: '6px',
                  maxWidth: '100%',
                }}
              >
                <source src={res?.url || ''} />
                您的浏览器不支持视频播放
              </video>
            ))}
          </div>
        );
      default:
        return <Text type="secondary">未知内容类型</Text>;
    }
  };

  return (
    <MyModal
      title={props.title || '查看'}
      width="90vw"
      style={{ maxWidth: '1000px' }}
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard bordered>
            <ProDescriptions
              bordered
              column={{ xs: 1, sm: 2, md: 3 }}
              size="small"
            >
              <ProDescriptions.Item label="内容名称" span={3}>
                {props?.item?.name || '-'}
              </ProDescriptions.Item>

              <ProDescriptions.Item label="展示类型">
                <renderTextHelper.Tag
                  Enums={BannersTypeEnum}
                  value={props?.item?.type}
                  key="type"
                />
              </ProDescriptions.Item>
              <ProDescriptions.Item label="开始时间">
                {props?.item?.start_time || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="结束时间">
                {props?.item?.end_time || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="排序">
                {props?.item?.sort || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="创建时间">
                {props?.item?.create_at || '-'}
              </ProDescriptions.Item>
              <ProDescriptions.Item label="更新时间">
                {props?.item?.updated_at || '-'}
              </ProDescriptions.Item>
            </ProDescriptions>
          </ProCard>

          <ProCard title="跳转设置" bordered>
            <ProDescriptions
              bordered
              column={{ xs: 1, sm: 2, md: 3 }}
              size="small"
            >
              <ProDescriptions.Item label="跳转类型">
                <renderTextHelper.Tag
                  Enums={BannersRedirectTypeEnum}
                  value={props?.item?.redirect_type}
                  key="redirect_type"
                />
              </ProDescriptions.Item>
              {props?.item?.redirect_type === 'AnotherMiniProgram' && (
                <ProDescriptions.Item label="小程序AppID" span={2}>
                  {props?.item?.app_id || '-'}
                </ProDescriptions.Item>
              )}
              <ProDescriptions.Item label="跳转链接" span={2}>
                {props?.item?.redirect_path || '-'}
              </ProDescriptions.Item>
            </ProDescriptions>
          </ProCard>

          <ProCard title="广告内容" bordered>
            <div style={{ padding: '16px 0' }}>{renderContent()}</div>
          </ProCard>
        </Space>
      }
    />
  );
}