import { BfPowerScrollView } from '@bud-fe/react-taro-ui';
import { Text, View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import './index.module.less';

const mockRequest = async (_startIndex, isRefresh, name) => {
  const sleep = (t) =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve();
      }, t);
    });
  const TOTAL = 100;
  let startIndex = _startIndex;
  if (isRefresh) {
    startIndex = 0;
  }
  if (startIndex >= TOTAL) {
    return [];
  }
  console.log(`${name}:请求~`, 'isRefresh:', isRefresh);
  await sleep(1200);
  const list = [];
  for (let i = 0; i < 20; i++) {
    list.push(`${name}:`);
  }
  return list;
};

export default function () {
  const [state, changeState] = useState({
    basicsList: [],
    basicsFinished: false,
  });
  const setState = (newState) => {
    changeState({
      ...state,
      ...newState,
    });
  };

  // 基础用法
  const basicsDoRefresh = async (event = 0) => {
    const append = await mockRequest(state.basicsList.length, true, '基础用法');
    setState({
      basicsList: append.map((item, index) => (
        <View key={`${state.basicsList.length + index}append`} style={{ height: '40px', lineHeight: '40px' }}>
          {item}
          <Text>{`index:${state.basicsList.length + index + 1}`}</Text>
          {/* <Tag type="success">{`index:${state.basicsList.length +
            index +
            1}`}</Tag> */}
        </View>
      )),
      basicsFinished: append.length === 0,
    });
  };
  const basicsLoadMore = async (event = 0, isRefresh = false) => {
    let append = await mockRequest(state.basicsList.length, isRefresh, '基础用法');
    append = append.map((item, index) => (
      <View key={`${state.basicsList.length + index}append`} style={{ height: '40px', lineHeight: '40px' }}>
        {item}
        <Text>{`index:${state.basicsList.length + index + 1}`}</Text>
        {/* <Tag type="success"></Tag> */}
      </View>
    ));
    setState({
      basicsList: [...state.basicsList, ...append],
      basicsFinished: append.length === 0,
    });
  };

  useEffect(() => {
    basicsLoadMore();
  }, []);

  return (
    <>
      <BfPowerScrollView
        finishedText="没有更多了"
        successText="刷新成功"
        // refresherEnabled={false}
        onScrollToUpper={basicsDoRefresh}
        onScrollToLower={basicsLoadMore}
        current={state.basicsList.length}
        finished={state.basicsFinished}
        header={<View style={{ lineHeight: '50px' }}>Head</View>}
        footer={<View style={{ lineHeight: '50px' }}>Footer</View>}
        lowerThreshold={300}
      >
        {state.basicsList.map((e, i) => (
          <View key={i}>{e}</View>
        ))}
      </BfPowerScrollView>
      {/*  */}
    </>
  );
}