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

import TimelineImage from '@/components/TimelineImage';
import AddTimeLineItemModal from '@/pages/story/components/AddTimeLineItemModal';
import SubTimeLineItemModal from '@/pages/story/components/SubTimeLineItemModal';
import { StoryItem } from '@/pages/story/data';
import { queryStoryItemImages } from '@/pages/story/service';
import { EditOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { useRequest } from '@umijs/max';
import { Button, Drawer, Space } from 'antd';
import React, { useEffect } from 'react';

interface Props {
  storyItem: StoryItem;
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const TimelineItemDrawer = (props: Props) => {
  const { storyItem, open, setOpen } = props;
  const [editModalVisible, setEditModalVisible] = React.useState(false);
  const [openAddSubItemModal, setOpenAddSubItemModal] = React.useState(false);
  const [openEditMainItemModal, setOpenEditMainItemModal] = React.useState(false);
  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 handleEditMainItem = (updatedItem: any) => {
    const mergedEvent = {
      ...storyItem,
      ...updatedItem,
    };
    setOpenEditMainItemModal(false);
  };
  const handleAddSubItem = () => {
    setOpenAddSubItemModal(false);
  };
  return (
    <div>
      {/* 主时间点详情抽屉 */}
      <Drawer
        width={1000}
        placement="right"
        onClose={closeDrawer}
        open={open}
        title={storyItem.title}
        footer={
          <div style={{ textAlign: 'right' }}>
            <Space>
              <Button
                icon={<PlusCircleOutlined />}
                type="primary"
                onClick={() => setOpenAddSubItemModal(true)}
              >
                添加子时间点
              </Button>
              <Button icon={<EditOutlined />} onClick={() => setEditModalVisible(true)}>
                编辑
              </Button>
              <Button onClick={closeDrawer}>关闭</Button>
            </Space>
          </div>
        }
      >
        <p>
          <strong>描述：</strong> {storyItem.description}
        </p>
        <p>
          <strong>日期：</strong> {storyItem.storyItemTime}
        </p>
        <p>
          <strong>位置：</strong> {storyItem.location}
        </p>
        {/* 封面图 */}
        {storyItem.coverInstanceId && (
          <>
            <p>
              <strong>封面图：</strong>
            </p>
            <TimelineImage
              title={storyItem.title + 'cover'}
              imageInstanceId={storyItem.coverInstanceId}
            />
          </>
        )}

        {/* 时刻图库 */}
        {imagesList && imagesList.length > 0 && (
          <>
            <p>
              <strong>时刻图库：</strong>
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginBottom: '20px' }}>
              {imagesList.map((imageInstanceId, index) => (
                <TimelineImage
                  key={imageInstanceId + index}
                  title={imageInstanceId}
                  imageInstanceId={imageInstanceId}
                />
              ))}
            </div>
          </>
        )}

        {/* 添加子时间点模态框 */}
        <AddTimeLineItemModal
          visible={openAddSubItemModal}
          onOk={handleAddSubItem}
          onCancel={() => setOpenAddSubItemModal(false)}
          lineId={storyItem.storyInstanceId}
          storyItemId={storyItem.instanceId}
        />

        {/* 编辑主时间点模态框 */}
        <SubTimeLineItemModal
          visible={openEditMainItemModal}
          onOk={handleEditMainItem}
          onCancel={() => setOpenEditMainItemModal(false)}
          initialValues={storyItem}
        />
      </Drawer>
    </div>
  );
};

export default TimelineItemDrawer;