import { ProCard } from '@ant-design/pro-components';
import { Card, Space } from 'antd';
import React from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import {
  type DeptReqVO,
  type DeptVO,
  getDeptPage,
} from '@/services/system/dept';
import type { TradeExtendCostInfo } from '@/services/trade/order';
import { baseOrderColumns } from '../../../config';
import styles from './index.module.less';

const SelectInfo: React.FC<{ data?: TradeExtendCostInfo; id: number }> = (
  props,
) => {
  const { data = {}, id } = props;
  const onFetch = async (
    params: DeptReqVO & {
      pageSize?: number;
      current?: number;
    },
  ) => {
    const data = await getDeptPage({
      ...params,
      pageNo: params.current,
      pageSize: params.pageSize,
    });
    return {
      data: data,
      success: true,
      total: data.total,
    };
  };
  return (
    <div className={styles['order-info']}>
      <Card title="可选服务">
        <Space direction="vertical" style={{ width: '100%' }} size={16}>
          <ProCard split="vertical" bordered>
            <ProCard size="small" title="服务" headerBordered>
              1111
            </ProCard>
            <ProCard size="small" title="付款信息" headerBordered>
              1111
            </ProCard>
            <ProCard size="small" title="退款信息" headerBordered>
              1111
            </ProCard>
          </ProCard>

          <EnhancedProTable<DeptVO>
            columns={baseOrderColumns}
            request={onFetch}
            showIndex={false}
            size="small"
            search={false}
            showActions={false}
            showSelection={false}
            bordered
            pagination={false}
          />

          <ProCard split="vertical" bordered>
            <ProCard size="small" title="纪念品" headerBordered>
              1111
            </ProCard>
            <ProCard size="small" title="付款信息" headerBordered>
              1111
            </ProCard>
            <ProCard size="small" title="退款摘要" headerBordered>
              1111
            </ProCard>
          </ProCard>
        </Space>
      </Card>
    </div>
  );
};

export default React.memo(SelectInfo);