import {
  MyBetaModalFormProps,
  MyButtons,
  MyColumns,
  MyProTableProps,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { ProTable } from '@ant-design/pro-components';
import { Image, Space } from 'antd';
import Create from './modals/Create';
import Show from './modals/Show';

export default function Index(props: MyBetaModalFormProps) {
  return (
    <ProTable
      {...MyProTableProps.props}
      request={async (params, sort) =>
        MyProTableProps.request(
          {
            ...params,
            emergency_events_id: props?.item?.id,
          },
          sort,
          Apis.Emergency.EmergencyEventFollows.List,
        )
      }
      search={false}
      headerTitle="跟进记录"
      toolBarRender={(action) => [
        <Create
          key="Create"
          reload={action?.reload}
          item={props?.item}
          title="跟进记录"
        />,
      ]}
      columns={[
        MyColumns.ID({
          search: false,
        }),
        {
          title: '操作',
          dataIndex: 'node_name',
        },
        {
          title: '内容',
          dataIndex: 'content',
        },
        {
          title: '附件',
          render: (_, item: any) => {
            return (
              <Image.PreviewGroup>
                {item?.attachments?.map((i: any, index: number) => (
                  <Image
                    width={60}
                    height={60}
                    src={i.url}
                    key={`img_${index}`}
                  />
                ))}
              </Image.PreviewGroup>
            );
          },
        },
        MyColumns.CreatedAt(),
        MyColumns.Option({
          render: (_, item: any, index, action) => (
            <Space key={index}>
              <Show item={item} key="Show" />
              <MyButtons.Delete
                key="delete"
                onConfirm={() =>
                  Apis.Emergency.EmergencyEventFollows.Delete({
                    id: item.id,
                  }).then(() => action?.reload())
                }
              />
            </Space>
          ),
        }),
      ]}
    />
  );
}