timeline-frontend/src/pages/story/components/TimelineItemDrawer.tsx

// src/pages/story/components/TimelineItemDrawer.tsx
import TimelineImage from '@/components/TimelineImage';
import { StoryItem } from '@/pages/story/data';
import { queryStoryItemImages } from '@/pages/story/service';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useIntl, useRequest } from '@umijs/max';
import { Button, Divider, Drawer, Popconfirm, Space } from 'antd';
import React, { useEffect } from 'react';

interface Props {
  storyItem: StoryItem;
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  handleDelete: () => void;
  handOption: (item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => void;
}

const TimelineItemDrawer: React.FC<Props> = (props) => {
  const { storyItem, open, setOpen, handleDelete, handOption } = props;
  const intl = useIntl();

  const { data: imagesList, run } = useRequest(
    async (itemId) => {
      return await queryStoryItemImages(itemId);
    },
    {
      manual: true,
    },
  );

  useEffect(() => {
    if (open) {
      run(storyItem.instanceId);
    }
  }, [open]);

  const closeDrawer = () => {
    setOpen(false);
  };

  // 格式化日期显示
  const formatDate = (dateString: string) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    });
  };

  return (
    <div>
      {/* 主时间点详情抽屉 */}
      <Drawer
        width={800}
        placement="right"
        onClose={closeDrawer}
        open={open}
        zIndex={1000}
        title={
          <div>
            <h2 style={{ margin: 0 }}>{storyItem.title}</h2>
            <div style={{ fontSize: '14px', color: '#888', marginTop: '4px' }}>
              {storyItem.storyItemTime} {storyItem.location ? `于${storyItem.location}` : ''}
            </div>
          </div>
        }
        footer={
          <div style={{ textAlign: 'right' }}>
            <Space>
              <Button
                icon={<EditOutlined />}
                onClick={() => {
                  return handOption(storyItem, 'edit');
                }}
              >
                编辑
              </Button>
              <Popconfirm
                title={intl.formatMessage({ id: 'story.deleteConfirm' })}
                description={intl.formatMessage({ id: 'story.deleteConfirmDescription' })}
                onConfirm={(e) => {
                  e?.stopPropagation();
                  handleDelete();
                }}
                okText={intl.formatMessage({ id: 'story.yes' })}
                cancelText={intl.formatMessage({ id: 'story.no' })}
              >
                <Button
                  icon={<DeleteOutlined />}
                  danger
                  onClick={(e) => e.stopPropagation()}
                  aria-label={intl.formatMessage({ id: 'story.delete' })}
                >
                  删除
                </Button>
              </Popconfirm>
              <Button onClick={closeDrawer}>关闭</Button>
            </Space>
          </div>
        }
      >
        <div style={{ padding: '0 24px' }}>
          <div style={{ marginBottom: '24px' }}>
            <h3>描述</h3>
            <p style={{ fontSize: '16px', lineHeight: '1.6' }}>{storyItem.description}</p>
          </div>

          <Divider />

          {/* 时刻图库 */}
          {imagesList && imagesList.length > 0 && (
            <div style={{ marginBottom: '24px' }}>
              <h3>时刻图库</h3>
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
                  gap: '16px',
                  marginTop: '16px',
                }}
              >
                {imagesList.map((imageInstanceId, index) => (
                  <div
                    key={imageInstanceId + index}
                    style={{
                      borderRadius: '8px',
                      overflow: 'hidden',
                      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                      aspectRatio: '1/1',
                    }}
                  >
                    <TimelineImage
                      title={imageInstanceId}
                      imageInstanceId={imageInstanceId}
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    />
                  </div>
                ))}
              </div>
            </div>
          )}
          <Divider />

          {/* 创建和更新信息 */}
          <div style={{ marginBottom: '24px' }}>
            <h3>记录信息</h3>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', marginTop: '16px' }}>
              <div style={{ flex: '1', minWidth: '200px' }}>
                <div style={{ color: '#888', marginBottom: '4px' }}>创建时间</div>
                <div style={{ fontSize: '16px' }}>{formatDate(storyItem.createTime)}</div>
              </div>
              <div style={{ flex: '1', minWidth: '200px' }}>
                <div style={{ color: '#888', marginBottom: '4px' }}>更新时间</div>
                <div style={{ fontSize: '16px' }}>{formatDate(storyItem.updateTime)}</div>
              </div>
              <div style={{ flex: '1', minWidth: '200px' }}>
                <div style={{ color: '#888', marginBottom: '4px' }}>更新人</div>
                <div style={{ fontSize: '16px' }}>系统用户</div>
              </div>
            </div>
          </div>
        </div>
      </Drawer>
    </div>
  );
};

export default TimelineItemDrawer;