text: import React, { forwardRef, useState,useEffect, useRef, useImperativeHandle, useMemo } from "react"
  import PropTypes from "prop-types"
  import BScroll from "better-scroll"
  import styled from 'styled-components';
  import Loading from '../loading';
  import { debounce } from "../../api/utils";
  import LoadingV2 from '../loading-v2';
  
  const ScrollContainer = styled.div`
    width: 100%;
    height: 100%;
    overflow: hidden;
  `;
  
  const PullUpLoading = styled.div`
    position: absolute;
    left:0; right:0;
    bottom: 5px;
    width: 60px;
    height: 60px;
    margin: auto;
    z-index: 100;
  `;
  
  export const PullDownLoading = styled.div`
    position: absolute;
    left:0; right:0;
    top: 0px;
    height: 30px;
    margin: auto;
    z-index: 100;
  `;
  
  const Scroll = forwardRef((props, ref) => {
    const [bScroll, setBScroll] = useState();
  
    const scrollContaninerRef = useRef();
  
    const { direction, click, refresh,  bounceTop, bounceBottom } = props;
  
    const { pullUp, pullDown, onScroll, pullUpLoading, pullDownLoading } = props;
  
    // 上拉防抖处理
    let pullUpDebounce = useMemo(() => {
      return debounce(pullUp, 500)
    }, [pullUp]);
  
    // 下拉防抖处理
    let pullDownDebounce = useMemo(() => {
      return debounce(pullDown, 500)
    }, [pullDown]);
  
    useEffect(() => {
      const scroll = new BScroll(scrollContaninerRef.current, {
        scrollX: direction === "horizental",
        scrollY: direction === "vertical",
        probeType: 3,
        click: click,
        bounce:{
          top: bounceTop,
          bottom: bounceBottom
        }
      });
      setBScroll(scroll);
      return () => {
        setBScroll(null);
      }
      // eslint-disable-next-line
    }, []);
  
    useEffect(() => {
      if(!bScroll || !onScroll) return;
      bScroll.on('scroll', (scroll) => {
        onScroll(scroll);
      })
      return () => {
        bScroll.off('scroll');
      }
    }, [onScroll, bScroll]);
  
    useEffect(() => {
      if(!bScroll || !pullUp) return;
      bScroll.on('scrollEnd', () => {
        //判断是否滑动到了底部
        if(bScroll.y <= bScroll.maxScrollY + 100){
          pullUpDebounce();
        }
      });
      return () => {
        bScroll.off('scrollEnd');
      }
    }, [pullUpDebounce, pullUp, bScroll]);
  
    useEffect(() => {
      if(!bScroll || !pullDown) return;
      bScroll.on('touchEnd', (pos) => {
        //判断用户的下拉动作
        if(pos.y > 50) {
          pullDownDebounce();
        }
      });
      return () => {
        bScroll.off('touchEnd');
      }
    }, [pullDownDebounce, pullDown, bScroll]);
  
  
    useEffect(() => {
      if(refresh && bScroll){
        bScroll.refresh();
      }
    });
  
    useImperativeHandle(ref, () => ({
      // 更新回到顶部
      refresh() {
        if(bScroll) {
          bScroll.refresh();
          bScroll.scrollTo(0, 0);
        }
      },
      // 动画回到顶部
      backtopWithAnimition() {
        if(bScroll) {
          let nowY = bScroll.y
          let step = nowY / 50
          let scrollInterval = setInterval(() => {
            nowY = nowY - step
            // console.log(nowY)
            if(nowY < 0) {
              bScroll.scrollTo(0, nowY)
            } else {
              bScroll.scrollTo(0, 0)
              clearInterval(scrollInterval)
            }
          }, 10)
        }
      },
      // 拿到bs实例
      getBScroll() {
        if(bScroll) {
          return bScroll;
        }
      }
    }));
  
    const PullUpdisplayStyle = pullUpLoading ? { display: "" } : { display: "none" };
    const PullDowndisplayStyle = pullDownLoading ? { display: "" } : { display: "none" };
    return (
      <ScrollContainer ref={scrollContaninerRef}>
        {props.children}
        {/* 滑到底部加载动画 */}
        <PullUpLoading style={ PullUpdisplayStyle }><Loading></Loading></PullUpLoading>
        {/* 顶部下拉刷新动画 */}
        <PullDownLoading style={ PullDowndisplayStyle }><LoadingV2></LoadingV2></PullDownLoading>
      </ScrollContainer>
    );
  })
  
  Scroll.propTypes = {
  	direction: PropTypes.oneOf (['vertical', 'horizental']),// 滚动的方向
    click: PropTypes.bool,// 是否支持点击
    refresh: PropTypes.bool,// 是否刷新
    onScroll: PropTypes.func,// 滑动触发的回调函数
    pullUp: PropTypes.func,// 上拉加载逻辑
    pullDown: PropTypes.func,// 下拉加载逻辑
    pullUpLoading: PropTypes.bool,// 是否显示上拉 loading 动画
    pullDownLoading: PropTypes.bool,// 是否显示下拉 loading 动画
    bounceTop: PropTypes.bool,// 是否支持向上吸顶
    bounceBottom: PropTypes.bool// 是否支持向下吸底
  }
  
  Scroll.defaultProps = {
  	direction: "vertical", // 垂直
    click: true, // 支持点击
    refresh: true, // 支持刷新
    onScroll:null, // 暂无滑动触发的回调函数
  	pullUpLoading: false, // 不显示上拉loading动画
    pullDownLoading: false, // 不显示下拉loading动画
    pullUp: null, // 暂无上拉加载逻辑
    pullDown: null, // 暂无下拉加载逻辑
    bounceTop: true, // 支持向上吸顶
    bounceBottom: true // 支持向下吸底
  }
  
  export default Scroll