import React,{Component} from 'react';
import {Image, View} from '@tarojs/components';
import {AtActivityIndicator, AtPagination} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
import 'taro-ui/dist/style/components/divider.scss';
import 'taro-ui/dist/style/components/icon.scss';
import './index.less';

import noData from '../../../image/noData.png';

import 'taro-ui/dist/style/components/activity-indicator.scss';
import 'taro-ui/dist/style/components/loading.scss';
import 'taro-ui/dist/style/components/pagination.scss';
import 'taro-ui/dist/style/components/button.scss';
import 'taro-ui/dist/style/components/icon.scss';

class ListBottomStart extends Component{
  constructor(props) {
    super(props);
  }

  render() {
    const { state } = this.props;
    return (
      this.props.type === 'pagination' ? <View className='listBottomStartComponent'>
        {
        state === 'RELOAD' ?
          <View className='reload'>
            <View>加载失败</View>
            <View className='operation' onClick={()=>{
              this.props.reload && this.props.reload();
            }}>点击重新加载</View>
          </View>:
          state === 'NO_DATA' ?
            <View className='noData'>
              <Image src={noData} className='noDataImg'/>
              <View className='noDataTitle'>暂时没有数据</View>
            </View>
            : <AtPagination
                icon
                total={this.props.total}
                pageSize={this.props.pageSize}
                current={this.props.current}
                onPageChange={v=>{
                  this.props.onPageChange(v.type, v.current)
                }}
            />
        }
      </View> :<View className='listBottomStartComponent'>
        {
          state === 'NO_MORE_DATA' ?
            <View className='noMoreData'>
              没有更多了
            </View>:
          state === 'RELOAD' ?
            <View className='reload'>
              <View>加载失败</View>
              <View className='operation' onClick={()=>{
                this.props.reload && this.props.reload();
              }}>点击重新加载</View>
            </View>:
            state === 'LOADING' ?
              <View>
                <AtActivityIndicator content='加载中...'/>
              </View>:
              state === 'NO_DATA' ?
                <View className='noData'>
                  <Image src={noData} className='noDataImg'/>
                  <View className='noDataTitle'>暂时没有数据</View>
                </View>
            : null
        }
      </View>
    )
  }
}

export default ListBottomStart;
