import {
  logisticscontrollerGetorderlist,
  logisticscontrollerGetlistbyorderid
} from '@/servers/api/logistics';
import { SearchOutlined } from '@ant-design/icons';
import { PageContainer, ProFormSelect } from '@ant-design/pro-components';
import { useState } from 'react';

const TrackPage: React.FC = () => {
  const [id, setId] = useState<string>();
  const [data, setData] = useState({});
  return (
    <PageContainer>
      <ProFormSelect
        showSearch={true}
        debounceTime={500}
        request={async ({ keyWords }) => {
          if (!keyWords || keyWords.length < 3) return [];
          const { data: trackList } =
          await logisticscontrollerGetorderlist({ number: keyWords });
          return trackList?.map((v) => {
            return {
              label: v.siteName + ' ' + v.externalOrderId,
              value: v.id,
            };
          });
        }}
        fieldProps={{
          prefix: '订单号',
          onChange(value: string) {
            setId(value);
            setData({})
            
            const { data } = await logisticscontrollerGetlistbyorderid({
              id,
            });
            setData(data);
          },
          placeholder: '请输入订单号',
          allowClear: false,
          suffixIcon: (
            <SearchOutlined
              onClick={async (e) => {
                if (!id) {
                  return;
                }
                const { data } = await logisticscontrollerGetlistbyorderid({
                  id,
                });
                setData(data);
              }}
            />
          ),
        }}
      />
      {
        data?.item ?
          <div>
            <div>
              <h4>原订单内容</h4>
              {data?.item?.map((item) => (
                <div style={{ paddingLeft: 20, color: 'blue' }}>
                  {item.name} * {item.quantity}
                </div>
              ))}
            </div>
          </div> : <></>
      }
      {
        data?.saleItem ?
          <div>
            <div>
              <h4>订单内容</h4>
              {data?.saleItem?.map((item) => (
                <div style={{ paddingLeft: 20, color: 'blue' }}>
                  {item.name} * {item.quantity}
                </div>
              ))}
            </div>
          </div> : <></>
      }
    </PageContainer>
  );
};

export default TrackPage;