import {FC} from 'react';
import {Card} from 'antd';
import {Table, TableTools} from '@components';
import {context, pageContext, searchContext} from '../context';
import {getReceiveOrderList, getTimeoutReceiveOrderList} from '@apis';
import {useContextSection, useQueryTableList} from '@hooks';
import {ReceiveListData} from '@models';
import {
  SMALL_TABLE_WIDTH,
  NORMAL_TABLE_WIDTH,
  GS_CODE_COL_WIDTH,
  MATERIAL_CODE_COL_WIDTH,
  MATERIAL_NAME_COL_WIDTH,
  SUPPLIER_COL_WIDTH,
} from '@utils';
import {ColumnsType} from 'antd/es/table';

const columns: ColumnsType<ReceiveListData> = [
  {
    title: '采购单号',
    dataIndex: 'orderCode',
    key: 'orderCode',
    width: GS_CODE_COL_WIDTH,
  },
  {
    title: '物料编号',
    dataIndex: 'wllbCode',
    key: 'wllbCode',
    width: MATERIAL_CODE_COL_WIDTH,
  },
  {
    title: '物料名称',
    dataIndex: 'materialName',
    key: 'materialName',
    width: MATERIAL_NAME_COL_WIDTH,
  },
  {
    title: '供应商',
    dataIndex: 'supplierName',
    key: 'supplierName',
    width: SUPPLIER_COL_WIDTH,
  },
  {
    title: '到货数量',
    dataIndex: 'arrivalNum',
    key: 'arrivalNum',
    width: SMALL_TABLE_WIDTH,
    align: 'right',
  },
  {
    title: '到货时间',
    dataIndex: 'arrivalTime',
    key: 'arrivalTime',
    width: NORMAL_TABLE_WIDTH,
  },
  {
    title: '状态',
    dataIndex: 'type',
    key: 'type',
    render(_, {type}) {
      return type === '1' ? '已收货' : '未收货';
    },
    width: SMALL_TABLE_WIDTH,
    align: 'center',
  },
];
const TableList: FC = function () {
  const params = useContextSection(context, state => state[0]);

  const [{data, count, isFetching}, {refetch}] = useQueryTableList({
    queryFn:
      params.type === '1' ? getReceiveOrderList : getTimeoutReceiveOrderList,
    params,
    pageContext,
    searchContext,
  });

  return (
    <Card className='table-wrapper'>
      <TableTools onRefresh={refetch} isRefreshing={isFetching} />

      <Table
        data={data}
        count={count}
        pageContext={pageContext}
        searchContext={searchContext}
        data-testid='purchase_order_table'
        columns={columns}
      />
    </Card>
  );
};

export default TableList;
