import css from './index.module.css';
import {FC} from 'react';
import icon from '@assets/images/screen/data.webp';
import AutoListSizer from 'react-virtualized-auto-sizer';
import {FixedSizeList} from 'react-window';
import {useInfiniteScroll} from './hooks';
import classNames from 'classnames';

const data = Array.from(
  {
    length: 20,
  },
  function (_, idx) {
    return {
      idx: idx + 1,
      company: '西安特来电智能充电公司',
      order: '711202304200003',
      materialCode: '3928010010040004',
      materialName: '物料名称',
      date: '2020-09-21',
    };
  },
);

const List: FC = function () {
  const [{scrollRef, listData, smooth}, {onElementSizeChange, onScroll}] =
    useInfiniteScroll(data);

  return (
    <div className={css.list}>
      <h3 className={css.title}>
        <img src={icon} />
        <p>入库物料数据</p>
      </h3>

      <div className={css.header}>
        <span>序号</span>
        <span>供应商</span>
        <span>采购订单号</span>
        <span>物料编号</span>
        <span>物料名称</span>
        <span>预计到货时间</span>
      </div>
      <div className={css.listGroup}>
        <AutoListSizer>
          {function ({height, width}) {
            onElementSizeChange(height ?? 0);
            return (
              <FixedSizeList
                itemCount={listData.length}
                width={width ?? 0}
                height={height ?? 0}
                itemSize={54}
                className={classNames({[css.virtualized]: smooth})}
                ref={scrollRef}
                onScroll={onScroll}
              >
                {function ({style, index}) {
                  const {
                    idx,
                    company,
                    materialCode,
                    materialName,
                    order,
                    date,
                  } = listData[index];
                  return (
                    <p style={{...style}}>
                      <span>{idx}</span>
                      <span>{company}</span>
                      <span>{order}</span>
                      <span>{materialCode}</span>
                      <span>{materialName}</span>
                      <span>{date}</span>
                    </p>
                  );
                }}
              </FixedSizeList>
            );
          }}
        </AutoListSizer>
      </div>
    </div>
  );
};

export default List;
