import { BfScrollView, BfTabs } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React, { useEffect, useState } from 'react';

export default () => {
  const [queryProps, setQueryProps] = useState<Record<string, any>>({
    pageNo: 1,
    pageSize: 10,
  });
  const { reLoadDataWithProps, ...scrollViewProps } = BfScrollView.useListHook({
    loadData,
    queryProps,
  });

  useEffect(() => {
    reLoadDataWithProps(queryProps);
  }, [queryProps]);

  async function loadData(params) {
    console.log('loadData ---> ', params);
    setTimeout(() => null, 2000);
    return { code: 200, data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] };
  }

  return (
    <>
      <BfScrollView
        {...scrollViewProps}
        renderListItem={(item, index) => (
          <View style={{ padding: '20px', borderTop: '1px solid #333' }}>{`${item}-${index}`}</View>
        )}
        header={
          <BfTabs
            current={1}
            tabs={[
              { label: 'aaa', value: 1 },
              { label: 'bbb', value: 2 },
              { label: 'ccc', value: 3 },
            ]}
          />
        }
        footer={<View>我是尾部</View>}
      />
    </>
  );
};