import { postServiceOrderGetReissueInfo } from '@/services';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Divider } from 'antd';
import { useEffect, useState } from 'react';

const columns: ProColumns[] = [
  {
    title: '发票号码',
    width: 80,
    dataIndex: 'invoiceNumber',
    render: (_) => _,
  },
  {
    title: '关联订单',
    dataIndex: 'subOrderIds',
    render: (_, { subOrderIds }) => {
      console.log(JSON.stringify(_));
      console.log(JSON.stringify(subOrderIds));
      return (
        <>
          {subOrderIds.map((subOrderId, index) => {
            return (
              <>
                <Button
                  key={index}
                  className="pl-1 pr-0"
                  type="link"
                  target="_blank"
                  href={'/order/order?id=' + subOrderId}
                >
                  {subOrderId}
                </Button>
                <Divider type="vertical" />
              </>
            );
          })}
        </>
      );
    },
  },
];

export default ({ subOrderIds }) => {
  const [reissueInfos, setReissueInfos] = useState([]);
  useEffect(() => {
    console.log('info');
    const getReissueInfo = async () => {
      let res = await postServiceOrderGetReissueInfo({
        data: subOrderIds,
      });
      setReissueInfos(res.data);
    };
    getReissueInfo();
  }, []);
  return (
    <ProTable
      dataSource={reissueInfos}
      rowKey="key"
      pagination={false}
      size={'small'}
      //设置左右下边距为0
      options={false}
      columns={columns}
      search={false}
      dateFormatter="string"
      headerTitle="发票信息"
    />
  );
};