import React from 'react'

import { View } from '@tarojs/components'

import './index.less'

export interface IProps {
  loading: boolean
  loadingText?: string
  noMore?: boolean
  noMoreText?: string
}

/**
 * 上拉加载更多提示组件，可以显示 加载中/暂无更多数据。
 * @param props
 */
export const LxPullUp: React.FC<IProps> = (props) => {
  const {
    loading,
    loadingText,
    noMore,
    noMoreText
  } = props

  return (
    <View className='lx-pull-up'>
      <View className='lx-pull-up__body'>
        {!loading && noMore && (
          <View className='lx-loadmore lx-loadmore__line'>
            <View className='lx-loadmore__tips lx-loadmore__tips_in-line'>{ noMoreText }</View>
          </View>
        )}
        {loading && (
          <View className='lx-loadmore'>
            <View className='lx-loadmore__loading'></View>
            <View className='lx-loadmore__tips'>{ loadingText }</View>
          </View>
        )}
      </View>
    </View>
  )
}

LxPullUp.defaultProps = {
  loading: false,
  loadingText: '正在加载',
  noMore: false,
  noMoreText: '暂无更多数据'
}